Image box
Use this component in an article or explainer when you introduce a new topic. Can be put in between sections, or right above the splitter. Use the tall variation for images that need more space.
Variations
Details
Usage
The image box component can be used as a dividing component to introduce a new page section or just as an highlight for a block of text.
Be aware that the image safe area is one of the smallest from the components, however, using the tall preset gives you more space.
Guidelines
- Do not use as a link or teaser, instead use the promo box.
- Image dimensions:
- 2560x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of an image box component:
div[data-image].image-boxPresets
Image box presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
Variations
Image box variations:
| Variation | Description |
|---|---|
| Default | Composed of a single container with a data-image attribute. |
Modifiers
Image box classes:
| Class | Description |
|---|---|
-top-arrow, -bottom-arrow | Default class is -bottom-arrow. |
-tall | Increases the image height. Can be used if you have an image that requires more space to show its most important subject. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The image box component cannot be embedded inside other component.
main (HTML file)
div.image-boxNesting
The image box component cannot be used as a container of other components and/or elements.
main (HTML file)
div.image-box