Maidstone Digital Service
BETA
This is our new beta site for Maidstone Digital Services.
Components

In page alerts

Alerting users to information

How it works

Use role="alert" to make sure screen reader have the same experience.

Add the classes .alert and .alert-info to the p tag. The first class gives it padding, margins and font sizes whilst the second class determines the colours used.

When to use this component

Use the component when to highlight information that needs to stand out more than standard text. The message should short and succinct.

When not to use this component

Do not use this component too often. The more it's used, the less impact it has.

Alerting users to a warning

How it works

Use role="alert" to make sure screen reader have the same experience.

Add the classes .alert and .alert-warning to the p tag. The first class gives it padding, margins and font sizes whilst the second class determines the colours used.

When to use this component

Use the component when to highlight information that will affect a user in some way. The message should short and succinct.

When not to use this component

Do not use this component too often. The more it's used, the less impact it has.

Alerting users to a successful interaction

How it works

Use role="alert" to make sure screen reader have the same experience.

Add the classes .alert and .alert-success to the p tag. The first class give it padding, margins and font sizes whilst the second class determines the colours used.

When to use this component

Use this component if a user needs visual confirmation that they have interacted with an element. For example, after a document has successfully uploaded within a form.

When not to use this component

Do not use this component too often. The more it's used, the less impact it has.

Using headings in alerts

How it works

Wrap header and paragraphs in a div with the info, warning or successful classes.

The correct use of headings is important. If the alert lives inside a h2 heading, give the alert heading a h3 . If the alert lives inside a h3 heading, give the alert a h4 .

When to use this component

When not to use this component

Do not use this component too often. The more it's used, the less impact it has.

Avoid multiple headings in an alert. If more than one heading is needed - look at whether the content is being used efficiently.

Using links in alerts

How it works

The alert works in the same way and there are no extra classes to add the link.

When to use this component

Use this component if a user needs to be navigated away from the content.

Write descriptive links and avoid using terms such as "click here". The example above uses descriptive link text.

When not to use this component

Do not use buttons in this component. Use a link if a user needs to be navigated to another part of site.

Back to top
//