University of St Andrews

Text banner

The text banner pattern is a full-width, short message with a background colour.

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
• Primary
• Secondary
• Success
• Info
• Warning
• Danger
• Primary left
• Primary right

Default

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

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Primary

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

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Secondary

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

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Success

Text is centre-aligned and the background colour is green (.success).

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Info

Text is centre-aligned and the background colour is blue (.info).

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Warning

Text is centre-aligned and the background colour is yellow (.warning).

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Danger

Text is centre-aligned and the background colour is red (.danger).

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Primary left

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

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->

Primary right

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

<!-- Begin pattern: text-banner //-->
<div 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>
</div>
<!-- End pattern: text-banner //-->