Guide Card with Image and Description - NCIOCPL/ncids GitHub Wiki

This component is comprised of an image, description, and between two and six call-to-action (CTAs) buttons.

Character limits and image guidelines

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

Card title: 32 characters
Card description: 160 characters
Button text: ~20 characters
Image guidance and specs:
- NCIDS Guide Card with Image and Description 16:9 Image Style
  - Name - NCIDS Guide Card with Image and Description 16:9
  - Scale Width - 1304px
  - Usage - The 16:9 Image Style will be used at all breakpoints

Where to use

Use component on home page or landing pages. This component is not available for inner pages.

When to use

Use GUIDE CARD WITH IMAGE AND DESCRIPTION within the body of your page to direct users to CTA links (at least two and up to six) that drive to important content items for that audience.

When to consider something else:

Showcasing CTAs for major initiatives or content marketing items that should be described further through an image and description.
- Alternative: PROMO BLOCK WITH IMAGE

[R2.2] Alternative: GUIDE CARD WITH BACKGROUND IMAGE (this is a future release, which gives 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
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 three sets of CTAs.

[R2.2] Alternative: GUIDE CARD ROW(this is a future release to share one CTA)

Alternative: PROMO BLOCK
Sharing more than six CTAs.

[R2.2] Alternative: GUIDE CARD WITH BACKGROUND IMAGE (this is future release to display up to six CTAs) and PROMO BLOCK (to add an extra CTA, if needed)

Pairing recommendations:

Pair guide cards in a row of two. When paired together, each guide card should highlight a related set of CTAs.