Card Component

The Card component is used to display content in a modular, collection-friendly format. Cards can contain text, images, and actions, and are often used in groups to present related information.

Variants

Default Card: Basic card with header, body, and optional footer
Card with Media: Includes an image or media element
Flag Layout: Horizontal layout with media beside content
Inset Media: Media indented within the card
Exdent Media: Media extending beyond the card border

Usage

Cards should be used for: - Collections of related content - Entry points to more detailed information - Modular, self-contained content blocks

Accessibility

Use semantic headings within card headers
Ensure sufficient color contrast
Provide alt text for images
Use unordered lists for card groups

Related Components

Card Group: Container for multiple cards
Button: For card actions
Link: For navigation within cards

<div class="component-variants">
    <h1>Card Component</h1>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        {% cotton card.group %}
        {% for options in variant.options %}
        {% cotton card layout="{{ options.layout|default:'standardDefault' }}" grid_layout="tablet:grid-col-6" %}
            {% if options.media %}
            {% cotton card.media inset="{% if options.inset %}true{% endif %}" exdent="{% if options.exdent %}true{% endif %}" %}
                <img src="{{ options.media }}" alt="Placeholder image" />
            {% endcotton %}
            {% endif %}
            {% cotton card.header %}
                <h3 class="usa-card__heading">{{ options.title }}</h3>
            {% endcotton %}
            {% cotton card.body %}
                <p>{{ options.body }}</p>
            {% endcotton %}
            {% if options.footer %}
            {% cotton card.footer %}
                <a href="#" class="usa-button">{{ options.footer }}</a>
            {% endcotton %}
            {% endif %}
        {% endcotton %}
        {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}

    <div class="component-variant">
        <h2 class="variant-title">Card Group</h2>
        {% cotton card.group %}
            {% cotton card grid_layout="tablet:grid-col-4" %}
                {% cotton card.header %}
                    <h3 class="usa-card__heading">First Card</h3>
                {% endcotton %}
                {% cotton card.body %}
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
                {% endcotton %}
                {% cotton card.footer %}
                    <a href="#" class="usa-button">Link 1</a>
                {% endcotton %}
            {% endcotton %}
            {% cotton card grid_layout="tablet:grid-col-4" %}
                {% cotton card.header %}
                    <h3 class="usa-card__heading">Card with Media</h3>
                {% endcotton %}
                {% cotton card.media %}
                    <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" />
                {% endcotton %}
                {% cotton card.body %}
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
                {% endcotton %}
                {% cotton card.footer %}
                    <a href="#" class="usa-button">Link 2</a>
                {% endcotton %}
            {% endcotton %}
            {% cotton card grid_layout="tablet:grid-col-4" header_first="true" %}
                {% cotton card.header %}
                    <h3 class="usa-card__heading">Media with header first</h3>
                {% endcotton %}
                {% cotton card.media %}
                    <img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="Placeholder image" />
                {% endcotton %}                
                {% cotton card.body %}
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</p>
                {% endcotton %}
                {% cotton card.footer %}
                    <a href="#" class="usa-button">Link 3</a>
                {% endcotton %}
            {% endcotton %}
        {% endcotton %}
    </div>
</div>

name: Card
context:
  variants:
    - title: "Default Card"
      options:
        - title: "Card Title"
          body: "This is a default card with some content."
          footer: "Read more"
    - title: "Card with Media"
      options:
        - title: "Card with Image"
          body: "This card includes an image and content."
          media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
          footer: "Visit"
    - title: "Flag Layout"
      options:
        - title: "Flag Card"
          body: "This is a flag layout card with media on the side."
          media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
          footer: "Learn more"
          layout: "flagDefault"
    - title: "Flag Layout"
      options:
        - title: "Flag Card with Media on Right Side"
          body: "This is a flag layout card with media on the side."
          media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
          footer: "Learn more"
          layout: "flagMediaRight"          
    - title: "Inset Media"
      options:
        - title: "Inset Media Card"
          body: "This card has inset media."
          media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
          inset: "true"
          footer: "Action"
    - title: "Exdent Media"
      options:
        - title: "Exdent Media Card"
          body: "This card has exdent media."
          media: "https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
          exdent: "true"
          footer: "Go"