Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Notification

An on-screen notification to inform users that something important has happened.

The GOV.UK design system includes a notification banner with further information on their usage.

Example

Open this example in a new tab

HTML

<div class="das-notification" tabindex="-1">
  <h3 class="das-notification__heading">Optional heading</h3>
  <p class="das-notification__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis
    leo ut felis scelerisque sollicitudin fringilla a urna.
  </p>
  <p class="das-notification__body">
    Curabitur finibus lacus sed ante fringilla sodales.
  </p>
</div>

Information notification

Open this example in a new tab

HTML

<div class="das-notification das-notification--information" tabindex="-1">
  <h3 class="das-notification__heading">Information summary</h3>
  <p class="das-notification__body">
    Mauris vel lectus at mi placerat vehicula.
  </p>
</div>

Success notification

Open this example in a new tab

HTML

<div class="das-notification das-notification--success" tabindex="-1">
  <h3 class="das-notification__heading">Success summary</h3>
</div>

Success notification (no title)

Open this example in a new tab

HTML

<div class="das-notification das-notification--success" tabindex="-1">
  <p class="das-notification__body">
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus.
  </p>
</div>

Warning notification

Open this example in a new tab

HTML

<div class="das-notification das-notification--warning" tabindex="-1">
  <h3 class="das-notification__heading">Warning summary</h3>
  <p class="das-notification__body">
    Sed non lorem egestas, porttitor libero nec, pellentesque erat. Donec
    libero lorem, dictum id cursus nec, tincidunt nec eros. Mauris vel
    lectus at mi placerat vehicula.
  </p>
</div>