Paragraph Type NCIDS Hero - NCIOCPL/cgov-digital-platform GitHub Wiki
An NCIDS Hero component, which displays an image and tagline, and optional primary NCIDS Call to Action and secondary NCIDS Call to Action Strip.
NCIDS Heros are placed inside of the Landing Page Contents field of Home and Landing pages with the NCIDS Style.
- Display Name: NCIDS Hero
- Machine-readable Name: ncids_hero
- Description: NCIDS Hero Component for Home and Landing Pages
- Hero with Tagline (Light or Dark)
- Hero with Primary Call to Action (Light or Dark)
- Hero with Primary and Secondary Calls to Action (CTA Strip) (Light or Dark)
- Hero with Tagline and Secondary Calls to Action (CTA Strip) (Light or Dark)
-
NCIDS Theme
- NOTE: Custom tooltip text for NCIDS Hero (provided below)
-
Tagline
- NOTE: Custom tooltip text for NCIDS Hero (provided below)
Property | Value |
---|---|
Field Name | field_ncids_theme |
Label | Theme |
Type | Dropdown - Light (default) - Dark |
Required | Yes |
Max Characters | N/A |
Tooltip Text | Changes the background color of the tagline box. Consider color contrast with hero background image. |
Cardinality | 1 |
Translatable | No |
Property | Value |
---|---|
Field Name | field_tagline |
Label | Tagline |
Type | Text (plain) |
Required | Yes |
Max Characters | 255 |
Tooltip Text | Tagline to communicate high-level overview for the website or landing page. Displays in box overlay on hero image. |
Cardinality | 1 |
Translatable | No |
- Field Name: field_link_button (existing field, if NCIDS Alternating Promo Block is created first)
- Label: Primary Call to Action Link
-
Type: Paragraph
-
Allowed Types:
- ncids_link_button_internal
- ncids_link_button_external
-
Allowed Types:
- Required: No
- Max characters: N/A
- Tooltip Text: Use when there's a primary call to action (CTA), or most important "next step" for users to take from the home or landing page.
- Cardinality: 1
- Translatable: Yes
- Field Name: field_cta_strip
- Label: Call to Action Strip
-
Type: Paragraph
- Using Asymmetrical Translation Widget
- Allowed Types:
- Required: No
- Max characters: N/A
- Tooltip Text: Use when there is a need to display multiple CTAs at the top of the page. Must display minimum of 2 and no more than 3.
- Cardinality: 1
- Translatable: Yes
- Field Name: field_widescreen_hero
- Label: Widescreen Hero Image
-
Type: image
- Allow alt field
- Disable Title field
- Display should just be original image
- Required: Yes
- Tooltip Text: N/A
- Cardinality: 1
- Translatable: No
- Field Name: field_desktop_hero
- Label: Desktop Hero Image
-
Type: image
- Allow alt field
- Disable Title field
- Display should just be original image
- Required: Yes
- Tooltip Text: N/A
- Cardinality: 1
- Translatable: No
- Field Name: field_tablet_large_hero
- Label: Tablet Large Hero Image
-
Type: image
- Allow alt field
- Disable Title field
- Display should just be original image
- Required: Yes
- Tooltip Text: N/A
- Cardinality: 1
- Translatable: No
- Field Name: field_tablet_hero
- Label: Tablet Hero Image
-
Type: image
- Allow alt field
- Disable Title field
- Display should just be original image
- Required: Yes
- Tooltip Text: N/A
- Cardinality: 1
- Translatable: No
- Field Name: field_mobile_large_hero
- Label: Mobile Large Hero Image
-
Type: image
- Allow alt field
- Disable Title field
- Display should just be original image
- Required: Yes
- Tooltip Text: N/A
- Cardinality: 1
- Translatable: No
- Field Name: field_mobile_hero
- Label: Mobile Hero Image
-
Type: image
- Allow alt field
- Disable Title field
- Display should just be original image
- Required: Yes
- Tooltip Text: N/A
- Cardinality: 1
- Translatable: No
- Theme
- Tagline
- Primary Call to Action
- CTA Strip
- Widescreen Hero Image
- Desktop Hero Image
- Tablet Large Hero Image
- Tablet Hero Image
- Mobile Large Hero Image
- Mobile Hero Image