2.6.0
Module containers structure content by grouping various elements to provide cohesive sets of information and functionality.
These variations are deprecated and will be removed in v3.0.
Please use the enhanced Module Containers component for all new development.
That combination of options is invalid.
Module containers can be configured in a variety of ways to accomplish their intended goal. Implementing teams are encouraged to use the particular set of elements which best serve their use case.
Name
|
Required
|
Description
|
---|---|---|
Container |
Yes |
Visually defines the module container’s dimensions. |
Content |
Yes |
Displays a defined composition of elements. |
Header |
No |
Includes a Header component. |
<div class="mds-module-container">
<div class="mds-header mds-header--primary mds-header--border-bottom">
<h2 class="mds-header__title"> Module Container Title </h2>
<div class="mds-header__actions">
<button class="mds-button mds-button--secondary" type="button"> Action </button>
</div>
</div>
<section class="mds-module-container__content">
<div>[Your content here.]</div>
</section>
</div>
Use to compose a set of content and/or functionality.
<div class="mds-module-container">
<section class="mds-module-container__content">
<div>[Your content here.]</div>
</section>
</div>
Module containers come in a single size. However, they can consume any size of Header.
<div class="mds-module-container">
<div class="mds-header mds-header--primary mds-header--level-4 mds-header--border-bottom">
<h2 class="mds-header__title"> Module Container Title </h2>
<div class="mds-header__actions">
<button class="mds-button mds-button--secondary" type="button"> Action </button>
</div>
</div>
<section class="mds-module-container__content">
<div>[Your content here.]</div>
</section>
</div>
$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. mds-header__title
and reference it in the mds-module-container__content
element using the aria-labelledby
attribute.<div class="mds-module-container">
<div class="mds-header mds-header--primary">
<h2 class="mds-header__title" id="title-header-1"> [Module Container 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 class="mds-module-container__content" aria-labelledby="title-header-1">
<div>[Your content here.]</div>
</section>
</div>