Banner - Astridd

Overview

Banners are used to help enforce the primary action on the page. The tagline is mandatory, while both buttons are optional.

Examples

Horizontal variation

Here is some content to help aid the call-to-actions.

Primary Secondary

<section class="py-2 bg-storm-100 fg-light">
  <div class="cta-strip">
    <div class="cta-strip__body">
      <div class="cta-strip__tagline">
        <p>Here is some content to help aid the call-to-actions.</p>
      </div>
      <div class="btn-group">
        <a href="#" class="btn btn--primary">Primary</a>
        <a href="#" class="btn btn--bordered-mono">Secondary</a>
      </div>
    </div>
  </div>
</section>

Promotional variation

Here is some content to help aid the call-to-actions link.

<section class="bg-gradient py-1 fg-light">
  <div class="cta-strip">
    <div class="cta-strip__body">
      <div class="cta-strip__tagline">Here is some content to help aid the call-to-actions <a href="">link</a>.</div>
    </div>
  </div>
</section>

Usage guidelines

Dos	Donts
Do ensure messages are clear and concise.	Don’t use overly long messages that flow over 1 line.
If using multiple buttons, do use secondary button actions to maintain a clear primary call-to-action.	Don’t use multiple primary actions in a single page.
Do ensure messages relate to the call-to-action/s.	Don’t apply more than 2 buttons within a single banner.
Reserve for the main desired user action on your page.

Implementation guidelines

Name	Class	Description
Background colour	`.bg-regal` `.bg-dusk` `.bg-rouge` `.bg-candy` `.bg-storm-100` `.bg-storm-6`	Apply a background colour.
Background gradient	`.bg-gradient`	Apply the MYOB gradient background.