Skip to main content

Notification

A notification / alert box. Tabs: Content, Styling, Animations, Advanced.

Content

OptionChoices
MessageThe alert text
Custom LabelOptional leading label
TypePrimary, Secondary, Success, Information, Warning, Danger, Light, Dark
Border StyleFilled (default), Outline (transparent background), Accent Left Border
Icon / Custom Icon (Emoji / SVG)Leading icon
Layout StyleInline (single row), Stacked (label above message)
DismissibleOn/Off
Auto-dismiss SecondsAuto-hide after N seconds

:::note Screenshots — types, borders & layouts Capture the 8 Types, 3 Border Styles, and 2 Layout Styles, e.g. notification-success-filled, notification-warning-outline, notification-danger-accent, notification-stacked. :::

Styling

Text, Label, Message and Icon colors, Background Color, and Margin & Padding.

Screenshots

note

Drop screenshots into static/img/shortcodes/ and embed them here.