Alert component - Showcase
👀 Note: the compact alert is borderless, but shown with a dotted border throughout the "Showcase" for clarity.
Type
Color
Icon
Default icon
Lorem ipsum dolor sit amet.
With icon override
Lorem ipsum dolor sit amet.
With animated icon
Lorem ipsum dolor sit amet.
Without icon
Lorem ipsum dolor sit amet.
Content
A simple title
A simple description text
An alert with just a title and no description text.
An alert with no title and just a description text
An alert with a very long title and a long description text that should go on multiple lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat elit, lacinia at magna
eget, porttitor lobortis nulla.
An alert with a rich description (HTML)
Using the
A.Description
contextual component it's possible to have content that contains HTML tags, like
strong text
and
emphasized text
as well as
code,
preand inline links.
Multiple lines of description using more than one 'description' contextual component
This is the first line of description, yielded to a
A.Description
contextual component.And this is the second line of description, yielded to another
A.Description
contextual component.An alert with extra/custom content
In special cases, you can pass extra content to the alert using the
A.Generic
contextual component.