Container

A container divides content into meaningful sections.

To see a detailed explanation of all existing modifier and state classes, please refer to the usage table below.

Container

Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="container">
    <div class="container__content">
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    </div>
</div>

Container with title

Simple container with a very very long title.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

<div class="container">
    <div class="container__title">
        <div class="title__content">
            Simple container with a very very long title.
        </div>
    </div>
    <div class="container__content">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    </div>
</div>

Collapsable container (collapsed)

<div class="container container--collapsable is-collapsed">
    <div class="container__title">
        <a class="title__content" href="#">
            Collapsable container with with a very very long clickable title so it wraps on small screens
        </a>
    </div>
    <div class="container__content">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    </div>
</div>

Collapsable container (expanded)

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

<div class="container container--collapsable">
    <div class="container__title">
        <a class="title__content" href="#">
            Collapsable non-collapsed container
        </a>
    </div>
    <div class="container__content">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    </div>
</div>

Container with meta information

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

<div class="container container--collapsable">
    <div class="container__title">
        <a class="title__content" href="#">
            Collapsable non-collapsed container with meta information
        </a>
        <div class="title__meta">
            <span class="badge has-bgColor-accentBlueDark has-color-white">
                42
            </span>
        </div>
    </div>
    <div class="container__content">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    </div>
</div>

Container with content actions

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

<div class="container container--collapsable">
    <div class="container__title">
        <a class="title__content" href="#">
            Collapsable non-collapsed container with buttons
        </a>
        <div class="title__actions">
            <button class="button--ghost has-icon-only">
                <span class="iconMdsp edit" aria-hidden="true"></span>
            </button>
            <button class="button--ghost has-icon-only">
                <span class="iconMdsp link" aria-hidden="true"></span>
            </button>
            <button class="button--ghost has-icon-only">
                <span class="iconMdsp delete" aria-hidden="true"></span>
            </button>
        </div>
    </div>
    <div class="container__content">
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
    </div>
</div>

Nested containers

Container with some nested containers.
42
Please don't nest containers for more then 2 levels.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="container">
    <div class="container__title">
        <div class="title__content">
            Container with some nested containers.
        </div>
        <div class="title__meta">
            <span class="badge has-bgColor-accentBlueDark has-color-white">
                42
            </span>
        </div>
    </div>
    <div class="container__content">

        <div class="container">
            <div class="container__title">
                <div class="title__content">
                    Please don't nest containers for more then 2 levels.
                </div>
                <div class="title__meta">
                    <i aria-hidden="true" class="iconMdsp attention black has-color-accentYellowDark"></i>
                </div>
            </div>
            <div class="container__content">
                <p>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
            </div>
        </div>

        <div class="container container--collapsable is-collapsed">
            <div class="container__title">
                <a class="title__content" href="#">
                    Please don't nest containers for more then 2 levels.
                </a>
                <div class="title__meta">
                    <span class="badge has-bgColor-accentBlueDark has-color-white">
                        42
                    </span>
                </div>
            </div>
            <div class="container__content">
                <p>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
            </div>
        </div>
        <div class="container container--collapsable">
            <div class="container__title">
                <a class="title__content" href="#">
                    Please don't nest containers for more then 2 levels.
                </a>
                <div class="title__meta">
                    <i aria-hidden="true" class="iconMdsp comment has-color-accentBlueLight"></i>
                </div>
            </div>
            <div class="container__content">
                <p>
                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                </p>
            </div>
        </div>

    </div>
</div>

Container with section divider and content divider

Simple container with section dividers between it's content objects.

This container is not collapsable and expanded by default. It does have several content objects which are divided with so called section dividers.


Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Etiam nisi risus, placerat nec semper viverra, lacinia nec quam. Nulla vulputate tortor ut dolor ultricies, sed gravida mi tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt finibus posuere. Morbi ut enim dignissim, auctor turpis at, commodo neque. Aliquam nec lacus vel turpis volutpat dictum non sed diam.


Morbi eu lorem odio. Duis imperdiet, tellus vitae mollis dictum, sapien mauris tincidunt nunc, eu tempus odio purus ut lectus. Cras ut suscipit ligula.

