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).

One.
Two.
Three.
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

One.
1. list11
2. list12
3. list13
Two.
Three.
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

TWEET THIS

<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>

Links

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	Location	Last Major Eruption	Type of Eruption	Volcano Name	Location	Type of Eruption	Type of Eruption	Volcano Name	Location	Type of Eruption
Mt. Lassen	California	1914-17	Explosive Eruption	California	1914-17	Explosive Eruption	Explosive Eruption	California	1914-17	Explosive Eruption
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	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

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

Right

<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.¹

<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.

¹ 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>

Read a blog post about a listening session

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>

Read a blog post about a listening session

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>

Read a blog post about a listening session

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>

Slideshow

There are two items that are needed to add the slideshow to a page: a script tag with the JavaScript array containing the image list and a div with the class "hhs-screen-container". Place the script tag at the top of the page. Place the div at the point in the HTML where there the slideshow will reside.

<script>
    var imageList = [];
    imageList[0] = ["https://c1.staticflickr.com/3/2850/33876534555_7223ae93d6_n.jpg", "Caption for the first slide"];
    imageList[1] = ["/sites/default/files/DT-1349-iamhhs-hhs-billboard-2-747x438px.jpg", "Caption for the second slide"];
    imageList[2] = ["/sites/default/files/alex-azar-ii-3300x4200.JPG", "Caption for the third slide"];
    imageList[3] = ["/sites/default/files/opioids-640x320.jpg", "Caption for the fourth slide"];
    imageList[4] = ["/sites/default/files/billboard-nvac.jpg", "Caption for the fifth slide"];
    imageList[5] = ["https://c1.staticflickr.com/4/3842/33876533405_c477e65346_n.jpg", "Caption for the sixth slide"];
    imageList[6] = ["/sites/default/files/May-11-Rollout-HHSgov-main-billboard-.jpg", "Caption for the seventh slide"];
</script>
<div class="hhs-screen-container">&nbsp;</div>

Sample Images & Icons

Content created by Assistant Secretary for Public Affairs (ASPA)
Content last reviewed on January 20, 2017