Text
Header styles
Headers establish a visual and semantic hierarchy when nested correctly. For example, an H3 follows an H2 when it denotes a section contained within the H2's content. Headings should not be used solely based on their visual presentation.
H1s introduce pages or large sections. H2s and H3s introduce subsections. H4s are typically only used to introduce a set of links or other secondary content.
Example & Code
H1 Header 36px
H2 Header 24px
H3 Header 21px
H4 Header 16px
<h1>H1 Header 36px</h1>
<h2>H2 Header 24px</h2>
<h3>H3 Header 21px</h3>
<h4>H4 Header 16px</h4>
Headers with subtitles
If a subtitle is needed below a header, the margin is decreased.
Example & Code
h1 Header + class="sub"
Headers with subtitles have smaller margins
<h1 class="sub">h1 Header + class="sub"</h1>
h2 Header + class="sub"
Headers with subtitles have smaller margins
<h2 class="sub">h2 Header + class="sub"</h2>
h3 Header + class="sub"
Headers with subtitles have smaller margins
<h3 class="sub">h3 Header + class="sub"</h3>
h4 Header + class="sub"
Headers with subtitles have smaller margins
<h4 class="sub">h4 Header + class="sub"</h4>
Headers with rules
If a header introduces a list of links or a series of form fields, a border-bottom is added.
Example & Code
h1 Header + class = "rule"
<h1 class="rule">h1 Header + class="rule"</h1>
h2 Header + class = "rule"
<h2 class="rule">h2 Header + class="rule"</h2>
h3 Header + class = "rule"
<h3 class="rule">h3 Header + class="rule"</h3>
h4 Header + class = "rule"
<h4 class="rule">h4 Header + class="rule"</h4>
Body copy
HealthCare.gov’s global body copy default font size is 16px with a line height of 24px.
Example & Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu urna sit amet dolor tincidunt luctus sit amet ac risus. Aenean nunc ligula, sodales quis urna vitae, varius gravida orci.
<p>...</p>
Popovers
Popovers are used to define terms or program names that consumers might not be familiar with. All popovers are oriented with data-placement="bottom" to avoid overlaying content above the term or program name and to keep the popover from falling off the page.
Example & Code
An example of a popover minimum requirements.
<a role="button" href="#" class="glossary-term help-popover" data-title="Popover title" data-content="Popover content">Example popover</a>
Link lists
Link lists are used to provide links to important actions like appealing a marketplace decision, as well as links to pages related to the current page.
Example & Code
Take Action
<h4 class="rule">Take Action</h4>
<ul class="link-list">
<li><a href="#" title="Link title">Link title</a></li>
<li><a href="#" title="Link title">Link title</a></li>
</ul>