Notice

The Notice component provides a reusable pattern for notice in the interface.

Type

The type parameter is meant to be seen as sort of severity indicator. It's value either success, info, warning or danger.

Tellus Sem Lorem Malesuada Ipsum
Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. A link to something.
Sed posuere consectetur est at lobortis.
Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis.

Icon

The icon parameter is an array that can configured just as the icon component. It could also be left out completely.

Icon color red.
Icon size small
Without an icon.

Title

The title to show above the message

Lorem ipsum

Tellus Sem Lorem Malesuada Ipsum

Actions & dismiss

These can have an action, and be dismissable.

This message has an action button and may be dismissed (Type: info, Timeout: immediate, Iteration: 1).
This message may be dismissed (Type: info, Timeout: immediate, Iteration: 1).
This has a button to do a task but no dismiss action (Type: info, Timeout: immediate, Iteration: 1).
This message has an action button and may be dismissed (Type: success, Timeout: immediate, Iteration: 2).
This message may be dismissed (Type: success, Timeout: immediate, Iteration: 2).
This has a button to do a task but no dismiss action (Type: success, Timeout: immediate, Iteration: 2).
This message has an action button and may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).
This message may be dismissed (Type: danger, Timeout: immediate, Iteration: 3).
This has a button to do a task but no dismiss action (Type: danger, Timeout: immediate, Iteration: 3).
This message has an action button and may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).
This message may be dismissed (Type: warning, Timeout: immediate, Iteration: 4).
This has a button to do a task but no dismiss action (Type: warning, Timeout: immediate, Iteration: 4).
This message has an action button and may be dismissed (Type: info, Timeout: session, Iteration: 1).
This message may be dismissed (Type: info, Timeout: session, Iteration: 1).
This has a button to do a task but no dismiss action (Type: info, Timeout: session, Iteration: 1).
This message has an action button and may be dismissed (Type: success, Timeout: session, Iteration: 2).
This message may be dismissed (Type: success, Timeout: session, Iteration: 2).
This has a button to do a task but no dismiss action (Type: success, Timeout: session, Iteration: 2).
This message has an action button and may be dismissed (Type: danger, Timeout: session, Iteration: 3).
This message may be dismissed (Type: danger, Timeout: session, Iteration: 3).
This has a button to do a task but no dismiss action (Type: danger, Timeout: session, Iteration: 3).
This message has an action button and may be dismissed (Type: warning, Timeout: session, Iteration: 4).
This message may be dismissed (Type: warning, Timeout: session, Iteration: 4).
This has a button to do a task but no dismiss action (Type: warning, Timeout: session, Iteration: 4).
This message has an action button and may be dismissed (Type: info, Timeout: permanent, Iteration: 1).
This message may be dismissed (Type: info, Timeout: permanent, Iteration: 1).
This has a button to do a task but no dismiss action (Type: info, Timeout: permanent, Iteration: 1).
This message has an action button and may be dismissed (Type: success, Timeout: permanent, Iteration: 2).
This message may be dismissed (Type: success, Timeout: permanent, Iteration: 2).
This has a button to do a task but no dismiss action (Type: success, Timeout: permanent, Iteration: 2).
This message has an action button and may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).
This message may be dismissed (Type: danger, Timeout: permanent, Iteration: 3).
This has a button to do a task but no dismiss action (Type: danger, Timeout: permanent, Iteration: 3).
This message has an action button and may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).
This message may be dismissed (Type: warning, Timeout: permanent, Iteration: 4).
This has a button to do a task but no dismiss action (Type: warning, Timeout: permanent, Iteration: 4).

API

Parameter Default Description
info Type of notice: success, warning, danger, info.
[] An array with two parameters: title and text
false The icon according to the @icon component.
false If true, the notice will stretch to the full width of the viewport.
false If not false, the notice will have a close button. Allowed trueish values: immediate (show notice on reload), session (show notice at next visit, default), permanent (show notice when local storage is wiped).
false An array with three parameters: label (text), url and position (aside|below).

CSS API

Variable Default Type Values Description
var(--border-radius) range - Border Radius
var(--border-width) range - Size
var(--space) range - Base spacing unit. Used for padding and margin inside components.
var(--outer-space) range - Spacing between components. Use --space for spacing inside components.
var(--shadow-color) rgba - Shadow Color
var(--shadow-amount) range - Multiplier for elevation shadows. 0 = none, 1 = default.
var(--corner-shape) select square, round, squircle, circular, bevel, scoop Corner Shape
var(--color--info) color - Info
var(--color--info-contrast) color - Info Contrast
var(--color--info-border) color - Auto-generated companion token for info border and emphasis states.
var(--color--danger) color - Danger
var(--color--danger-contrast) color - Danger Contrast
var(--color--danger-border) color - Manual companion token for danger border and emphasis states.
var(--color--warning) color - Warning
var(--color--warning-contrast) color - Warning Contrast
var(--color--warning-border) color - Auto-generated companion token for warning border and emphasis states.
var(--color--success) color - Success
var(--color--success-contrast) color - Success Contrast
var(--color--success-border) color - Auto-generated companion token for success border and emphasis states.
var(--font-size-300) range - Two steps above base in the type scale. Equivalent to h5.

Similar components