Info Card

Open in Figma View all renders

Info Card Layout

This example shows an info card with placeholder child elements (they have the padding-m class) the card provides border and radius for the content. Info cards are made up of 3 child elements - a mandatory content slot, and optional card title and action bar components. 

<div class="info-card" data-testid="unique-info-card">
    <div class="padding-m" data-testid="unique-card-title">
        card title
    </div>
    <div class="padding-m" data-testid="unique-card-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
        voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
        adipisci magnam iure!
    </div>
    <div class="padding-m" data-testid="unique-card-actions">
        action bar
    </div>
</div>

Variations and modifiers

Info Card With Success Border

This example shows an info card with a success border. 

<div class="padding-m">
    <div class="info-card info-card--success" data-testid="unique-info-card">
        <div data-testid="unique-card-title">
            <div class="title-bar" data-testid="titlebar">
                <div class="title-bar__content">
                    <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
                </div>
            </div>
        </div>
        <div data-testid="unique-card-content">
            <div class="padding-m">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
        </div>
        <div class="info-card__actions" data-testid="unique-card-actions">
            <div class="action-bar" data-testid="action-bar">
                action bar
            </div>
        </div>
    </div>
</div>

Info Card With Equal Heights

This example shows an info card with equal heights for content when used in a group. The card need to be wrapped in an li tag and the ul tag must have the grid-layout class applied along with data-col, data-col-tablet and data-col-desktop. 

<ul class="grid-layout" data-col="1" data-col-tablet="2" data-col-desktop="3">
    <li>
        <div class="info-card info-card--equal-height" data-testid="unique-1-info-card">
            <div data-testid="unique-1-card-title">
                <div class="title-bar" data-testid="titlebar">
                    <div class="title-bar__content">
                        <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
                    </div>
                </div>
            </div>
            <div data-testid="unique-1-card-content">
                <div class="padding-m">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
                    voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
                    adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi consequuntur ipsa
                    sapiente a rror minima ea, labore quibusdam placeat maxime praesentium repellendus itaque inventore
                    temporibus accusantium ducimus commodi totam dolore?
                </div>
            </div>
            <div class="info-card__actions" data-testid="unique-1-card-actions">
                <div class="action-bar" data-testid="action-bar">
                    action bar
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="info-card info-card--equal-height" data-testid="unique-2-info-card">
            <div data-testid="unique-2-card-title">
                <div class="title-bar" data-testid="titlebar">
                    <div class="title-bar__content">
                        <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
                    </div>
                </div>
            </div>
            <div data-testid="unique-2-card-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
            <div class="info-card__actions" data-testid="unique-2-card-actions">
                <div class="action-bar" data-testid="action-bar">
                    action bar
                </div>
            </div>
        </div>
    </li>
    <li>
        <div class="info-card info-card--equal-height" data-testid="unique-3-info-card">
            <div data-testid="unique-3-card-title">
                <div class="title-bar" data-testid="unique-3-titlebar">
                    <div class="title-bar__content">
                        <div class="title-bar__heading" data-testid="titlebar-title">card title</div>
                    </div>
                </div>
            </div>
            <div data-testid="unique-3-card-content">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ratione debitis temporibus distinctio
                voluptatem iusto sunt iste possimus porro dignissimos non odio accusamus fugit consequatur enim, labore
                adipisci magnam iure! Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
            <div class="info-card__actions" data-testid="unique-3-card-actions">
                <div class="action-bar " data-testid="action-bar">
                    action bar
                </div>
            </div>
        </div>
    </li>
</ul>