Style Guide

• Overview
• Web Writing
• File Formats
• Markup
• CSS
• Patterns

Patterns

This page gives patterns you can use on your pages for specific types of links (e.g., disclaimer links), or for navigation items within the content area. If you would like to use modified versions of these patterns, please check with your Web Liaison before doing the work. If your modification is useful, we'll add it to this page for others to use.

Multipage document with Next, Previous, TOC links

Normally, you'd use the Article template to create a multipage document with automatically generated Next/Previous links and a printable version of the entire document. However, in cases where you need to make each page a separate file, you can use the format here.

<hr>
<ul class="pager">
<li><a href="x.html">Previous</a></li>
<li><a href="index.html">Table of Contents</a></li>
<li><a href="y.html">Next</a></li>
</ul>

Horizontal links with separators

This type of navigation can be used to connect a set of related pages of any type, such as pages for a unit within an office, or documents from a conference. Don't use these links on program pages; the links in the program subnavigation serve the same purpose.

<hr>
<p align="center"><a href="agenda.html">Conference Agenda</a> | 
<a href="speakers.html">Featured Speakers</a> | 
<a href="keynote.html">Keynote Address</a> | 
<a href="presentations.html">Presentations</a> | 
<a href="report.html">Final Conference Report</a>

Horizontal links with highlights

These are functionally the same as the horizontal links with separators above, but we can use CSS to highlight the link of the page the user is currently viewing.

<hr>
<ul class="nav nav-pills">
<li class="active"><a href="agenda.html">Conference Agenda</a></li>
<li><a href="speakers.html">Featured Speakers</a></li>
<li><a href="keynote.html">Keynote Address</a></li>
<li><a href="presentations.html">Presentations</a></li>
<li><a href="report.html">Final Conference Report</a></li>
</ul>

Breadcrumbs

"Breadcrumbs" allow users to navigate up and down in a hierarchal structure. On ED.gov, they're most likely to be useful on office pages.

Don't use breadcrumbs on program pages; instead, make sure you're using the program subnavigation categories correctly, so that users can get to the important program information from each page. (See the Program Site Guidance for more on what belongs in each category.)

Note that breadcrumbs need to be at the top of the main section of the page. On offices pages, they'll be below the office bubble, but above the other content.

<ol class="breadcrumb">
<li><a href="/about/offices/list/poc/">Office Home</a></li>
<li><a href="/about/offices/list/poc/prog/">Program Office</a></li>
<li class="active">Contact Program Office</li>
</ol>

Resource box and What's New box

On some pages, you may want to draw attention to one or two related pages. We use a "More Resources" box which can be used on any templated page. The example below shows two links, with a dividing line between them.

<!--begin Resources box-->
<div class="resourcebox">
<div class="resourcebox-title">More Resources</div>

<!--resource item start-->
<div class="resourcebox-item">
<a href="x.html">Press Release</a></div>
<!--resource item end-->

<!--resource item start-->
<div class="resourcebox-item">
<a href="y.html">Status Report</a></div>
<!--resource item end-->

</div>
<!--end Resources box-->

You can add links to non-HTML items in the Resource box. Below is an example of a Resource box with links to non-HTML items.

<!--begin Resources box-->
<div class="resourcebox">
<div class="resourcebox-title">More Resources</div>

<!--resource item start-->
<div class="resourcebox-item">
Status Report<br>
<span class="glyphicon glyphicon-file text-primary"></span> <a href="x.pdf">PDF (120K)</a> | <a href="x.doc">MS Word (50K)</a>
</div>
<!--resource item end-->

<!--resource item start-->
<div class="resourcebox-item">
<a href="y.html">Status of Internal Audits by Office</a><br>
<span class="glyphicon glyphicon-file text-primary"></span> <a href="y.pdf">PDF (55K)</a> | <a href="y.xls">MS Excel (18K)</a>
</div>
<!--resource item end-->

<!--resource item start-->
<div class="resourcebox-item">
<a href="x.html">Secretary's Comment</a><br>
<span class="glyphicon glyphicon-volume-up text-primary"></span> <a href="x.mp3">MP3 (210K; 7 seconds)</a>
</div>
<!--resource item end-->

</div>
<!--end Resources box-->

You can also use the Resource box format to highlight important news on office or program pages. We recommend that you keep your news items as short as possible, and not use more than three items in the box. The box should not be longer than the body content.

<!--begin What's New box-->
<div class="resourcebox">
<div class="resourcebox-title">What's New</div>

<!--news item start-->
<div class="resourcebox-item">
<a href="x.html">Competition</a> opened 12/23/03; closes 03/02/04<br>
</div>
<!--news item end-->

<!--news item start-->
<div class="resourcebox-item">
The <a href="y.html">application package</a> is now available<br>
<span class="glyphicon glyphicon-file text-primary"></span> <a href="x.pdf">PDF (100K)</a> | <a href="x.doc">MS Word (100K)</a>
</div>
<!--news item end-->

</div>
<!--end What's New box-->

Page-internal navigation

If you have a page that has several topics, you may want to provide links at the top of the page to those topics, using HTML anchors. One easy way to do this is to use TeamSite to create a FAQ Article, which can actually be used for any type of content, not just FAQs. (See "How to Post FAQs" for more information, or contact the OCO Web Team.)

If the FAQ Article won't work for your content, you can manually create the navigation, following the pattern below. The order of items in the list must match the order of the topics on the page, and all the links must be to anchors on that page, not to other pages:

<ul>
<li><a href="#topic1">Topic 1</a></li>
<li><a href="#topic2">Topic 2</a></li>
<li><a href="#topic3">Topic 3</a></li>
<li><a href="#topic4">Topic 4</a></li>
</ul>

You may also want to use "Top" links at the end of each topic to return to your navigation list. See the section on Top-of-page links for patterns you can use.

Alternate format links

As mentioned in the section on File Formats, you must include the file size for the alternate format documents you link to. To help with this, there's a standard way of writing Alternate Format links--it includes both the file type and the file size, and can be used for multiple file formats:

<span class="glyphicon glyphicon-file text-primary"></span> <a href="x.pdf">PDF (100K)</a> | <a href="x.doc">MS Word (100K)</a>

If you are linking to a single alternate format document, and want to put the link on the text describing the document, you may use this variant link style that puts the file type and file size after the link:

ED has posted the <a href="x.pdf">Action Plan</a> [<strong>PDF,</strong> 409KB] for comment.

For audio and video links, you should also include the running time of the audio or video, and use the appropriate icon:

<span class="glyphicon glyphicon-film text-primary"></span> <a href="x.smil">Real 
Player</a> (30MB; 9 minutes, 12.3 seconds)

<span class="glyphicon glyphicon-volume-up text-primary"></span> <a href="x.mp3">MP3</a> (210K; 7 seconds)

Top of page links

On long pages, it can be helpful to provide a "Top" link in between sections, or at the bottom of the page. There's a standard format "Top" link that you can use:

<a href="#skipnav2">Top</a>

You can also combine this type of link with the up arrow icon:/p>

<a href="#skipnav2"><span class="glyphicon glyphicon-chevron-up text-primary"></span> Top</a>

Disclaimer links

The ED.gov Management and Publishing Policies specify that you must post or link to a disclaimer if you're linking to external content (see "Linking to External Content". Use this format for the link:

<a href="/notices/disclaimer/index.html"><span class="label label-tertiary">Disclaimer</span></a>

Last Modified: 2/1/2017