Guide Card

A card component composed of an image (available for some variants), description (available for some variants), and between two and six call-to-action (CTA) buttons.

View in Figma

Overview

Example of a vertical card with a title, image, description, and six vertically stacked buttons.

Heading
Image
Description
Link Button
Button label

Variations

Choose from following types of button components based on your page's content design or organizational needs.

Variant
Default Guide Card	Use the default guide card to thematically group two to six CTAs under a title.
Guide Card with Image and Description	Use the guide card with image and description to thematically group two to six CTAs with an image and description to provide further context for the grouping of CTAs.

Usage

Use heading to introduce the two to six CTAs featured on your guide card.
[Not available for all variants] Use image and description to provide context for your group of CTAs and to explain how they relate to the larger message shared on your page.
Use CTA buttons to provide users with links to two to six related CTAs. CTAs can lead to internal or external pages.
Use descriptive, concise button labels within CTA buttons to indicate to user what page they will navigate to upon clicking.

Where to use

Use component on home, landing, and 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
Showcasing one primary CTA or four CTAs that should be more prominently displayed than all other information on the page.
- Alternative: Hero with CTA Button
Showcasing one primary CTA or four CTAs that should be more prominently displayed than all other information on the page.
- Alternative: Hero with CTA Button
- Alternative: Hero with CTA button + CTA strip or a Hero with tagline only + CTA strip

Best Practices

Character Limits

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

Character limits are based on best practices and when a line of text will be forced to wrap onto a second line of text on desktop.

Card title: 32 characters
Card description: 150 characters
Button label 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

For guide cards that have links outside of .gov and other supported sites, an external link icon will be added at the end of the card's title to indicate that the link will go to an external site. This icon is added automatically based on the link the card is going to, but can also be overridden to display or be hidden regardless of the link.

To override an INTERNAL link to be displayed as EXTERNAL, add the class usa-button--external to the anchor (<a>) element.
To override an EXTERNAL link to be displayed as INTERNAL, add the data attribute data-ncids-internal-link to the anchor (<a>) element of the card.

Patterns

2 Guide Card Row

If using the guide card with image and description home page and/or landing page, consider using guide cards in rows of two to maintain the visual consistency of the site. Explore the NCIDS 2 guide card row pattern for more information. To learn more about this pattern, visit Guide Card Row.

3 Guide Card Row

If using the guide card without image and description on a home page and/or landing page, consider using cards in rows of three to maintain the visual consistency of the site. To learn more about this pattern, visit Guide Card Row.

Accessibility

aria-label provides an accessible name for an element. If there is no visible name for the element, use aria-label to provide the user with a recognizable accessible name.
The aria-label of this component is related to the anchor element of the card (the aria-label is on the anchor tag)

Code Snippets

Guide Card with Image and Description

Component Preview

NCI is the nation's trusted source for cancer information. We're here with information about causes and risk factors, early detection and diagnosis, and treatment options.

<div id="nci-card" class="grid-container">
  <div class="nci-guide-card nci-guide-card--with-image-and-description">
    <div class="nci-guide-card__wrapper">
      <picture class="nci-guide-card__image">
        <img src=../16x9_placeholder.png alt="image alt text" />
      </picture>
      <div class="nci-guide-card__body">
        <p class="nci-guide-card__description">
          NCI is the nation's trusted source for cancer information. We're here
          with information about causes and risk factors, early detection and
          diagnosis, and treatment options.
        </p>
        <ul
          class="nci-card__button-group"
          aria-label="aria-label for the guide card with image"
        >
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Funding Opportunities
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Cancer Moonshot Funding Opportunities
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Funding Strategy
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Research Program Contacts
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Guide Card without Image and Description

Component Preview

Research Grant Funding

<div id="nci-card" class="grid-container">
  <div class="nci-guide-card">
    <div class="nci-guide-card__wrapper">
      <div class="nci-guide-card__body">
        <h2 id="Research%20Grant%20Funding" class="nci-guide-card__title">
          Research Grant Funding
        </h2>
        <ul
          class="nci-card__button-group"
          aria-labelledby="Research%20Grant%20Funding"
        >
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Funding Opportunities
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Cancer Moonshot Funding Opportunities
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Funding Strategy
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Research Program Contacts
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Guide Card without Image and Description with External Links

Component Preview

Research Grant Funding

<div id="nci-card" class="grid-container">
  <div class="nci-guide-card">
    <div class="nci-guide-card__wrapper">
      <div class="nci-guide-card__body">
        <h2 id="Research%20Grant%20Funding" class="nci-guide-card__title">
          Research Grant Funding
        </h2>
        <ul
          class="nci-card__button-group"
          aria-labelledby="Research%20Grant%20Funding"
        >
          <li>
            <a
              href="http://www.google.com"
              aria-label="External Link Example"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Link to Google
            </a>
          </li>
          <li>
            <a
              href="http://www.google.com"
              data-ncids-internal-link
              aria-label="Override External to Not Show Icon"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              External Link Icon Overridden
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              aria-label="Override Internal to Show External"
              class="usa-button usa-button--outline usa-button--secondary usa-button--external"
            >
              Internal Link with Icon Override
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Research Program Contacts
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Guide Card with Image and Description and External Links

Component Preview

NCI is the nation's trusted source for cancer information. We're here with information about causes and risk factors, early detection and diagnosis, and treatment options.

<div id="nci-card" class="grid-container">
  <div class="nci-guide-card nci-guide-card--with-image-and-description">
    <div class="nci-guide-card__wrapper">
      <picture class="nci-guide-card__image">
        <img src=../16x9_placeholder.png alt="image alt text" />
      </picture>
      <div class="nci-guide-card__body">
        <p class="nci-guide-card__description">
          NCI is the nation's trusted source for cancer information. We're here
          with information about causes and risk factors, early detection and
          diagnosis, and treatment options.
        </p>
        <ul
          class="nci-card__button-group"
          aria-label="aria-label for the guide card with image"
        >
          <li>
            <a
              href="http://www.google.com"
              aria-label="External Link Example"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Link to Google
            </a>
          </li>
          <li>
            <a
              href="http://www.google.com"
              data-ncids-internal-link
              aria-label="Override External to Not Show Icon"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              External Link Icon Overridden
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              aria-label="Override Internal to Show External"
              class="usa-button usa-button--outline usa-button--secondary usa-button--external"
            >
              Internal Link with Icon Override
            </a>
          </li>
          <li>
            <a
              href="http://cancer.gov"
              class="usa-button usa-button--outline usa-button--secondary"
            >
              Research Program Contacts
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Packages

Import this Sass partial into your stylesheet.

@forward "nci-guide-card";
/* This package should also be imported in your sass stylesheet if not already as NCI Guide Card is dependent on them. */
@forward "usa-button";