Large box
This component can be used to highlight a very important link or document at the top of a page. If you want a page to start with one or more boxes that links to content, you should turn the first box into a large box.
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. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum iaculis eu. Et tortor consequat id porta. Quis varius quam quisque id diam vel.
Lorem ipsum dolor sit ametComponent used in
Details
Usage
This component can be used to highlight a very important link or document at the top of a sub-section landing page.
Guidelines
- If you want a page to start with one or more boxes that links to content, you should turn the first box into a large box
- If you have an introductory paragraph before the boxes are added, you do not need to use this component. Instead make sure you add a splitter before the boxes with a relevant title.
- Character limits:
- 75 characters for the title (
h3tag) - 280 characters for the blurb (
ptag) - 45 characters for the link (
atag)
- 75 characters for the title (
- Image dimensions:
- 1000x750 (resolution)
- JPG and WEBP (format)
HTML structure
Overall HTML view of a large box component:
main (HTML file)
div.large-box
div.header (optional)
div.titlediv.wrapper
div[data-image]div.content-box
h3paNesting element might significantly affect the HTML markup.
Presets
Large box presets:
| Preset | Description |
|---|---|
| Default | Default preset. |
Variations
Large box variations:
| Variation | Description |
|---|---|
| Default | Default variation |
| With header | If you have |
Modifiers
Large box classes:
| Class | Description |
|---|---|
-top-arrow | Adds an arrow on top of the component. |
-left | moves the written content to the left side. |
-text-width | Makes the written content larger to fit the section text width. |
Please bear in mind the utility classes are placed in the root element of the component.
Embedding
The large box component cannot be embedded inside other component.
main (HTML file)
div.large-boxNesting
The large box component can be used as a container of other components and/or elements (a nested component becomes an element of the parent component):
| Element | Description |
|---|---|
| Video | Whenever you need to add a video directly in a large box. |
main (HTML file)
div.large-box (component)
Elements are component add-ons which can be placed directly inside the component allowing you to adapt the HTML structure to your needs. The correct markup can be checked in the element page.