<div class="container">
    <div class="container__title">
        <div class="title__content">
            Simple container with section dividers between it's content objects.
        </div>
        <div class="title__meta">
        </div>
    </div>
    <div class="container__content">
        <p>This container is not collapsable and expanded by default. It does have several content objects which are divided with so called <em>section dividers</em>.</p>
        <hr class="content__divider content__divider--section" />
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <hr class="content__divider" />
        <p>Etiam nisi risus, placerat nec semper viverra, lacinia nec quam. Nulla vulputate tortor ut dolor ultricies, sed gravida mi tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt finibus posuere. Morbi ut enim dignissim, auctor turpis at, commodo neque. Aliquam nec lacus vel turpis volutpat dictum non sed diam.</p>
        <hr class="content__divider" />
        <p>Morbi eu lorem odio. Duis imperdiet, tellus vitae mollis dictum, sapien mauris tincidunt nunc, eu tempus odio purus ut lectus. Cras ut suscipit ligula.</p>
    </div>
</div>

Frameless container

Container, frameless variant with with a very very long title.
First nameLast nameE-Mail
Roland May
Frontend developer
rolandmay@yoveo.foo
Mark Ross
Scrum master
mark.ross@skivee.foo
Melissa Anton
Frontend key developer
m.anton@grkeo.foo
Tyler Nichols
Frontend developer
tyler.nichols@cogibox.foo
Amanda Maria Kennedy
Chief product expert
amanda-maria-kennedy@gmail.foo
<div class="container container--frameless">
    <div class="container__title">
        <div class="title__content">
            Container, frameless variant with with a very very long title.
        </div>
    </div>
    <div class="container__content">
        <table class="table table--alternate">
            <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>E-Mail</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Roland</td>
                <td>
                    May
                    <div class="td__description">
                        Frontend developer
                    </div>
                </td>
                <td>
                    <a href="mailto:roymay@yoveo.foo">
                        rolandmay@yoveo.foo
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    Mark
                </td>
                <td>
                    Ross
                    <div class="td__description">
                        Scrum master
                    </div>
                </td>
                <td>
                    <a href="mailto:mark.ross@skivee.foo">
                        mark.ross@skivee.foo
                    </a>
                </td>
            </tr>
            <tr>
                <td>Melissa</td>
                <td>
                    Anton
                    <div class="td__description">
                        Frontend key developer
                    </div>
                </td>
                <td>
                    <a href="mailto:m.anton@grkeo.foo">
                        m.anton@grkeo.foo
                    </a>
                </td>
            </tr>
            <tr>
                <td>Tyler</td>
                <td>
                    Nichols
                    <div class="td__description">
                        Frontend developer
                    </div>
                </td>
                <td>
                    <a href="mailto:tyler.nichols@cogibox.foo">
                        tyler.nichols@cogibox.foo
                    </a>
                </td>
            </tr>
            <tr>
                <td>Amanda Maria</td>
                <td>
                    Kennedy
                    <div class="td__description">
                        Chief product expert
                    </div>
                </td>
                <td>
                    <a href="mailto:amanda-maria-kennedy@gmail.foo">
                        amanda-maria-kennedy@gmail.foo
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Grouped container

Maecenas sed diam eget risus varius blandit sit amet non magna.

Container, grouped in countainer group.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Container, grouped in countainer group.

Maecenas sed diam eget risus varius blandit sit amet non magna.

<div class="containergroup">
    <div class="container container--collapsable">
        <div class="container__title">
            <a class="title__content" href="#">
                Container, grouped in countainer group.
            </a>
        </div>
        <div class="container__content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="container container--collapsable is-collapsed">
        <div class="container__title">
            <a class="title__content" href="#">
                Container, grouped in countainer group.
            </a>
        </div>
        <div class="container__content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
    <div class="container">
        <div class="container__title">
            <div class="title__content">
                Container, grouped in countainer group.
            </div>
        </div>
        <div class="container__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="container">
        <div class="container__title">
            <div class="title__content">
                Container, grouped in countainer group.
            </div>
        </div>
        <div class="container__content">
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        </div>
    </div>
</div>

Usage

ElementClassDescription
.container container--collapsable Adds a clickable expander element next to the container title. Note: expanding behaviour has to be added individually with JavaScript.
.container is-collapsed Collapses a container, no matter how much content is contained. If the class is removed, the container will expand to show all content.
.container container--frameless Removes the spacing around the container's content. Cannot be used in combination with section and content dividers.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top