Menu

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.

Minimum requirements
  • 2 images (div[data-image] + div[data-image].lower)
  • 2 titles (h3)
  • 2 paragraphs (p)
  • 2 link names (a) and 2 hyperlinks (a[href])

Combo boxes are mandatory in hub pages and cannot be used in any other page.

Quick access

Advanced settings

Presets

?
PresetDescription
DefaultDefault layout.
With subtitlesA 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 highlightA 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.

Variations

?
VariationDescription
DefaultThis snippet is composed of two boxes, each of them with 1 image, 1 title, 1 paragraph, 1 link and respective hyperlink.
With headlineA 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 highlightA 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 amet

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 amet

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 amet

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 amet

LOREM IPSUM

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 amet

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 amet

LOREM IPSUM

XXXXXX UNIT

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 amet

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 amet

HTML
Copy to clipboard
<div class="combo-box">
<div class="upper">
<div data-image-webp="/styleguide/shared/img/light_1000x750.webp" data-image="/styleguide/shared/img/light_1000x750.jpg"></div>
<div class="content-box">
<h3>Lorem ipsum dolor sit amet</h3>
<p>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.</p>
<a href="#">Lorem ipsum dolor sit amet</a>
</div>
</div>
<div class="lower" data-image-webp="/styleguide/shared/img/light_2560x750.webp" data-image="/styleguide/shared/img/light_2560x750.jpg">
<div class="content-box">
<h3>Lorem ipsum dolor sit amet</h3>
<p>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.</p>
<a href="#">Lorem ipsum dolor sit amet</a>
</div>
</div>
</div>

Component used in

Page template

Compound components

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

  1. Mandatory in hub pages
  2. Cannot be used elsewhere than hub pages
  3. Must be added right after the intro component
  4. 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)
  5. 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:

HTML file (.html)
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
(other component(s))

Nesting element might significantly affect the HTML markup.

Presets

Combo box presets:

PresetDescription
DefaultDefault layout.
With subtitlesA 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 highlightA 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:

VariationDescription
DefaultThis snippet is composed of two boxes, each of them with 1 image, 1 title, 1 paragraph, 1 link and respective hyperlink.
With headlineA 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 highlightA 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)
(component)
div.combo-box

Nesting

The combo box component can be used as a container of other components and/or elements:

ElementDescription
VideoWhenever you need to add a video in the upper box.
main (HTML file)
div.combo-box
(Element)

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.

Our website uses cookies

We are always working to improve this website for our users. To do this, we use the anonymous data provided by cookies.
Learn more about how we use cookies