Use the list styles below to organize information for readers into lists and maintain accessibility and compliance with federal accessibility laws.
HTML Tags, Styled
Definition <dl>
- Output
-
- This is a term
- This is that term’s definition
- This is another term
- This is the other term’s definition
- This is the other term’s second definition
- Code
-
<dl>
<dt>This is a term</dt>
<dd>This is that term’s definition</dd>
<dt>This is another term</dt>
<dd>This is the other term’s definition</dd>
<dd>This is the other term’s second definition</dd>
</dl>
Ordered <ol>
- Output
-
- List Item
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- Code
-
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ol>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ol>
</li>
<li>List Item</li>
</ol>
Unordered <ul>
- Output
-
- List Item
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- Code
-
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List Item</li>
</ul>
List Patterns
Ordered List—Legal Numbering .ol-legal
This pattern creates a legal numbering structure using an ordered list. The pattern only works with the <h2>, <h3>, <h4>, and <h5> tags.
- Output
-
Primary Header
Primary text.
Secondary Header
Secondary text.
Another Secondary Header
More secondary text.
Another Primary Header
More primary text
Yet Another Secondary Header
More secondary text.
Tertiary Header
Tertiary text.
Another Tertiary Header
More tertiary text.
Quaternary Header
Quaternary text.
- Code
-
<div class="ol-legal">
<h2>Primary Header</h2>
<p>Primary text.</p>
<h3>Secondary Header</h3>
<p>Secondary text.</p>
<h3>Another Secondary Header</h3>
<p>More secondary text.</p>
<h2>Another Primary Header</h2>
<p>More primary text</p>
<h3>Yet Another Secondary Header</h3>
<p>More secondary text.</p>
<h4>Tertiary Header</h4>
<p>Tertiary text.</p>
<h4>Another Tertiary Header</h4>
<p>More tertiary text.</p>
<h5>Quaternary Header</h5>
<p>Quaternary text.</p>
</div>
Ordered List—Chapter .ol-chapter
Use this pattern to automatically add the word “Chapter” to the beginning of a numbered section. This class uses digits. The pattern only works with <h2>.
- Output
-
Chapter Name
Chapter text.
Sub-section Name
Sub-section text.
Another Chapter Name
Another chapter text.
- Code
-
<section class="ol-chapter">
<h2>Chapter Name</h2>
<p>Chapter text.</p>
<h3>Sub-section Name</h3>
<p>Sub-section text.</p>
<h2>Another Chapter Name</h2>
<p>Another section text.</p>
</section>
Ordered List—Part .ol-part
Use this pattern to automatically add the word “Part” to the beginning of a numbered section. This class uses digits. The pattern only works with <h2>.
Options:
.ol-part-upper-alpha: use this class for uppercase letters..ol-part-upper-roman: use this class for uppercase Roman numerals.
- Output
-
Section Name
Section text.
Sub-section Name
Sub-section text.
Another Section Name
Another section text.
- Code
-
<section class="ol-part">
<h2>Section Name</h2>
<p>Section text.</p>
<h3>Sub-section Name</h3>
<p>Sub-section text.</p>
<h2>Another Section Name</h2>
<p>Another section text.</p>
</section>
Ordered List—Section .ol-section
Use this pattern to automatically add the word “Section” to the beginning of a numbered section. This class uses digits. The pattern only works with <h2>.
Options:
.ol-section-upper-alpha: use this class for uppercase letters..ol-section-upper-roman: use this class for uppercase Roman numerals.
- Output
-
Section Name
Section text.
Sub-section Name
Sub-section text.
Another Section Name
Another section text.
- Code
-
<section class="ol-section">
<h2>Section Name</h2>
<p>Section text.</p>
<h3>Sub-section Name</h3>
<p>Sub-section text.</p>
<h2>Another Section Name</h2>
<p>Another section text.</p>
</section>
Ordered List—Standard Outline .ol-standard-outline
This pattern creates the standard outline structure using an ordered list. The pattern only works with the <h2>, <h3>, <h4>, and <h5> tags.
- Output
-
Primary Header
Primary text.
Secondary Header
Secondary text.
Another Secondary Header
More secondary text.
Another Primary Header
More primary text
Yet Another Secondary Header
More secondary text.
Tertiary Header
Tertiary text.
Another Tertiary Header
More tertiary text.
Quaternary Header
Quaternary text.
- Code
-
<div class="ol-standard-outline">
<h2>Primary Header</h2>
<p>Primary text.</p>
<h3>Secondary Header</h3>
<p>Secondary text.</p>
<h3>Another Secondary Header</h3>
<p>More secondary text.</p>
<h2>Another Primary Header</h2>
<p>More primary text</p>
<h3>Yet Another Secondary Header</h3>
<p>More secondary text.</p>
<h4>Tertiary Header</h4>
<p>Tertiary text.</p>
<h4>Another Tertiary Header</h4>
<p>More tertiary text.</p>
<h5>Quaternary Header</h5>
<p>Quaternary text.</p>
</div>
Ordered List—Standard Outline Starting with Uppercase Alphabet .ol-standard-outline-roman
This pattern creates the standard outline structure but begins with the uppercase letter rather than the roman numeral using an ordered list. The pattern only works with the <h2>, <h3>, <h4>, and <h5> tags.
- Output
-
Primary Header
Primary text.
Secondary Header
Secondary text.
Another Secondary Header
More secondary text.
Another Primary Header
More primary text
Yet Another Secondary Header
More secondary text.
Tertiary Header
Tertiary text.
Another Tertiary Header
More tertiary text.
Quaternary Header
Quaternary text.
- Code
-
<div class="ol-standard-outline-roman">
<h2>Primary Header</h2>
<p>Primary text.</p>
<h3>Secondary Header</h3>
<p>Secondary text.</p>
<h3>Another Secondary Header</h3>
<p>More secondary text.</p>
<h2>Another Primary Header</h2>
<p>More primary text</p>
<h3>Yet Another Secondary Header</h3>
<p>More secondary text.</p>
<h4>Tertiary Header</h4>
<p>Tertiary text.</p>
<h4>Another Tertiary Header</h4>
<p>More tertiary text.</p>
<h5>Quaternary Header</h5>
<p>Quaternary text.</p>
</div>
Search Results
- Output
-
-
to financial services – whether in the form of savings, credit, money transfers … and productive capacity. Access to financial services empowers the poor by reducing …
-
Eko Financial Services Ltd., is working with two major banks, the State Bank of India and ICICI, India’s second largest bank, to offer financial services …
-
money using a cellphone. Now their company, Eko Financial Services … ’s second largest bank, to offer financial services to poor and low income …
-
for branchless banking services. The report, available here in English … products and delivery channels often bring financial services to populations … The growing popularity of these new financial services is evidenced by the fact …
-
people who do not have access to formal financial services. In response … operators, retail stores, and regulators to deliver financial services through … so that promising branchless banking services can thrive …
- Code
-
<div class="search-bar">
<form role="search">
<input type="search" placeholder="Enter Search">
<input type="submit" value="Search">
</form>
</div>
<ol class="search-results">
<li>
<h3><a href="">About</a></h3>
<h4><a href="">Page</a></h4>
to financial <strong>services</strong> – whether in the form of savings, credit, money transfers … and productive capacity. Access to financial <strong>services</strong> empowers the poor by reducing …
</li>
<li>
<h3><a href="">Eko: Chasing the Fortune at the Base of the Pyramid</a></h3>
<h4><a href="">Success Story</a></h4>
Eko Financial <strong>Services</strong> Ltd., is working with two major banks, the State Bank of India and ICICI, India’s second largest bank, to offer financial <strong>services</strong> …
</li>
</ol>
<div class="item-list pager-container">
<ul class="pager clearfix">
<li class="pager-first first"><a title="Go to first page" href="#">« first</a></li>
<li class="pager-previous"><a title="Go to previous page" href="#">‹ previous</a></li>
<li class="pager-item"><a title="Go to page 1" href="#">1</a></li>
<li class="pager-current"><a title="Go to page 2" href="#">2</a></li>
<li class="pager-item"><a title="Go to page 3" href="#">3</a></li>
<li class="pager-item"><a title="Go to page 4" href="#">4</a></li>
<li class="pager-next"><a title="Go to next page" href="#">next ›</a></li>
<li class="pager-last last"><a title="Go to last page" href="#">last »</a></li>
</ul>
</div>
Teaser List <ul class="teasers">
The teaser is used to display a list of similar content items like events, documents or videos. To list multiple teaser items, duplicate the <li class="teaser"> code for each item. Optional elements:
- Dateline: the dateline is the small text above the teaser’s headline that can either display the date or the category of an item
- Image: the image should be the featured image assigned to an item in its content management system entry. It should be no larger than 190 x 96 pixels.
- Output
-
-
date posted, event date, date approved and/or category
The image is optional, but preferred. For hand-coded teaser lists, use an entry's teaser image. The image should typically be a 2:1 ratio (which teaser images should be by default). The teaser should be no longer than 261 characters, including spaces.
- Code
-
<ul class="teasers">
<li class="teaser">
<div class="teaser-content">
<p class="text-small text-dateline">date posted, event date, date approved and/or category</p>
<h3><a href="#">Title</a></h3>
<div class="teaser-image">
<img src="https://assets.mcc.gov/content/uploads/2017/05/photo-092916-NER-IMAGINE-school-crowd-1-190x96.jpg">
</div>
<p>The image is optional, but preferred. For hand-coded teaser lists, use an entry's teaser image. The image should typically be a 2:1 ratio (which teaser images should be by default). The teaser should be no longer than 261 characters, including spaces.</p>
</div>
</li>
</ul>
Unordered List—List Photos .list-photos
This pattern is used to display images as a list. The list does not include bullets.
- Output
-
- Code
-
<ul class="list-photos">
<li><img alt="" src="https://assets.mcc.gov/content/uploads/2017/05/img-tenth-jordan-water.jpg" style="width: 100%;" /></li>
<li><img alt="" src="https://assets.mcc.gov/content/uploads/2017/05/img-tenth-burkina-faso-education.jpg" style="width: 100%;" /></li>
<li><img alt="" src="https://assets.mcc.gov/content/uploads/2016/06/130509_085.jpg" style="width: 100%;" /></li>
<li><img alt="" src="https://assets.mcc.gov/content/uploads/2017/05/IMG_6259.jpg" style="width: 100%;" /></li>
</ul>
Unordered List—Unstyled .list-unstyled
This pattern is used to display list items without any bullets.
- Output
-
- List Item
- List Item
- List Item
- Nested List Item
- Nested List Item
- Nested List Item
- List Item
- Code
-
<ul class="list-unstyled">
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ul>
<li>Nested List Item</li>
<li>Nested List Item</li>
<li>Nested List Item</li>
</ul>
</li>
<li>List Item</li>
</ul>
Helper Classes
Listed alphabetically by class name. Add these classes to the respective <ul> or <ol> tag.
List Helper Classes
| Class |
Description |
.list-no-margin |
Add to either <ul> or <ol> to remove the margins from a list |
.ol-decimal |
Displays an ordered list using numbers (e.g. 1, 2, 3) |
.ol-decimal-leading-zero |
Displays an ordered list using numbers with leading zeros (e.g. 01, 02, 03) |
.ol-lower-alpha |
Displays an ordered list using the lowercase alphabet |
.ol-lower-greek |
Displays an ordered list using the lowercase Greek alphabet |
.ol-lower-roman |
Displays an ordered list using lowercase Roman numerals |
.ol-upper-alpha |
Displays an ordered list using the uppercase alphabet |
.ol-upper-roman |
Displays an ordered list using uppercase Roman numerals |
.ul-list-bullet-check-mark |
Add to the <ul> tag to have each <li> display a FontAwesome check mark instead of a bullet |
.check-mark-bold-blue |
Add to the <ul> tag to have each <li> display a FontAwesome check mark instead of a bullet colored web-bold-blue |
.list-inline |
Displays an unordered list horizontally inline |
.ul-list-inline-comma |
Add to the <ul> tag to have an unordered list display horizontally inline with a comma and a space between list items |
.ul-list-inline-pipe |
Add to the <ul> tag to have an unordered list display horizontally inline with a pipe between list items |
