Developer Style Guide

Headings


This is H2 heading

    <h2>This is H2 heading</h2>

This is H3 heading

    <h3>This is H3 heading</h3>

This is H4 heading

    <h4>This is H4 heading</h4>
This is H5 heading
    <h5>This is H5 heading</h5>
This is H6 heading
    <h6>This is H6 heading</h6>

This is a Heading 3 link example

    <h3><a href="/">This is a Heading 3 link example</a></h3>

Body text

This is a normal paragraph (p). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements by default.

<p>This is a normal paragraph (p). To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements by default.</p>

Lists

This is a paragraph before an unnumbered list (ul).

  • One.
  • Two.
  • Three.
  • Four. This is the last item in this list.
<ul>
   <li>One.</li>
   <li>Two.</li>
   <li>Three.</li>
   <li>Four. This is the last item in this list.</li>
</ul>

This is a paragraph before an unumbered nested list (ul).

  • One.
  • Two.
    • One.
    • Two.
  • Three.
  • Four. This is the last item in this list.
<ul>
   <li>One.</li>
         <ul>
            <li>One.</li>
            <li>Two.</li>
         </ul>
   <li>Two.</li>
   <li>Three.</li>
   <li>Four. This is the last item in this list.</li>
</ul>

This is a paragraph before a numbered list (ol).

  1. One.
  2. Two.
  3. Three.
  4. Four. This is the last item in this list.
<ol>
   <li>One.</li>
   <li>Two.</li>
   <li>Three.</li>
   <li>Four. This is the last item in this list.</li>
</ol>

Bold Numbers for Ordered Lists

  1. One.
    1. list11
    2. list12
    3. list13
  2. Two.
  3. Three.
  4. Four. This is the last item in this list.
<ol class="bold-numbers"><li>One.
<ol class="bold-numbers">
<li>list11</li>
<li>list12</li>
<li>list13</li>
</ol>
</li>
<li>Two.</li>
<li>Three.</li>
<li>Four. This is the last item in this list.</li>
</ol>

Text-level markup

this is highlighted text (strong markup used)

<strong>this is highlighted text</strong>

this is very simple (em markup used for emphasizing a word)

this is <em>very</em> simple

overstruck (strike markup used; note: s is a nonstandard synonym for strike)

<strike>overstruck</strike>

This is another paragraph with "indent" class applied.

<p class="indent">This is another paragraph with "indent" class applied.</p>

Quotes

Blockquote

