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.

    

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

Primary

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

    

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

Secondary

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

    

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

Success

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

    

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

Info

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

    

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

Warning

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

    

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

Danger

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

    

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

Primary left

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

    

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

Primary right

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

    

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