Module Containers
updated

HTML/CSS Available
Web Component Unavailable
Last Updated
2.6.0

Module containers structure content by grouping various elements to provide cohesive sets of information and functionality.

(Note: Module Containers have been simplified. The previous variations of Module Containers are still supported, but are deprecated and will be removed in v3.0).

Variations

Default

Use to structure content by grouping various elements to provide cohesive sets of information and functionality.

Default

[Your content here.]

White Light Dark Black

<div class="mds-module-container"> [Your content here.] </div>

Examples

Module Container With Header

This example shows a Header placed within a module container and includes attributes establishing an accessible relationship between the two components.

MDS Features

Uses the mds-header--border-bottom modifier class to restyle the Header's border and internal padding for placement within a container.

Customizations

To meet accessibility requirements, some additional attributes must be added to the markup to establish a relationship between the Header and module container.

Add a unique id to the mds-header__title element.
Reference the id in an aria-labelledby attribute on the mds-module-container element.

Module Container With Headers

Header Title

[Your content here.]

White Light Dark Black

<div class="mds-module-container" aria-labelledby="header-id-1">
    <div class="mds-header mds-header--primary mds-header--border-bottom">
        <h2 class="mds-header__title" id="header-id-1"> Header Title <div class="mds-header__title-description">
                <button class="mds-button mds-button--icon-only" type="button">
                    <svg class="mds-icon mds-button__icon mds-button__icon--left" aria-hidden="true">
                        <use xlink:href="/icons/mds.svg#question-circle"> </use>
                    </svg>
                </button>
            </div>
        </h2>
        <div class="mds-header__actions">
            <button class="mds-button mds-button--secondary" type="button"> Action </button>
        </div>
    </div>
    <section> [Your content here.] </section>
</div>

Guidelines

Use When

Creating a discrete set of content and functionality.
Grouping a large set of related information.
Organizing multiple sets of content to compose a full page.

Don't Use When

Constructing a set of content and functionality layered on top of an underlying page. Instead, use a Modal.
Providing a set of content which acts as an entry point to more detailed information. Instead, use a Card.
Grouping information within another module container.

Visual Language

Module Container dimensions are based on its content and the container in which it resides.
Apply customs heights and widths to meet product requirements.
Module containers always use $mds-background-color-white as their background color. If requirements call for a different background color, work with a designer to create custom styles within your product’s CSS, which utilize the MDS background color constants.

Accessibility

Use a <section> element to contain your content within a module container. For example:

<div class="mds-module-container">
    <section class="[my-product-class]"> [Your content here.] </section>
</div>

Link Template