Promo box
A promo box is a call to action component usually composed by a block of text and link overlaying an image.
It is recommended to go for a background image solution while using this component.
Variations
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Component used in
Page template
Details
Usage
The promo box component focus the user's attention on related content available, usually featuring a full width image as background.
Guidelines
- It is recommended to go for a background image solution while using this component
- Maximum number of characters recommended:
- 75 characters for the heading (
div.headline/h2/h3) - 280 characters for the information (
div.title/p) - 45 characters for the button/link (
a.button/a)
- 75 characters for the heading (
- Image properties recommended:
- 2560x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of a promo box component:
div[data-image].promo-box
div.wrapper
div.box
div.content-box
div.headline/h2/h3div.title/pdiv.button-box (optional)
a.buttonaPresets
Promo box presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
| Left image highlight | Whenever an image should be highlighted. |
| Aside box | An overlay box on top of the background image. |
| Without image | A preset to be used whenever you want to feature just text and actions. |
Presets are ready to use HTML structures.
Variations
Promo box variations:
| Variation | Description |
|---|---|
| Default | This snippet is composed of a background image, a headline, a title and a button. |
| Without button | This snippet is composed of a background image, a headline and a title. |
| With h2 | This snippet is composed of a background image, a h2 heading, a paragraph and a button. |
| With h3 | This snippet is composed of a background image, a h3 heading, a paragraph and a button. |
| Without image | This snippet gets rid of the lower box, reducing the layout to the minimum requirements. |
Modifiers
Promo box classes:
| Class | Description |
|---|---|
-transparent, -solid, -gradient | Changes the visibility of the text box. |
-light-blue, -blue, -dark-blue | Changes the background colour of the text box. |
-inverted | Change the text colour depending on the image/background intensity. |
-center, -top, -bottom, -left, -right, -full, -full-left, -full-right, -bottom-left, -bottom-right | Defines the position of the text box on the background image. |
-align-left | Justifies left the content inside the text box. |
-no-space-below | Removes component margin bottom. |
-small | Removes minimum height restriction for the component and the wrapper. |
To enable a modifier, add it as a class to the outermost element of this component.
Embedding
The promo box component cannot be embedded inside other component.
main (HTML file)
div.promo-boxNesting
The promo box component cannot be used as a container of other components and/or elements.
main (HTML file)
div.promo-box