Skip to main content

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

Request Access to Source Code Repository

The source code Git repository and other useful documentation for Astro’s apps are hosted on Github.com. Please fill out the form below to request access.

How Would You Like to Use Astro’s Source Code?
Which Astro App’s Source Code Would You Like Access to?
Successfully submitted request for source code