Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

  • Special Publication:  Public Website Visual Style Guide
  • August 2015

Containers and Tables

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

HTML Tags, Styled

iFrame <iframe>

Output

Code

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

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

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

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>

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.

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.

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>

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.

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>

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>

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

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>

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.

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.

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.

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.