AccordionInfo box
An info box element embedded in an accordion is a content container used to display/feature either a disclaimer or critical information to the user.
Variations
Chart/Figure/Table 5
Chart title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Chart/Figure/Table 5
Chart title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup.
Lorem ipsum dolor sit ametDetails
Usage
The info box component is used to inform the user about something critical and with a temporary nature. It can also be used to feature disclaimers.
Guidelines
- Should be embedded in a accordion component whenever the page lacks in full width components
HTML structure
Overall HTML view of a info box element inside an accordion:
div.accordion
div.accordion
div.headerdiv.content-box
div.info-box
p (one or more)a (one or more)Presets
Accordion with info box presets:
| Preset | Description |
|---|---|
| Warning | Used to inform the user about an important information. |
| Alert | Used to alert the user about a critical information. |
Variations
Accordion with info box variations:
| Variation | Description |
|---|---|
| Just blurb | Composed of a p tag. |
| With link | Composed of a p tag and a a tag. |
Modifiers
Info box modifiers:
| Class | Description |
|---|---|
-warning | Changes the background color to inform the user about an important information. |
-alert | Changes the background color to alert the user about a critical information. |
-top-arrow | Adds to the top a triangle pointing inside. The use of this class is recommended. |
Please bear in mind the utility classes are placed in the root element of the component.