all buildings, equipment, structures, and other stationary items which are located on a single site or on contiguous or adjacent sites and which are owned or operated by the same person (or by any person which controls, is controlled by, or under common control with, such person). For purposes of [emergency release notification], the term includes motor vehicles, rolling stock, and aircraft (42 U.S.C. ' 11049(4)).
<blockquote>all buildings, equipment, structures, and other stationary items which are located on a single site or on contiguous or adjacent sites and which are owned or operated by the same person (or by any person which controls, is controlled by, or under common control with, such person). For purposes of [emergency release notification], the term includes motor vehicles, rolling stock, and aircraft (42 U.S.C. ' 11049(4)).</blockquote>

Tweet Pullquote

40% of all cancers are linked to tobacco use. We need to help more Americans take steps to quit. http://go.usa.gov/xkSpJ #VitalSigns

<div class="pullquote">
  <p class="qmark">40% of all cancers are linked to tobacco use. We need to help more Americans take steps to quit. <a href="http://go.usa.gov/xkSpJ">http://go.usa.gov/xkSpJ</a> #VitalSigns</p>
  <p align="right" class="link"><a class="pullquote-tweet" href="https://twitter.com/intent/tweet?text=40%25 of all cancers are linked to tobacco use. We need to help more Americans take steps to quit. http://go.usa.gov/xkSpJ %23VitalSigns&url=http://go.usa.gov/xkSpJ">TWEET THIS</a></p>
</div>

Speech Pullquote

Homelessness is a complex issue, but one that we know how to solve.​

<div class="speechquote"><p class="quote">Homelessness is a complex issue, but one that we know how to solve.​</p></div>

HHS Homepage

<a href="http://www.hhs.gov">HHS Homepage</a>

This is a text paragraph that contains some inline links.

<p>This is a text paragraph that contains some <a href="http://www.hhs.gov">inline links</a>.</p>

External Link

This is a text paragraph that contain a link that take you to an external site.

<p>This is a text paragraph that contain a link that take you to  <a class="external-link" href="http://www.example.com">an external site</a>.</p>

Jump Links

<p class="jump-links"><strong>Topics on this page</strong>: <a href="#">Jump Link Number 1</a> | <a href="#">Jump Link Number 2</a> | <a href="#">Jump Link Number 3</a> | <a href="#">Jump Link Number 4</a> | <a href="#">Jump Link Number 5</a> | <a href="#">Jump Link Number 6</a> | <a href="#">Jump Link Number 7</a> | <a href="#">Jump Link Number 8</a> | <a href="#">Jump Link Number 9</a> | <a href="#">Jump Link Number 10</a></p>

Collapse

Hide/Show Forecast Disclaimer

Forecast Disclaimer

All projected procurements are subject to revision or cancellation. Final decisions on the extent of competition, small business participation, estimated value, or any aspect of the procurement action will not be made until each procurement is initiated. Forecast data is for planning purposes only and is not a commitment by the government to purchase the described products and services.

<a data-toggle="collapse" href="#collapseOne">Hide/Show Forecast Disclaimer</a>
   <div class="in" id="collapseOne" style="height: auto;">
  <h3>Forecast Disclaimer</h3>
  <p>All projected procurements are subject to revision or cancellation. Final decisions on the extent of competition, small business participation, estimated value, or any aspect of the procurement action will not be made until each procurement is initiated. <b>Forecast data is for planning purposes only and is not a commitment by the government to purchase the described products and services.</b>
  </p>
</div>

Tables

The following table uses "allborders" class to get borders. The header of the table uses "colorhead" class to get color #d4effd. The 1st and 3rd rows use "color1" class to get color #ffffff; the 2nd and 4th row use "color2" class to get color #f6f7f7.

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
<table class="allborders" width="100%">
	<thead>
		<tr class="colorhead">
			<th scope="col">Number</th>
			<th scope="col">First Name</th>
			<th scope="col">Last Name</th>
			<th scope="col">Points</th>
		</tr>
	</thead>
	<tbody>
		<tr class="color1">
			<td>1</td>
			<td>Eve</td>
			<td>Jackson</td>
			<td>94</td>
		</tr>
		<tr class="color2">
			<td>2</td>
			<td>John</td>
			<td>Doe</td>
			<td>80</td>
		</tr>
		<tr class="color1">
			<td>3</td>
			<td>Adam</td>
			<td>Johnson</td>
			<td>67</td>
		</tr>
		<tr class="color2">
			<td>4</td>
			<td>Jill</td>
			<td>Smith</td>
			<td>50</td>
		</tr>
	</tbody>
</table>

Wide Tables

The following table uses "large-table" class to get horizontal scroll when too wide i.e. wider than 640px

Number First Name Last Name Points Last Name Points Last Name Points Last Name Points Last Name Points Last Name Points
1 Eve Jackson 94 Jackson 94 Jackson 94 Jackson 94 Jackson 94 Jackson 94
2 John Doe 80 Doe 80 Doe 80 Doe 80 Doe 80 Doe 80
3 Adam Johnson 67 Johnson 67 Johnson 67 Johnson 67 Johnson 67 Johnson 67
4 Jill Smith 50 Smith 50 Smith 50 Smith 50 Smith 50 Smith 50
<table class="large-table" width="100%">
	<thead>
		<tr class="colorhead">
			<th scope="col">Number</th>
			<th scope="col">First Name</th>
			...
			<th scope="col">Points</th>
		</tr>
	</thead>
	<tbody>
		<tr class="color1">
			<td>1</td>
			<td>Eve</td>
			...
			<td>94</td>
		</tr>
		<tr class="color2">
			<td>2</td>
			<td>John</td>
			...
			<td>80</td>
		</tr>
		<tr class="color1">
			<td>3</td>
			<td>Adam</td>
			...
			<td>67</td>
		</tr>
		<tr class="color2">
			<td>4</td>
			<td>Jill</td>
			...
			<td>50</td>
		</tr>
	</tbody>
</table>

Freeze the left Header Column On Wide Tables With particular class

The following table uses "freeze-head-col" class to get the left header column to freeze while scrolling horizontally.

Each cell, in the column to be frozen, should have the attribute scope="row" in it, as shown in the sample table below.

Volcano Name Volcano Name Location Last Major Eruption Type of Eruption Volcano Name Location Type of Eruption Type of Eruption Volcano Name Location Type of Eruption
Mt. Lassen Mt. Lassen California 1914-17 Explosive Eruption California 1914-17 Explosive Eruption Explosive Eruption California 1914-17 Explosive Eruption
Mt. Hood Mt. Hood Oregon 1790s Pyroclastic flows and Mudflows Oregon 1790s Pyroclastic flows and Mudflows Pyroclastic flows and Mudflows Oregon 1790s Pyroclastic flows and Mudflows
Mt. St. Helens Mt. St. Helens Washington 1980 Explosive Eruption Washington 1980 Explosive Eruption Explosive Eruption Washington 1980 Explosive Eruption

<table class="large-table freeze-head-col" width="100%">
    <thead>
        <tr>
            <th scope="col">Volcano Name</th>
            <th scope="col">Location</th>
            <th scope="col">Last Major Eruption</th>
            <th scope="col">Type of Eruption</th>
            <th scope="col">Volcano Name</th>
            <th scope="col">Location</th>
            <th scope="col">Last Major Eruption</th>
            <th scope="col">Type of Eruption</th>
            <th scope="col">Volcano Name</th>
            <th scope="col">Location</th>
            <th scope="col">Last Major Eruption</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">Mt. Lassen</td>
            <td>California</td>
            <td>1914-17</td>
            <td>Explosive Eruption</td>
            <td>California</td>
            <td>1914-17</td>
            <td>Explosive Eruption</td>
            <td>Explosive Eruption</td>
            <td>California</td>
            <td>1914-17</td>
            <td>Explosive Eruption</td>
        </tr>
        <tr>
            <td scope="row">Mt. Hood</td>
            <td>Oregon</td>
            <td>1790s</td>
            <td>Pyroclastic flows and Mudflows</td>
            <td>Oregon</td>
            <td>1790s</td>
            <td>Pyroclastic flows and Mudflows</td>
            <td>Pyroclastic flows and Mudflows</td>
            <td>Oregon</td>
            <td>1790s</td>
            <td>Pyroclastic flows and Mudflows</td>
        </tr>
        <tr>
            <td scope="row">Mt. St. Helens</td>
            <td>Washington</td>
            <td>1980</td>
            <td>Explosive Eruption</td>
            <td>Washington</td>
            <td>1980</td>
            <td>Explosive Eruption</td>
            <td>Explosive Eruption</td>
            <td>Washington</td>
            <td>1980</td>
            <td>Explosive Eruption</td>
        </tr>
    </tbody>
</table>

Layout structures

Feature Box

This is a feature box.

It is to be used for features, call-to-action boxes, or special information.

<div class="feature-box clear-both">
   <h2>This is a feature box.</h2>

   <p>It is to be used for features, call-to-action boxes, or special information.</p>
</div>

Half-column Feature Box

This creates a feature box for "Did You Know?" kind of information, spanning only one-half of the content area. For aligning right use "callout-box-right" and for left, use "callout-box-left" class in addition to "feature-box" class.

<div class="feature-box callout-box-right">
		<h2>Did You Know?</h2>
		<p>"IMAGE CODE HERE"<br>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	</div>

2 columns

Column 1
Column 2
<div class="row">
	<div class="col-md-6">Column 1</div>
	<div class="col-md-6">Column 2</div>
</div>

3 columns with Topic boxes

Column 1
Column 2
Column 3
<div class="row">
	<div class="col-md-4">Column 1</div>
	<div class="col-md-4">Column 2</div>
        <div class="col-md-4">Column 3</div>
</div>

4 columns

Column 1
Column 2
Column 3
Column 4
<div class="row">
	<div class="col-md-3">Column 1</div>
	<div class="col-md-3">Column 2</div>
        <div class="col-md-3">Column 3</div>
        <div class="col-md-3">Column 4</div>
</div>

5 columns

Column 1
Column 2
Column 3
Column 4
Column 5
<div class="row">
	<div class="col-md-2">Column 1</div>
	<div class="col-md-2">Column 2</div>
        <div class="col-md-2">Column 3</div>
        <div class="col-md-2">Column 4</div>
        <div class="col-md-2">Column 5</div>
</div>

Floats

The float classes (left, right) can be applied in any HTML tag.

Left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 
<img alt="" class="left" src="https://ipsumimage.appspot.com/140x100" />

Right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 
<img alt="" class="right" src="https://ipsumimage.appspot.com/140x100" />

Center

<img alt="" class="center" src="https://ipsumimage.appspot.com/140x100" />

Footnotes

Sentence with footnote following.1

<p>Sentence with footnote following.<sup><a id="_ftnref1" href="#_ftn1" name="_ftnref1" title="">1</a></sup></p>
 

To return to the page content, select the respective footnote number.

1 FOOTNOTE TEXT
<div><br clear="all"/>
<p>To return to the page content, select the respective footnote number.</p>
<div id="ftn1"><sup><a id="_ftn1" href="#_ftnref1" name="_ftn1" title="">1</a></sup> FOOTNOTE TEXT</div>
<div>

Image Captions

Wrap a div around an image that has a caption. Add the class "img-and-caption-wrapper" and the classes "left" "right" or "center" depending on how the image should be aligned

Left

<div class="img-and-caption-wrapper left"></div>
Image
Read a blog post about a listening session the Mental Health and Substance Use disorder Parity Task Force held in early June, 2016.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, nec venenatis venenatis orci id et iaculis. Imperdiet eget congue enim quisque saepe lacus, duis cras augue dolor vehicula sapien nunc, aliquam metus bibendum, sit sit non amet odio nullam arcu, sed nam quo auctor primis ipsum curabitur. Sed tempus vestibulum gravida, amet purus bibendum, placerat hendrerit nam et donec felis. Suspendisse leo in, nibh semper torquent et mi, id eget, mauris praesent nullam volutpat egestas neque donec. Integer id lacus mi ligula mi torquent. Sed massa commodo sed, orci bibendum cras, culpa litora egestas est et, odio nec nulla, dapibus nibh modi commodo massa magna ligula. Erat sed magna nullam vel duis est, eu lorem curabitur in sociis. Commodo tempor et lobortis pellentesque, posuere dui neque sit pede pede pede, ut nec et, vitae aliquam conubia ultricies nulla, quis urna ut maecenas. Donec vestibulum curae scelerisque lacinia, metus gravida ligula pharetra ut. Laoreet natoque ligula, amet placerat, orci neque.

 

Center

<div class="img-and-caption-wrapper center"></div>
Image
Read a blog post about a listening session the Mental Health and Substance Use disorder Parity Task Force held in early June, 2016.

Donec vestibulum curae scelerisque lacinia, metus gravida ligula pharetra ut. Laoreet natoque ligula, amet placerat, orci neque. Donec vestibulum curae scelerisque lacinia, metus gravida ligula pharetra ut. Laoreet natoque ligula, amet placerat, orci neque. Donec vestibulum curae scelerisque lacinia, metus gravida ligula pharetra ut. Laoreet natoque ligula, amet placerat, orci neque.

 

Right

<div class="img-and-caption-wrapper right"></div>
Image
Read a blog post about a listening session the Mental Health and Substance Use disorder Parity Task Force held in early June, 2016.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, nec venenatis venenatis orci id et iaculis. Imperdiet eget congue enim quisque saepe lacus, duis cras augue dolor vehicula sapien nunc, aliquam metus bibendum, sit sit non amet odio nullam arcu, sed nam quo auctor primis ipsum curabitur. Sed tempus vestibulum gravida, amet purus bibendum, placerat hendrerit nam et donec felis. Suspendisse leo in, nibh semper torquent et mi, id eget, mauris praesent nullam volutpat egestas neque donec. Integer id lacus mi ligula mi torquent. Sed massa commodo sed, orci bibendum cras, culpa litora egestas est et, odio nec nulla, dapibus nibh modi commodo massa magna ligula. Erat sed magna nullam vel duis est, eu lorem curabitur in sociis. Commodo tempor et lobortis pellentesque, posuere dui neque sit pede pede pede, ut nec et, vitae aliquam conubia ultricies nulla, quis urna ut maecenas. Donec vestibulum curae scelerisque lacinia, metus gravida ligula pharetra ut. Laoreet natoque ligula, amet placerat, orci neque.

 

Links in Image Captions

Note: First add your caption without the link, add your image to the WYSIWYG, then add your link in the code view of the WYSIWYG editor, with the div class "linked-caption"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div class="linked-caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

 

Sample Images & Icons

Sample image 1

 

Sample image 2
Sample image 3
Sample image 4
Sample image 5
Content created by Assistant Secretary for Public Affairs (ASPA)
Content last reviewed