Use these container classes to add consistently sized and proportioned content to the website.

HTML Tags, Styled

Expand or close the following content.iFrame `<iframe>`

Output

Code


<iframe class="input-xl" height="100">Contents of the iframe</iframe>

Expand or close the following content.Table `<table>`

See “Table” in code patterns for helper classes.

Output

This is a Table Caption `<caption>`
Table Heading 1 `<th>`	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1 `<th>`	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1 `<td>`	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Code


<table>
<caption>This is a Table Caption <code>&lt;caption&gt;</code></caption>
<thead>
<tr>
<th>Table Heading 1 <code>&lt;th&gt;</code></th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1 <code>&lt;th&gt;</code></th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1 <code>&lt;td&gt;</code></td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>

Container Code Patterns

Expand or close the following content.Accordion/Expander `.expander`

The code pattern for both the accordion and the expander are the same. On MCC’s website an accordion is multiple expanders grouped together.

Output

Expand or close the following content.Expander Title

Expander content.

Code


<div class="expander">
<h3 class="expand-trigger" accordion="true">Expander Title</h3>
<div class="expand-container">
<p>Expander content.</p>
</div>
</div>

Expand or close the following content.Card `.card`

Each card goes inside its own <div class="card"> tag. Regardless of the number of cards, the cards should be wrapped in a <div class="cards"> tag.

Output

Card Header

Card teaser text. This should be no more than 261 characters, including spaces.

Code


<div class="cards">
<div class="card">
<a href="#">
<div class="card-image">
<img src="#">
</div>
</a>
<div class="card-header">
<h3><a href="#">Card Header</a></h3>
</div>
<div class="card-copy">
<p>Card teaser text. This should be no more than 261 characters, including spaces.</p>
</div>
</div>
</div>

Helper Classes

Listed alphabetically by class name.

