Guide Cards Row - NCIOCPL/ncids GitHub Wiki

[R2.2] This component is comprised of three GUIDE CARDS each with a minimum of two CTA buttons and a maximum of six CTA buttons.

Character limits and image guidelines

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

  • Guide card row title: 32 characters
  • Card title: 32 characters
  • Card description: 160 characters
  • Button text: ~20 characters
  • Image guidance and specs: TK

Where to use

[R2.2] Use component on home page or landing pages. This component is not available for inner pages.

When to use

[R2.2] Use GUIDE CARD ROW component within the body of your page to direct users to a set of two guide cards, each with between two and six CTA buttons, that drive to important content items for that audience.

When to consider something else:

[R2.2]

  • Showcasing CTAs for major initiatives or content marketing items that should be described further through an image and description.
  • Alternative: PROMO BLOCK WITH IMAGE
  • Alternative: GUIDE CARD WITH BACKGROUND IMAGE (this is a future release to give a singular set of CTAs more space on the page) > * Note: If you have two sets of CTAs, you can pair two of these components, one before the other, to create a stronger visual statement on the page.
  • Showcasing one primary CTA or four CTAs that should be more prominently displayed than all other information on the page.
  • Alternative: HERO IMAGE WITH BUTTON
  • Alternative: HERO IMAGE WITH BUTTON + CTA STRIP or a HERO IMAGE WITHOUT BUTTON + CTA STRIP
  • Sharing more than six CTAs.
  • Alternative: GUIDE CARD WITH BACKGROUND IMAGE(this is a future release to display up to six CTAs) and PROMO BLOCK (adds an extra CTA, if needed)

Accessibility

Component Preview

Code for component