Skip to main content

Notification Banner

Events that deserve user attention but don't require a response, may be displayed in a Notification Banner.

Anatomy
Anatomy Image
  1. Prefix Slot (Optional)
  2. Status Symbol (Optional)
  3. Text
  4. Link (Optional)
  5. Action Slot (Optional)
  6. Outer Container
  7. Inner Container

Default Layout
Attribute Token Value
Container (outer)
Padding (Top and Bottom) notification-banner-padding-y-large 1.5rem
Padding notification-banner-padding-right 0.5rem
Padding notification-banner-padding-left 1rem
Border Color notification-banner-color-border-inner-default #4dacff
Border Color notification-banner-color-border-outer-default #4dacff
Border Radius notification-banner-radius-outer 3px
Container (inner)
Border Radius notification-banner-radius-inner 2px
Background Color notification-banner-color-background #101923
Text
Font Family font-heading-5-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size font-heading-5-font-size 1.125rem
Font Weight font-heading-5-font-weight 400
Line Height font-heading-5-line-height calc(24 / 18)
Letter Spacing font-heading-5-letter-spacing 0em
Text Color notification-banner-color-text #ffffff
Status Symbol
Margin (Right) notification-banner-status-symbol-margin-right 0.75rem
Link
Font Family font-heading-5-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size font-heading-5-font-size 1.125rem
Font Weight font-heading-5-font-weight 400
Line Height font-heading-5-line-height calc(24 / 18)
Letter Spacing font-heading-5-letter-spacing 0em
Close icon
Text Color color-text-interactive-default #4dacff

Variants

Left Slot
Notification Banner with Prefix Slot
Attribute Token Value
Prefix Slot
Margin (Right) notification-banner-prefix-margin-right 1rem
Dimension notification-banner-prefix-dimension 32px

Status Symbol
Critical Notification Banner
Caution Notification Banner
Serious Notification Banner
Normal Notification Banner
Standby Notification Banner
Off Notification Banner

Normal
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-normal #56f000
Border Color notification-banner-color-border-outer-normal #56f000

Caution
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-caution #fce83a
Border Color notification-banner-color-border-outer-caution #fce83a

Serious
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-serious #ffb302
Border Color notification-banner-color-border-outer-serious #ffb302

Critical
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-critical #ff3838
Border Color notification-banner-color-border-outer-critical #ff3838

Standby
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-standby #2dccff
Border Color notification-banner-color-border-outer-standby #2dccff

Off
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-off #a4abb6
Border Color notification-banner-color-border-outer-off #a4abb6

Default
Attribute Token Value
Container (outer)
Border Color notification-banner-color-border-inner-default #4dacff
Border Color notification-banner-color-border-outer-default #4dacff

Sizes
Large Notification Banner
Small Notification Banner

Small
Attribute Token Value
Container (Inner)
Padding (Top and Bottom) notification-banner-padding-y-small 0.875rem

Large
Attribute Token Value
Container (Inner)
Padding (Top and Bottom) notification-banner-padding-y-large 1.5rem
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel