Web Style Guide
Menu
Search

Combo box + boxes

A combo box + boxes is a group of two distinct components which can be used in hub pages.

Quick access

Usage
HTML structurePresetsVariations
Advanced settings

Presets

?
PresetDescription
DefaultDefault template.

Templates variations

?
VariationDescription
DefaultDefault variation.

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
combo-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 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
boxes

Variations

Modifiers

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><div class="boxes">
    <div class="box">
        <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="box">
        <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>
Interactive viewUsageHTML structurePresetsVariationsTest pageGo to top

Details

Usage

The combo box + boxes compound component...

HTML structure

Presets

Combo box + boxes presets:

PresetDescription
DefaultDefault template.

Variations

Combo box + boxes variations:

VariationDescription
DefaultDefault variation.

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

I understand and I accept the use of cookies I do not accept the use of cookies