Hero Image with or without Button (Light) - NCIOCPL/ncids GitHub Wiki

Hero Image with or without Button (Light)

This component is a full-width hero image with a tagline and option to add a call-to-action (CTA) button.

Character limits and image guidelines

Character limits are strongly recommended to ensure text is concise, scannable, and not distorted.

  • Tagline
    • HERO IMAGE WITH BUTTON: 28 characters
    • HERO IMAGE WITHOUT BUTTON: 56 characters
  • Button text: 20 characters
  • Image guidance and specs: TK

Where to use

Use the hero image at the top of your home page and landing pages to set the tone for the site or section of the site. It is not available for inner pages.

When to use

  • HERO IMAGE WITHOUT BUTTON: Use component to communicate a high-level overview of the content of your site or for a section of your site.
    • This variation should be used if the page does not need to display a CTA more prominently than others on the page, or if a CTA does not communicate the main purpose of the home page or landing page.
    • The tagline should highlight the page’s main initiative(s) and entice the user to scroll through the page.
  • HERO IMAGE WITH BUTTON: If there is a primary CTA for the home page or landing page, use the CTA button option to display both a tagline and a prominently displayed CTA. This CTA should be the most important “next step” you want users to take on your site.
  • Depending on the theme of your web page, the HERO IMAGE WITH OR WITHOUT BUTTON can be set to have either a dark or light theme, which changes the background color of the card.

When to consider something else:

  • Showcasing two to four CTAs that communicate the main purpose of the home page or landing page. These CTAs should be the most important “next steps” you want users to take on your site.
    • Alternative: HERO IMAGE WITH OR WITHOUT BUTTON along with a CTA STRIP
  • Showcasing CTAs for major initiatives or content marketing items that aren’t the main purpose of the site or section and should be described further through an image and description.
    • Alternative: PROMO BLOCK
  • Showcasing multiple content items that rely on their title and description to convey a message.
    • Alternative: (FEATURE) CARDS

Pairing recommendations:

  • If providing users with a prominent CTA for the page while also highlighting three other related CTAs, use the HERO IMAGE WITH OR WITHOUT BUTTON component paired with the CTA STRIP component.

Accessibility

Component Preview

Code for component

Multiple-link Card

This is the multiple-link variant of the NCIDS Feature Card.