Skip to main content

Post-it

Information: Documentation incomplete

This component still requires documentation.

Use the post-it component helps users identify important information without having to read the whole page.

Example

Default (information)

Open example in a new window
View HTML 
<div class="uhb-c-post-it">
  <h2 class="uhb-c-post-it__heading"><span class="uhb-u-visually-hidden">Information: </span>Post-it heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
</div>

Announcement

Open example in a new window
View HTML 
<div class="uhb-c-post-it uhb-c-post-it--announcement">
  <h2 class="uhb-c-post-it__heading"><span class="uhb-u-visually-hidden">Announcement: </span>Post-it heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
</div>

Warning

Open example in a new window
View HTML 
<div class=<div class="uhb-c-post-it uhb-c-post-it--warning">
  <h2 class="uhb-c-post-it__heading"><span class="uhb-u-visually-hidden">Warning: </span>Post-it heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
</div>

Alert

Open example in a new window
View HTML 
<div class="uhb-c-post-it  uhb-c-post-it--alert">
  <h2 class="uhb-c-post-it__heading"><span class="uhb-u-visually-hidden">Alert: </span>Post-it heading</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum ipsum commodi vel porro error.</p>
</div>

How to use post-it's

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.