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.
<!-- 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
To signal a positive action such as a successful login. In this example 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
To signal a neutral piece of information. In this example 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
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).
<!-- 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
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).
<!-- 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 //-->