Info box
An info box 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.
Guidelines
- Should be embedded in a section component whenever the page lacks in full width components
HTML structure
Overall HTML view of an info box component:
div.info-box
p (one or more)a (optional, one or more)Presets
Info box presets:
| Preset | Description |
|---|---|
| Default | Default template. |
| Warning | Used to inform the user about an important information. |
| Alert | Used to alert the user about a critical information. |
Variations
Info box variations:
| Variation | Description |
|---|---|
| Default | Composed of a p tag. |
| With link | Composed of a p tag and a a tag. |
Modifiers
Info box classes:
| Class | Description |
|---|---|
-warning, -alert | The -warning class changes the background color to inform the user about an important information. The -alert class 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. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The info box component can be embedded inside other component:
| Component | Description |
|---|---|
| Section | The embedding is recommended whenever the page lacks in full width components. |
main (HTML file)
div.info-box (element)Some components can be placed/embedded inside other components. Whenever this happens, they become elements of the respective parent component and they can no longer be called components.
Nesting
The info box component cannot be used as a container of other components and/or elements.
main (HTML file)
div.info-box