Variants
Status
Height
We have two heights:
Default
Inline
Width
Fill
The width of the alert will fit the width of the section it is in, even if the content is short.
Hug
The width of the alert will be determined by the length of the content it contained.
Items that can be insert into the alert component
A maximum of two items (aside from the dismiss button that is not considered as an item here) can be inserted into an alert, if so, they should always be displayed in this precise order.
For example :
Alerts with an item and a dismiss.
Alert with a state Indicator.
Responsive Design
The height of the alert is defined by the content within. It can contain multiple lines if the content is too long.
All the items contained in the alert except for the button are centered with the height.
Mobile version
This variant does not include a title and the margin up and down are bigger.
Status variant
Success, Info, Warning and Danger
Items variants
We have the same behavior than we have in responsive.
When the max-screen-width is 375px for a mobile format, only the inline variant should be used.
|
|