Card Helper Classes
Class	Description
`.card-header-align-center`	Aligns the card header in the center.
`.card-header-align-right`	Aligns the card header to the right.
`.card-header-border`	Removes the outer border from the card. Add to the `<div class="card">` tag.
`.card-icon`	Assign to an `<img>` tag placed before the `<h3>` tag in the `.card-header` div to display an icon.
`.card-image-bkgd-white`	Sets the background color behind the card teaser image to white.
`.card-image-center-horizontally`	Aligns the card teaser image horizontally.
`.card-image-height-half`	Reduces the height of the card teaser image by 50 percent.
`.card-image-height-proportional`
`.card-image-wide`
`.grow`	Makes the last card (or, if there's only one card) grow to the width of its parent container.

Expand or close the following content.Card - Basic `.card-basic`

This is a very simple, barely styled card code pattern with much fewer options than the standard Card code pattern.

Each card goes inside its own <div class="card-basic"> tag. Regardless of the number of cards, the cards should be wrapped in a <div class="cards-basic"> tag.

Output

Place any tag inside the card.

Code


<div class="cards-basic">
<div class="card-basic">
<p>Place any tag inside the card.</p>
</div>
</div>

Helper Classes

Listed alphabetically by class name.

Card - Basic Helper Classes
Class	Description
`.card-basic-no-border`	Removes the border around the card.

Expand or close the following content.Code Examples `<code class="language-markup">`

Output


<p>This is a code example.</p>

Code


<pre>
<code class="language-markup">
<p>This is a code example.</p>
</code>
</pre>

Expand or close the following content.Content Sidebar `.content-sidebar`

Output

Content sidebar content.

Code


<section class="content-sidebar">
<p>Content sidebar content.</p>
</section>

Helper Classes

Listed alphabetically by class name.

Content Sidebar Helper Classes
Class	Description
`.half`	Sets the width of the sidebar to 50% and floats it right.

Expand or close the following content.Content Section `.section`

This container creates a dark horizontal line separator with wide top margin and top padding to indicate a major topic change within content.

Output

Content section content.

Code


<section class="section">
<p>Content section content.</p>
</section>

Expand or close the following content.Content Sub-Section `.sub-section`

This container creates a light horizontal line separator with wide top margin and top padding to indicate a topic change within a section of content.

Output

Content sub-section content.

Code


<section class="sub-section">
<p>Content sub-section content.</p>
</section>

Expand or close the following content.Featured Visual `<div id="featured-visual">`

The “featured visual” is a container available at the top of every page of the website to either embed a map, slideshow or video or to display a teaser image and teaser text to content elsewhere on the site.

Output

Podcasts

Women on a Mission—a new podcast series from MCC—features conversations with women leaders in international development that highlight their extraordinary experiences, lessons learned and personal journeys.

Code


<div id="featured-visual">
<figure id="featured-visual-hero">
<a href="https://www.mcc.gov/news-and-events/feature/podcasts">
<img src="https://assets.mcc.gov/content/uploads/2016/06/graphic-woam-podcast-teaser.jpg">
</a>
<figcaption>
<h4><a href="https://www.mcc.gov/news-and-events/feature/podcasts">Podcasts</a></h4>
<p>Women on a Mission—a new podcast series from MCC—features conversations with women leaders in international development that highlight their extraordinary experiences, lessons learned and personal journeys.&nbsp;</p>
</figcaption>
</figure>
</div>

Expand or close the following content.Grid `<div class="grid-items-lines">`

This pattern originated from the Bourbon Refills pattern library.

Output

Grid Item 1

Teaser

Grid Item 2

Teaser

Code


<div class="grid-items-lines">
<!-- copy/paste this code block for each grid item -->
<a href="#" class="grid-item">
<!-- optional teaser image -->
<div class="grid-item-image">
<img src="#">
</div>
<h1>Grid Item 1</h1>
<p>Teaser</p>
</a>
<!-- end copy/paste -->
<div class="right-cover"></div>
<div class="bottom-cover"></div>
</div>

Helper Classes

Listed alphabetically by class name.

Card Helper Classes
Class	Description
`.grid-item-big`	Expands a grid panel to stretch across two grid panels.
`.grid-item-image`	Add to `<div>` tag surrounding an `<img>` tag to display a teaser image inside a grid panel.
`.grid-item-image-icon`	Add to `<div class="grid-item-image">` when using an icon or country flag button to change the size to 36 pixels by 36 pixels.

Expand or close the following content.Stats `.stats`

This pattern originated from the Bourbon Refills pattern library.

Output

000,000,000First stat descriptive text
000,000,000Second stat descriptive text
This is caveat text to provide additional context to the stat.

Code


<div class="stats">
<ul class="width-2 clearfix">
<!-- Copy/paste this code for each stat -->
<li>000,000,000<span>First stat descriptive text</span></li>
<!-- End copy/paste this code for each stat -->
<li>000,000,000<span>Second stat descriptive text</span><p class="stat-caveat">This is caveat text to provide additional context to the stat.</p></li>
</ul>
</div>

Helper Classes

Listed alphabetically by class name.

List Helper Classes
Class	Description
`.stat-caveat`	Assign to a `<p>` tag after the `<span>` tag to provide additional context for the stat. This class decreases the font size and changes the color to `$grey-dark`.
`.width-2`	Assign to the `<ul>` tag if there are two stats.
`.width-3`	Assign to the `<ul>` tag if there are three stats.
`.width-4`	Assign to the `<ul>` tag if there are four stats.
`.width-5`	Assign to the `<ul>` tag if there are five stats.

Expand or close the following content.Table `<table>`

A table is a container used to display structured data.

Output

This is a Table Caption `<caption>`
Table Heading 1 `<th>`	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1 `<th>`	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1 `<td>`	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Code


<table>
<caption>This is a Table Caption <code>&lt;caption&gt;</code></caption>
<thead>
<tr>
<th>Table Heading 1 <code>&lt;th&gt;</code></th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1 <code>&lt;th&gt;</code></th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1 <code>&lt;td&gt;</code></td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
</table>

Helper Classes

Listed alphabetically by class name.

List Helper Classes
Class	Description
`.odd`	Sets a background color for an odd table row. (The background color is currently not set.) Use on `<tr>` tag.
`.even`	Sets the background color to `#d9d9d9` for an even table row. Use on `<tr>` tag.
`.dataTable`	Makes the various table designs created by DataTables available. Refer to DataTables for specific features and options. Use on the `<table>` tag.
`.table-large`	On screen: extends table into right column on large and xl breakpoints, reduces cell padding, reduces font size by 20 percent and uses Gotham Narrow font In print and PDF: reduces table cell padding, uses Gotham Narrow font and decreases the font size to 8 pt
`.table-xl`	On screen: extends table into right column on large and xl breakpoints, reduces cell padding, reduces font size by 20 percent and uses Gotham Extra Narrow font In print and PDF: reduces table cell padding, uses Gotham Extra Narrow font and decreases the font size to 8 pt
`.table-no-border`	Removes the border from all table elements, including headers, rows and cells
`.table-valign-top`	Assign to a `<td>` to set the vertical alignment of a cell to the top
`.tablesaw`	Makes the various responsive table designs created by Tablesaw available. Refer to Tablesaw for specific features and options. Use on the `<table>` tag.

Expand or close the following content.Vertical Tabs `<div class="vertical-tabs-container">`

This pattern originated from the Bourbon Refills pattern library.

Output

First Tab Second Tab

First Tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas, dolor sit amet malesuada faucibus, enim erat consequat mi, a luctus libero ante tincidunt turpis. In interdum condimentum quam accumsan suscipit. Nunc sagittis euismod euismod. Vivamus at ex odio. Vivamus in urna sapien. Etiam ipsum nulla, lacinia quis sagittis volutpat, ultrices ac lorem. Praesent tristique elit et ex dictum, id auctor elit rutrum. Sed non gravida purus, in condimentum ex. In feugiat dui pretium erat posuere blandit. Sed suscipit at massa ut consequat. Suspendisse commodo quis arcu in varius.

Second Tab

Code


<div class="vertical-tabs-container">
<div class="vertical-tabs">
<a href="javascript:void(0)" class="js-vertical-tab vertical-tab is-active" rel="tab01">First Tab</a>
<a href="javascript:void(0)" class="js-vertical-tab vertical-tab" rel="tab02">Second Tab</a>
</div>
<div class="vertical-tab-content-container">
<a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading is-active" rel="tab01">First Tab</a>
<div id="tab01" class="js-vertical-tab-content vertical-tab-content" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas, dolor sit amet malesuada faucibus, enim erat consequat mi, a luctus libero ante tincidunt turpis. In interdum condimentum quam accumsan suscipit. Nunc sagittis euismod euismod. Vivamus at ex odio. Vivamus in urna sapien. Etiam ipsum nulla, lacinia quis sagittis volutpat, ultrices ac lorem. Praesent tristique elit et ex dictum, id auctor elit rutrum. Sed non gravida purus, in condimentum ex. In feugiat dui pretium erat posuere blandit. Sed suscipit at massa ut consequat. Suspendisse commodo quis arcu in varius.</p>
</div>
<a href="" class="js-vertical-tab-accordion-heading vertical-tab-accordion-heading is-active" rel="tab02">Second Tab</a>
<div id="tab02" class="js-vertical-tab-content vertical-tab-content" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas, dolor sit amet malesuada faucibus, enim erat consequat mi, a luctus libero ante tincidunt turpis. In interdum condimentum quam accumsan suscipit. Nunc sagittis euismod euismod. Vivamus at ex odio. Vivamus in urna sapien. Etiam ipsum nulla, lacinia quis sagittis volutpat, ultrices ac lorem. Praesent tristique elit et ex dictum, id auctor elit rutrum. Sed non gravida purus, in condimentum ex. In feugiat dui pretium erat posuere blandit. Sed suscipit at massa ut consequat. Suspendisse commodo quis arcu in varius.</p>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".js-vertical-tab-content").hide();
$(".js-vertical-tab-content:first").show();
/* if in tab mode */
$(".js-vertical-tab").click(function(event) {
event.preventDefault();
$(".js-vertical-tab-content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).show();
$(".js-vertical-tab").removeClass("is-active");
$(this).addClass("is-active");
$(".js-vertical-tab-accordion-heading").removeClass("is-active");
$(".js-vertical-tab-accordion-heading[rel^='"+activeTab+"']").addClass("is-active");
});
/* if in accordion mode */
$(".js-vertical-tab-accordion-heading").click(function(event) {
event.preventDefault();
$(".js-vertical-tab-content").hide();
var accordion_activeTab = $(this).attr("rel");
$("#"+accordion_activeTab).show();
$(".js-vertical-tab-accordion-heading").removeClass("is-active");
$(this).addClass("is-active");
$(".js-vertical-tab").removeClass("is-active");
$(".js-vertical-tab[rel^='"+accordion_activeTab+"']").addClass("is-active");
});
});
</script>

