Aileron

Card: Image - Full bleed

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

<div class="card">
    <div class="card-divider">
        <h3>Card heading inside a card-divider element</h3>
    </div>
    <img alt="" src="/aileron/theme/img/toolkit-artwork.png">
    <div class="card-section">
        <p>This card has a full-bleed image.</p>
    </div>
</div>