Notice

Information: Documentation incomplete

This component still requires documentation.

use the notice component to show users an important message at the top of a page.

Example

Default (information)

View HTML

<div class="uhb-c-notice">
  <div class="uhb-c-notice__container uhb-o-container">
    <h2 class="uhb-c-notice__heading"><span class="uhb-u-visually-hidden">Information: </span>Notice heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
  </div>
</div>

Announcement

View HTML

<div class="uhb-c-notice uhb-c-notice--announcement">
  <div class="uhb-c-notice__container uhb-o-container">
    <h2 class="uhb-c-notice__heading"><span class="uhb-u-visually-hidden">Announcement: </span>Notice heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
  </div>
</div>

Warning

View HTML

<div class="uhb-c-notice uhb-c-notice--warning">
  <div class="uhb-c-notice__container uhb-o-container">
    <h2 class="uhb-c-notice__heading"><span class="uhb-u-visually-hidden">Warning: </span>Notice heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
  </div>
</div>

Alert

View HTML

<div class="uhb-c-notice uhb-c-notice--alert">
  <div class="uhb-c-notice__container uhb-o-container">
    <h2 class="uhb-c-notice__heading"><span class="uhb-u-visually-hidden">Alert: </span>Notice heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
  </div>
</div>

How to use notices

Accessibility

Do not rely on colour alone to indicate the state of a post-it as people with visual impairments may not be able to recognise them by their colour.

Hidden text indicating the level or urgency should be added to the post-it heading for screen readers and other assistive technologies.