Combo box
This component should be added at the top of every hub page, after the introduction text. It is meant to highlight the two most important items or updates.
Combo boxes are mandatory in hub pages and cannot be used in any other page.
Variations
Variation | Description |
---|---|
Default | This snippet is composed of two boxes, each of them with 1 image, 1 title, 1 paragraph, 1 link and respective hyperlink. |
With headline | A subtitle and a yellow highlight is added in the first box. The subtitle can be used to highlight a category of news. This is used for instance in the statistics hub page. |
With headline and highlight | A subtitle and a yellow highlight is added in the first box. The subtitle can be used to highlight a category of news. The highlight can be used to highlight a number or rate. This is used for instance in the statistics hub page. |
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 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 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
The combo box component is used to to emphasize the most important or most recent news items, linking to a page, a publication or an external but highly relevant website.
Guidelines
- Mandatory in hub pages
- Cannot be used elsewhere than hub pages
- Must be added right after the intro component
- Maximum number of characters recommended:
- 75 characters for each title (
h3
tag) - 280 characters for each blurb (
p
tag) - 45 characters for each link (
a
tag)
- 75 characters for each title (
- Image properties recommended:
- 1000x750 (resolution) - upper box
- 2560x750 (resolution) - lower box
- JPG and WEBP (format)
HTML structure
Overall HTML view of a combo box component:
div.title
div.intro
div.combo-box
div.upper
div[data-image]
div.content-box
p.category
(optional)p.highlight
(optional)h3
p
a
div.lower[data-image]
div.content-box
h3
p
a
Nesting element might significantly affect the HTML markup.
Presets
Combo box presets:
Preset | Description |
---|---|
Default | Default layout. |
With subtitles | A subtitle and a yellow highlight is added in the first box. The subtitle can be used to highlight a category of news. This is used for instance in the statistics hub page. |
With subtitles and highlight | A subtitle and a yellow highlight is added in the first box. The subtitle can be used to highlight a category of news. The highlight can be used to highlight a number or rate. This is used for instance in the statistics hub page. |
Presets are ready to use HTML structures.
Variations
Combo box variations:Variation | Description |
---|---|
Default | This snippet is composed of two boxes, each of them with 1 image, 1 title, 1 paragraph, 1 link and respective hyperlink. |
With headline | A subtitle and a yellow highlight is added in the first box. The subtitle can be used to highlight a category of news. This is used for instance in the statistics hub page. |
With headline and highlight | A subtitle and a yellow highlight is added in the first box. The subtitle can be used to highlight a category of news. The highlight can be used to highlight a number or rate. This is used for instance in the statistics hub page. |
Embedding
The combo box component cannot be embedded inside other component.
main
(HTML file)
div.combo-box
Nesting
The combo box component can be used as a container of other components and/or elements:
Element | Description |
---|---|
Video | Whenever you need to add a video in the upper box. |
main
(HTML file)
div.combo-box
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.