Banner Card

Open in Figma View all renders

Primary Banner Card

Banner cards use the primary dark style by default. The variations below demonstrate the available colour options. Banner cards can be rendered with or without an image. They are stacked by default but can be displayed inline on screens from mobile upwards. When used in a layout that requires full-height alignment, banner cards must be placed inside a flex container with full height. 

<div class="flex flex-wrap gap-m">
    <div class="banner-card">
        <div class="banner-card__image">
            <figure class="img img--h-xlarge img--w-full">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
        </div>
    </div>

    <div class="banner-card banner-card--primary-light">
        <div class="banner-card__image">
            <figure class="img img--h-xlarge img--w-full">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
        </div>
    </div>
</div>

Secondary Banner Card

Secondary banner cards include two colour variations: dark and light. 

<div class="flex flex-wrap gap-m">
    <div class="banner-card banner-card--secondary-dark">
        <div class="banner-card__image">
            <figure class="img img--h-xlarge img--w-full">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
        </div>
    </div>

    <div class="banner-card banner-card--secondary-light">
        <div class="banner-card__image">
            <figure class="img img--h-xlarge img--w-full">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
        </div>
    </div>
</div>

Variations and modifiers

Stacked Banner Card

Banner cards render in a stacked layout by default, with different colour variations available. 

<div class="flex flex-wrap gap-m">
    <div class="banner-card">
        <div class="banner-card__image">
            <figure class="img img--h-xlarge img--w-full">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--contrast btn--xsmall">
                button
            </button>
        </div>
    </div>
    <div class="banner-card banner-card--primary-light">
        <div class="banner-card__image">
            <figure class="img img--h-xlarge img--w-full">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--xsmall">
                button
            </button>
        </div>
    </div>
</div>

Inline

Applying the inline modifier displays the card in a row (inline) on screens above mobile sizes, while remaining stacked on mobile devices. 

<div class="flex flex-wrap gap-m">
    <div class="banner-card banner-card--inline banner-card--secondary-dark">
        <div class="banner-card__image">
            <figure class="img img--w-xlarge">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--contrast btn--xsmall">
                button
            </button>
        </div>
    </div>

    <div class="banner-card banner-card--inline banner-card--secondary-light">
        <div class="banner-card__image">
            <figure class="img img--w-xlarge">
                <img src="/images/banner.png" alt="Banner" />
            </figure>
        </div>
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--xsmall">
                button
            </button>
        </div>
    </div>
</div>

No Image

Banner cards can also be rendered without an image. 

<div class="flex flex-wrap gap-m">
    <div class="banner-card">
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--contrast btn--xsmall">
                button
            </button>
        </div>
    </div>

    <div class="banner-card banner-card--primary-light">
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--xsmall">
                button
            </button>
        </div>
    </div>
</div>
<div class="padding-m-vertical">
    <div class="banner-card banner-card--inline banner-card--secondary-dark">
        <div class="banner-card__content">
            <p class="banner-card__heading related-spacing">
                This is a banner header
            </p>
            <p class="banner-card__supporting-text content-spacing">
                This is banner content supporting text.
            </p>
            <button class="btn btn--text btn--contrast btn--xsmall">
                button
            </button>
        </div>
    </div>
</div>