Aileron

Card: A11y region

Storybook

Card

Cards are used to group similar concepts and tasks together. You can put any kind of content inside.

A card container has no padding by default, allowing you to place full-bleed images inside if needed. Use the .card-divider and .card-section classes to sub-divide a card. Each of those classes will apply corresponding padding to align with our design principles.

Responsive mobile web consideration

The background color behind cards is grey to allow for contrast and separation of content blocks.

When a card element (element with the .card class applied) is placed inside of grid-container element (element with the .grid-container class applied), the background color surrounding the card will change when the device breakpoint is reached.

Reference

More information can be found in the Foundation-sites documents: Foundation-sites: card

<section class="card" aria-labelledby="cardHeadingId">
    <div class="card-divider">
        <h3 id="cardHeadingId">Card heading</h3>
    </div>
    <div class="card-section">
        <p>Card created as a region landmark for a11y.</p>
    </div>
</section>