Introduction
Foundations
Components
Patterns
Directives
Pipes
Motion
Brand
Components
Structure
Title card
Alerts & notifications
Banner alert
Banner announcement
Floating action
Toast alert
Buttons & actions
Button
Link
Pull refresh
Share buttons
Share link
Social buttons
Split button
Toggle buttons
Cards
Card
Widget
Forms
Checkbox card
Checkbox
File select
Input
Label
Location input
Multi select
Multiple location input
Radio
Search
Select
Slider
Smart textarea
Textarea
Toggle
Gallery / images / media
Gallery mosaic
Icons / images / media
Animated svg
File viewer
Icon
Image cropper
Layouts
Container
Grid
Page layout
Table
Navigation
Breadcrumbs
Pagination
Tabs
Popups / overlays
Callout
Drawer
Dropdown filter
Highlight
Modal
More options
Tooltip
Progress & loading indicators
Countdown timer
Loading text
Progress bar
Progress steps
Spinner
Tags
Tag
Typography
Heading
Hr
Banner alert
Banners which inform users about important things
Alert banners are one of the most prominent ways to communicate to users.
Contents
Default
Bordered
Closeable
Compact
Level
Types
An optional alert heading
Banner alert does not have a box shadow around it by default.
An optional alert heading
This adds a primary level box shadow around the alert component. This is mostly used if the alert component is outside on its own.
An optional alert heading
This adds a secondary level box shadow around the alert component. This is mostly used if the alert component is outside on its own.
An optional alert heading
This adds a tertiary level box shadow around the alert component. This is mostly used if the alert component is outside on its own.
Smart Copy
Copy Snippet
Expand
Inputs
bannerAlertButton
?
:
BannerAlertButton
bannerTitle
?
:
string
bordered
?
:
boolean
= true
closeable
?
:
boolean
= true
compact
?
:
boolean
= false
fontColor
?
:
FontColor
level
?
:
BannerAlertLevel
= BannerAlertLevel.NONE
marginBottom
?
:
Margin
= 'xxxsmall'
type
?
:
BannerAlertType
= BannerAlertType.INFO
Outputs
buttonClicked
?
:
any
= new EventEmitter<void>()
close
?
:
any
= new EventEmitter<void>()
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.