New alert component needed?

[rnickr]

On guidance pages the publishing team sometimes add warning/alert content. This is important information they want to bring to the attention of the user.

Here's an example on https://www.nice.org.uk/guidance/ta400:

Current alert component

We currently have an alert component: https://design-system.nice.org.uk/storybook/?path=/story/components-alert--info

Is this suitable for the job or do we need a separate component for highlighting important content?

We don't have any documentation on the current alert component. There is some draft documenting for the component here: https://nicedigital.atlassian.net/wiki/spaces/NDS/pages/2503213187/Alert+-+component

The draft documentation and other components around the web (e.g. https://designsystem.digital.gov/components/alert/) suggest these alerts should be used to inform users after they have taken an action - success messages to confirm an action is complete/successful, error messages to inform of any issues etc. They typically appear after an action and appear at the top of the page.

This seems like somewhat of a different use case than highlighting important content as needed on the Guidance pages.

Highlighting content patterns

For drawing attention to important content other approaches include:

Warning callout
https://service-manual.nhs.uk/design-system/components/warning-callout

Card cards
https://service-manual.nhs.uk/design-system/components/care-cards#non-urgent-care-card-blue

Warning text
https://design-system.service.gov.uk/components/warning-text/

Callout
https://designsystem.gov.au/components/callout/

Would it make sense to look at one of these other approaches for emphasising content or would the alerts be appropriate if we document it appropriately? Not sure on the original use case for the current alerts so missing the context of that.

Is there anything we need to distinguish in the code to make a distinction between different use cases that might make a case for having two different components?

[wa-rren-dev]

Urgh we've just made a callout component as well! Which is really a card.

Maybe we could see what the alert with a smaller title looks like? And less padding? Like a 'small' or 'lite' variant of the current alert? Maybe without the background colour and just a keyline like the australian version above?

[johndavey72]

I like the callout from the .gov.au above as a baseline, and then colour/extra border could be applied as appropriate.

You could have an alert variant...e.g. an "instantiated" alert as a result of a user action versus a "permanent" alert. Permanent alerts could then have more subtle styling.

In terms of html, if there was no colour and layout information the importance could only be emphasised with aside, heading size, text size and emphasis, strong or strong emphasis :-) .

I like the idea of keeping levels of urgency (like the existing alert), e.g. "info", "caution", "danger" (perhaps with increasing amounts of border/border thickness and a consistently applied icon for each)

Regarding misuse of the component and avoiding graphic pollution, is it possible that rules could be applied in the css so that, for example, permanent-alert variants of the same kind couldn't be stacked up, would have to appear as the first item in the block or would always have to follow a paragraph. Maybe you could drop the colours and border for components that are used together incorrectly to discourage misuse.

The documentation could then educate on the importance of NOT SHOUTING EVERYTHING and distracting users from key information on a page, so maybe a series of questions about using the component, is this important? How important is it?