Text banner

The text banner pattern is a full-width, short message with a background colour. This appears at the top of a web page to provide important information that may apply to the current page or even the entire website.

Rules for the text banner

  • Must only be used at the very top of a page.
  • May be used to indicate the status of a page (e.g. alpha or beta version) to alert the user that this is an example page, etc.

Options available

Default

Text is centre-aligned and the background colour is grey.

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner ">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Primary

Text is centre-aligned and the background colour is the primary palette colour (.primary).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner primary">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Secondary

Text is centre-aligned and the background colour is the secondary palette colour (.secondary).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner secondary">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Success

To signal a positive action such as a successful login. In this example text is centre-aligned and the background colour is green (.success).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner success">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Info

To signal a neutral piece of information. In this example text is centre-aligned and the background colour is blue (.info).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner info">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Warning

To signal caution about information or available actions on the page. In this example text is centre-aligned and the background colour is yellow (.warning).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner warning">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Danger

To signal a problem with an action take, such as a failed login attempt. In this example text is centre-aligned and the background colour is red (.danger).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner danger">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Primary left

Text is left-aligned (.left) and the background colour is the primary palette colour (.primary).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner primary left">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->

Primary right

Text is right-aligned (.right) and the background colour is the primary palette colour (.primary).

Example

The is the beta version of st-andrews.ac.uk. Leave your feedback.

Code 
<!-- Begin pattern: text-banner //-->
<header class="text-banner primary right">
    <div class="container">
        <p>The is the beta version of st-andrews.ac.uk. <a href='#'>Leave your feedback</a>.</p>
    </div>
</header>
<!-- End pattern: text-banner //-->