Helper Classes

Helper classes are listed in a table in the accordion for a specific container type.

Containers and Tables

HTML Tags, Styled

Expand or close the following content.iFrame <iframe>

Expand or close the following content.Table <table>

Container Code Patterns

Expand or close the following content.Accordion/Expander .expander

Expand or close the following content.Expander Title

Expand or close the following content.Card .card

Card Header

Helper Classes

Expand or close the following content.Card - Basic .card-basic

Helper Classes

Expand or close the following content.Code Examples <code class="language-markup">

Expand or close the following content.Content Sidebar .content-sidebar

Helper Classes

Expand or close the following content.Content Section .section

Expand or close the following content.Content Sub-Section .sub-section

Expand or close the following content.Featured Visual <div id="featured-visual">

Podcasts

Expand or close the following content.Grid <div class="grid-items-lines">

Grid Item 1

Grid Item 2

Helper Classes

Expand or close the following content.Stats .stats

Helper Classes

Expand or close the following content.Table <table>

Helper Classes

Expand or close the following content.Vertical Tabs <div class="vertical-tabs-container">

Helper Classes

Expand or close the following content.iFrame `<iframe>`

Expand or close the following content.Table `<table>`

Expand or close the following content.Accordion/Expander `.expander`

Expand or close the following content.Card `.card`

Expand or close the following content.Card - Basic `.card-basic`

Expand or close the following content.Code Examples `<code class="language-markup">`

Expand or close the following content.Content Sidebar `.content-sidebar`

Expand or close the following content.Content Section `.section`

Expand or close the following content.Content Sub-Section `.sub-section`

Expand or close the following content.Featured Visual `<div id="featured-visual">`

Expand or close the following content.Grid `<div class="grid-items-lines">`

Expand or close the following content.Stats `.stats`

Expand or close the following content.Table `<table>`

Expand or close the following content.Vertical Tabs `<div class="vertical-tabs-container">`