Banners - Component

Code

Source (Nunjucks)

<div class="banner {{ data.utilities.main }}" role="banner">
  <div class="banner__content flow">
    {{ data.content | md | safe }}
  </div>
  <div class="banner__actions cluster">
    <button class="button {{ data.utilities.button }}">Action 1</button>
    <button class="button {{ data.utilities.button }}">Action 2</button>
  </div>
</div>

Output

<div class="banner bg-state-info-bg color-core-text" role="banner">
  <div class="banner__content flow">
    Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor
    ligula, eget lacinia odio sem nec elit.
  </div>
  <div class="banner__actions cluster">
    <button class="button">Action 1</button>
    <button class="button">Action 2</button>
  </div>
</div>

Information

The banner is used to present a message to the user with an optional actions.

You can style it using theme utility classes and/or token utility classes. These are generally applied to the banner itself, and the buttons. All of these are optional.

Key links

Sass File

Variants

Caution

View full screen

Code

Source (Nunjucks)

<div class="banner {{ data.utilities.main }}" role="banner">
  <div class="banner__content flow">
    {{ data.content | md | safe }}
  </div>
  <div class="banner__actions cluster">
    <button class="button {{ data.utilities.button }}">Action 1</button>
    <button class="button {{ data.utilities.button }}">Action 2</button>
  </div>
</div>

Output

<div class="banner bg-state-bad-bg color-core-text" role="banner">
  <div class="banner__content flow">
    Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor
    ligula, eget lacinia odio sem nec elit.
  </div>
  <div class="banner__actions cluster">
    <button class="button color-state-bad-text">Action 1</button>
    <button class="button color-state-bad-text">Action 2</button>
  </div>
</div>

Lots of content

View full screen

Code

Source (Nunjucks)

<div class="banner {{ data.utilities.main }}" role="banner">
  <div class="banner__content flow">
    {{ data.content | md | safe }}
  </div>
  <div class="banner__actions cluster">
    <button class="button {{ data.utilities.button }}">Action 1</button>
    <button class="button {{ data.utilities.button }}">Action 2</button>
  </div>
</div>

Output

<div class="banner bg-state-info-bg color-core-text" role="banner">
  <div class="banner__content flow">
    <p>
      Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus
      curae dis cras ut magnis libero eros eget non scelerisque potenti dui
      aenean porttitor hac integer consectetur penatibus commodo nunc proin
      tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit
      pulvinar ad magna ridiculus class lobortis maecenas orci semper
    </p>
  </div>
  <div class="banner__actions cluster">
    <button class="button">Action 1</button>
    <button class="button">Action 2</button>
  </div>
</div>

Warning

View full screen

Code

Source (Nunjucks)

<div class="banner {{ data.utilities.main }}" role="banner">
  <div class="banner__content flow">
    {{ data.content | md | safe }}
  </div>
  <div class="banner__actions cluster">
    <button class="button {{ data.utilities.button }}">Action 1</button>
    <button class="button {{ data.utilities.button }}">Action 2</button>
  </div>
</div>

Output

<div class="banner bg-state-warn-bg color-core-text" role="banner">
  <div class="banner__content flow">
    Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor
    ligula, eget lacinia odio sem nec elit.
  </div>
  <div class="banner__actions cluster">
    <button class="button color-state-warn-text">Action 1</button>
    <button class="button color-state-warn-text">Action 2</button>
  </div>
</div>

With Icon Image

View full screen

Code

Source (Nunjucks)

<div class="banner {{ data.utilities.main }}" role="banner">
  <div class="banner__content flex-align-start cluster">
    <img class="banner__img" src="{{ data.img.src }}" alt="{{ data.img.alt }}" />
    <div class="flow">
      {{ data.content | md | safe }}
    </div>
  </div>
  <div class="banner__actions cluster">
    <button class="button {{ data.utilities.button }}">Action 1</button>
    <button class="button {{ data.utilities.button }}">Action 2</button>
  </div>
</div>

Output

<div class="banner bg-state-info-bg color-core-text" role="banner">
  <div class="banner__content flex-align-start cluster">
    <img
      class="banner__img"
      src="https://web.dev/images/icons/performance.svg"
      alt="A spedometer"
    />
    <div class="flow">
      Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat
      porttitor ligula, eget lacinia odio sem nec elit.
    </div>
  </div>
  <div class="banner__actions cluster">
    <button class="button">Action 1</button>
    <button class="button">Action 2</button>
  </div>
</div>