SectionInfo box
An info box element embedded in a section is a content container used to display/feature either a disclaimer or critical information to the user.
Variations
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 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 section component whenever the page lacks in full width components
HTML structure
Overall HTML view of a info box element inside a section:
div.section
div.info-box
p (one or more)a (one or more)Presets
Section 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
Section 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.