Skip to main content

Stacked Notification

Non-interactive element that provides additional information related to the container it is attached to.

Dos and Don'ts

Do
  • Pair it with a container. For example Bottom sheet or Card.
  • Use it for additional information that is contextual and related to the component attached to it.
  • Use it for app designs only.
Don't
  • Don't display information that requires more than 3 lines of text.
  • Don't add interactive icons or CTAs.
  • Don't use more than one stacked notification per element.

Anatomy

Anatomy of a stacked notification.
  1. Container: Sits behind the container it is always attached to.
  2. Leading icon (optional): Non-interactive icon that can be used to visually support the primary text.
  3. Title (optional): Gives the users an overview of the content and contained within one line.
  4. Primary text: Provides additional detail.

Variants

Default

A default stacked notification.

Modifiers

Title

The title can be removed where it is not necessary and it truncates text after 1 line.

A stacked notification with a title.

Leading icon

Leading icons can be removed for all variants if not required.

A stacked notification with leading icon.

Emphasis

Depending on the level of visual prominence you want to give to the stacked notification you can choose between strong or subtle emphasis.

Strong

A stacked notification with strong emphasis.

Subtle

A stacked notification with subtle emphasis.

Colours

Select from a range of colour options across the two levels of emphasis.

Neutral

Two neutral colour stacked notifications.

Positive

Two positive colour stacked notifications.

Warning

Two warning colour stacked notifications.
Keep in mind: Please refer to our Errors documentation to pick an appropriate component for the error you want to display.

Info

Two info colour stacked notifications.

03 Cupcake

Two cupcake colour stacked notifications.

04 Berry

Two berry colour stacked notifications.

06 Aubergine

Two aubergine colour stacked notifications.

08 Latte

Two latte colour stacked notifications.

Alignment

Default

A default aligned stacked notification.

Centre aligned

A centre aligned stacked notification.

Sizes

Width

Fluid to container

The width should take 100% of the container the stacked notification is placed within.

A stacked notification spanning 100% width of the container.

Content

Title

  • The title should be short and descriptive; explain why the stacked notification is being displayed.
  • If the primary text supplies all the information then using the title is optional.

Primary text

  • Be concise and avoid repeating or paraphrasing the content of the title.
  • Limit content to one or two lines of text when paired with a title.

Leading icon

A stacked notification with a leading icon, title and primary text.

Overflow

Default aligned and centre aligned variants follow different rules of text truncation and text line limit.

Default aligned

If the content exceeds the available width, the title and primary text wrap to a new line.

Keep in mind: Having more than 3 lines of primary text is a signal to use a different component for your case.
Two stacked notifications with default aligned text that wraps to a new line.

Centre aligned

The amount of text can be as long as the width of the stacked notification. It won't truncate or do a line break.

Keep in mind: Centre aligned variant is locked to a single line of text and doesn't use a title.
Two stacked notifications with centre aligned text on one line only.

Layout

The stacked notification is always attached to a container. Depending on the type of container it will sit partially behind a container.

Rounded corners container

The stacked notification will need an overlap with the container so the corners are not left empty.

A stacked notification sitting behind a container with rounded corners.
  1. Primary text bottom margin: Allow for a 12px bottom margin between the bottom of the text and the top of the container.
  2. Container overlap: Give at least 16px of overlap so the colour of the stacked notification shows around the rounded corners of the container.

Default corners container

The margin from the text is the only consideration needed for placement.

A stacked notification sitting behind a container with default corners.
  1. Primary text bottom margin: Allow for a 12px bottom margin between the bottom of the text and the top of the container.

Placement

Always place it attached to the top of the element you need to expand context and information on.

Two stacked notifications showing placement above the content it is attached to.

Behaviour

Pop up

The stacked notification slides from under the container it is attached to. It doesn't affect the size or placement of the container.

Keep in mind: The pop up behaviour is optional and only recommended to be used with cards.
A stacked notification showing pop up behaviour.

Overrides

A stacked notification showing supporting text with a link.
  1. Primary text: The supporting text can include a link, when the string is a complete sentence or more.

Examples

LTR example

Here are some examples of a stacked notification in LTR context.

A stacked notification with left to right content.
A stacked notification with left to right content.

RTL example

Here are some examples of a stacked notification in RTL context.

A stacked notification with right to left content.
A stacked notification with right to left content.
Back to top