Components

Alert

Alert users to important information.

New passport

We'll send your new passport by secure delivery. The cost is included in the passport fee.

<div class="hods-alert">
  <h2 class="hods-alert__heading">New passport</h2>
  <p>
    We&#x27;ll send your new passport by secure
    delivery. The cost is included in the passport
    fee.
  </p>
</div>
<Alert heading="New passport">
  We'll send your new passport by secure delivery. The
  cost is included in the passport fee.
</Alert>
Props
Name Type Default Description
id string - 'id' attribute to place on the base HTML element
classBlock string hods-alert Block name override in BEM style classes applied to all elements
classModifiers other - BEM style modifiers to apply to the base HTML element
className string - Extra classes to apply to the base HTML element
heading string - REQUIRED. Heading of the alert

When to use this component

Use alerts to inform users that something important has happened, notify them of a success/failure or to take action. Only use this component when you have identified that users need to be made aware of certain content.

How it works

Standard alert

New passport

We'll send your new passport by secure delivery. The cost is included in the passport fee.

<div class="hods-alert">
  <h2 class="hods-alert__heading">New passport</h2>
  <p>
    We&#x27;ll send your new passport by secure
    delivery. The cost is included in the passport
    fee.
  </p>
</div>
<Alert heading="New passport">
  We'll send your new passport by secure delivery. The
  cost is included in the passport fee.
</Alert>

Alert notifying of a successful outcome

Use the green version of the alert to confirm that something they’re expecting to happen has happened.

Payment successful

We've sent details to test-email@test-corp.co.uk
Download confirmation

<div class="hods-alert hods-alert--success">
  <h2 class="hods-alert__heading">
    Payment successful
  </h2>
  <p>
    We&#x27;ve sent details to
    test-email@test-corp.co.uk
    <br />
    <a href="#">Download confirmation</a>
  </p>
</div>
<Alert
  heading="Payment successful"
  classModifiers="success"
>
  We've sent details to test-email@test-corp.co.uk{" "}
  <br />
  <a href="#">Download confirmation</a>
</Alert>

Alert indicating an error

Use the red version of the alert to confirm that something has gone wrong.

Payment unsuccessful

Please try again or contact our support team for assistance.

<div class="hods-alert hods-alert--error">
  <h2 class="hods-alert__heading">
    Payment unsuccessful
  </h2>
  <p>
    Please try again or contact our
    <a href="#">support team</a>
    for assistance.
  </p>
</div>
<Alert
  heading="Payment unsuccessful"
  classModifiers="error"
>
  Please try again or contact our{" "}
  <a href="#">support team</a> for assistance.
</Alert>

Services using this component

  • Passport renewals
  • Atlas caseworking system

Research

Passport renewals found this component worked better than the confirmation pattern for a payment success page. They observed users engaged with the next steps on the page, rather than thinking they were finished.

Accessibility

In the Atlas caseworking system, it was found this alert should sit under the h1 for accessibility.