Banner Card

Open in Figma View all renders

Banner cards are primary dark by default. The variations below show the modified colours. Banner cards can be rendered without or without an image. Banner cards are stacked by default, and can be modified to be inline on screen starting from mobile upwards. Banner cards must be contained in a flex container with a full height where they are required to fill the space. 

  <div class="banner-card">
    <div class="banner-card__image" style="background-image: url(images/sample-image.pgbq12oi2g.webp)">
    </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>

Variations and modifiers

Primary Light

  <div class="banner-card banner-card--primary-light">
    <div class="banner-card__image" style="background-image: url(images/sample-image.pgbq12oi2g.webp)">
    </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>

Secondary Dark

  <div class="banner-card banner-card--secondary-dark">
    <div class="banner-card__image" style="background-image: url(images/sample-image.pgbq12oi2g.webp)">
    </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>

Secondary Light

  <div class="banner-card banner-card--secondary-light">
    <div class="banner-card__image" style="background-image: url(images/sample-image.pgbq12oi2g.webp)">
    </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>

Inline

Banner cards will render stacked as default. Adding an inline modifer will render the card inline (in a row) above mobile screen sizes, and stacked on a mobile display. 

  <div class="banner-card banner-card--inline">
    <div class="banner-card__image" style="background-image: url(images/sample-image.pgbq12oi2g.webp)">
    </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>

No Image

  <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>