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.

Properties

  • Display Name: NCIDS Hero
  • Machine-readable Name: ncids_hero
  • Description: NCIDS Hero Component for Home and Landing Pages

NCIDS Hero Component Styles

  • 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)

Common Fields

  • NCIDS Theme
    • NOTE: Custom tooltip text for NCIDS Hero (provided below)
  • Tagline
    • NOTE: Custom tooltip text for NCIDS Hero (provided below)

Theme

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

Tagline

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

Local Fields

Primary Call to Action Link

  • 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
  • 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

Call To Action Strip (Supporting Calls to Action)

  • Field Name: field_cta_strip
  • Label: Call to Action Strip
  • Type: Paragraph
  • 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

NCIDS Widescreen Hero Image

  • 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

NCIDS Desktop Hero Image

  • 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

NCIDS Tablet Large Hero Image

  • 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

NCIDS Tablet Hero Image

  • 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

NCIDS Mobile Large Hero Image

  • 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

NCIDS Mobile Hero Image

  • 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

Form Display Order

  • 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
⚠️ **GitHub.com Fallback** ⚠️