What follows is a style guide and pattern library, showing many allowed elements for EPA.gov.  You should also:

• Follow EPA Web Standards
• Take Drupal Web CMS Training

Table of Contents

---

Boxes

Boxes are used to highlight specific web content. Each box style has specific content requirements and should be used appropriately.

Related link:

• Web Standard: Boxes

Top of Page

---

Related Info Box

Top of Page

---

Highlight Box

Top of Page

---

News Box

Top of Page

---

Alert Box

Top of Page

---

Simple Box

Top of Page

---

Multipurpose Box

Top of Page

---

Special One Item Box

Top of Page

---

No Style Box

Top of Page

---

RSS Feed Box - Limited to Webmasters

Top of Page

---

Twitter Box - Limited to Webmasters

Used primarily on microsite homepages, to display official EPA Twitter accounts tweets or tweets related to a specific hashtag. Due to Twitter's API restrictions, we use Twitter embeddable timelines. Contact your Web Council representative to find out how to embed a Twitter feed into your home page.

An embedded feed of an official EPA Twitter account will show all tweets sent by EPA but should not show replies or retweets. An embedded feed based on a specific EPA hashtag is possible but should first be reviewed and approved by the Office of Web Communications in OPA. A hashtag feed requires additional set-up within a Twitter account, and then regular monitoring for content.

See the Twitter how-to page for an example of an embedded Twitter timeline.

How to:

• In Panelizer, add content, then select No Style Box from the Box Style dropdown menu.
  • Don't use the Twitter box: it will add duplicate code and imagery.
• Webmasters must add appropriate Twitter code and JavaScript.

Top of Page

---

Blog Box - Limited to Webmasters

Top of Page

---

Quiz Box - Limited to Webmasters

Top of Page

---

Clearing Floats

When adding boxes and images that are floated to the left or right, you can add content that “clears” these floated elements by adding one of the following classes:

• clear-left
• clear-right
• clear-both

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet aliquet sollicitudin. In lectus metus, rhoncus ut volutpat vel, aliquam nec mauris. Donec vestibulum consequat metus, a eleifend dui porttitor at. Nam cursus porttitor cursus. Cras vulputate adipiscing tortor, sed rutrum velit scelerisque non. Etiam iaculis accumsan sodales. Donec dolor eros, consectetur id aliquet quis, imperdiet sed lorem. In eget libero in ante molestie ullamcorper ut nec diam. Cras semper blandit est, id cursus magna porttitor quis. Vivamus quis dui eu purus ullamcorper adipiscing. Suspendisse rhoncus condimentum bibendum. Suspendisse vulputate neque quis tortor ornare elementum. Integer fringilla consectetur nunc, a mollis risus adipiscing vitae. Nulla varius egestas bibendum. Maecenas orci ipsum, feugiat nec posuere eu, facilisis malesuada mi.

Duis ut ante est. Suspendisse id tortor augue. Ut mauris dolor, elementum sed faucibus vitae, malesuada nec libero. Sed sed ipsum urna. Duis sed turpis ipsum, vel accumsan eros. Morbi in dolor quam, quis interdum felis. Aliquam commodo leo quis orci mattis eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac leo ac lectus fermentum lobortis. Phasellus dapibus quam id sem congue non aliquet nulla volutpat. Ut ullamcorper nulla nibh. Proin dapibus scelerisque nulla. Nunc pulvinar, odio in malesuada condimentum, libero justo consectetur odio, a volutpat risus orci nec augue. Nam eget tempor dolor. Aliquam in varius elit

How to:

• First, add your content.  Then add your floated images (or boxes, etc.).
• Disable rich-text and add the appropriate clear to the end of the <div> class.
  • Match your clear to your float.  If you float right, then clear right.
  • Image code example: <div class="figure image mode-media_large caption right clear-right">
  • Box code example: <div class="box multi related-info clear-left">

Top of Page

---

Color Palette

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

• Aqua #02bfe7, Darkest Aqua #046b99, Dark Aqua #00a6d2, Light Aqua #9bdaf1, Lightest Aqua #e1f3f8
• Base #212121
• Blue #0071bc, Darkest Blue #112e51, Dark Blue #205493
• Gold #fdb81e, Light Gold #f9c642, Lighter Gold #fad980
• Gray #5b616b, Dark Gray #323a45, Light Gray #aeb0b5, Lighter Gray #d6d7d9, Lightest Gray #f1f1f1
• Green #2e8540, Light Green #4aa564, Lighter Green #94bfa2, Lightest Green #e7f4e4
• Red #e31c3d, Darkest Red #981b1e
• White #fff, Dark Warm Gray #494440, Light Warm Gray #e4e2e0

For more on these colors, please see: U.S. Web Design Standards color page.

Top of Page

---

Columns

Using the Panelizer layouts and boxes to create columns is easier for users who prefer not to work in code.  However, columns can also be created by manually adding the same code from the image gallery style.

There are two components to the grid system: rows and columns. Rows are horizontal and can contain up to five columns. Columns are vertical and are placed inside rows. Rows can also be placed inside columns to create nested layouts, but currently only the first level of columns is responsive.

Column widths can be set in two ways. For equal-width columns, you can specify the number of columns inside a row using the cols-x class, where x is the number of columns (1-5).

Here's the markup for creating three equal-width columns:

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

You can also specify the width of a column by using the size-xofy class, where x/y is the ratio of column width to row width. Here's the markup for creating three columns of different widths:

<div class="row cols-3">
 <div class="col size-1of4">Column 1 - 25% wide</div>
 <div class="col size-1of2">Column 2 - 50% wide</div>
 <div class="col size-1of4">Column 3 - 25% wide</div>
</div>

Top of Page

---

Disclaimers

Exit EPA

Use only for links to external non-federal government sites. Follow the External Site Links procedure.

For lists of external links or pages with multiple exiting links, use the multiple exiting links disclaimer.

Examples

Exit

Multiple exiting links disclaimer: The following links exit the site Exit

How to:

• First, add content to the page.
• Add the disclaimer using the Drupal WebCMS editor exit button.
• For the multiple exiting disclaimer:
  • Before the list of external links, add the disclaimer using the Drupal WebCMS editor multiple exit button.

Related links:

• External Site Links Procedure

Top of Page

---

EPA Intranet

Use only for links to internal EPA sites.

Examples

Intranet

Multiple exiting links disclaimer: The following links are internal Intranet

How to:

• First, add content to the page.
• Add the disclaimer using the Drupal WebCMS editor exit button.
• Modify the word "Exit" to "Intranet" and change the link to /web-policies-and-procedures/intranet-disclaimer
• For the multiple exiting disclaimer:
  • Before the list of external links, add the disclaimer using the Drupal WebCMS editor multiple exit button.

Top of Page

---

File Info

Provides file information for PDF and other non-HTML files, letting users known the size and type of file.

Examples:

This is the document title (PDF) (xx pp, yy K, About PDF)

This is the document title (DOC) (xx pp, yy K)

How to:

• Add the disclaimer using the Drupal WebCMS editor file info button.
  • For files other than PDF, delete the “About PDF” link (e.g., Word or Excel documents).
  • Write over the default information to include the specific number of pages and file size.
  • You may need to disable rich-text and manually add the <span class="fileinfo"> tags.
    • <span class="fileinfo">(xx pp, yy K, <a href="/home/pdf-files">About PDF</a>)</span>

Related Links:

• Web Standard: PDF Links (linking to PDF files)

Top of Page

---

New! Icon

Use “NEW!” when you would like to draw attention to new content on the page.

• Use anywhere on any page.
• Too many, of course, dilutes the message/impact.
• The New Icon automatically disappears after 30 days.

Example:

• First, add the content to page.
• Highlight the new content.
• Select the Drupal WebCMS editor new icon button.

Related links:

• Web Standard: New! Icon
• Adding the New! Icon

Top of Page

---

PDF Disclaimer

Follow the Web Standard for PDF Links.

• Use the standard disclaimer for a page that contains multiple PDFs, right before the list of PDFs or immediately before the first reference to a PDF.
• When the long version is problematic, or where you have only a few PDFs linked, you may use the inline disclaimer, which links to EPA's “About PDF” page. Only required once per page.

Example:

You may need a PDF reader to view some of the files on this page. See EPA’s PDF page to learn more.

Inline Disclaimer: This is the document title (PDF) (22 pp, 245 K, About PDF)

How to:

• For the standard disclaimer, apply by selecting the Drupal WebCMS editor PDF disclaimer button.
• For the inline disclaimer, apply by selecting the Drupal WebCMS editor file info button.
  • Use the Inline disclaimer in panels or boxes.

Related links:

• Web Standard: PDF Links (linking to PDF Files)
• Web Standard: PDF: When to Use, Document Metadata, Info Required for PDF Sections

Top of Page

---

Special File Formats

Use to direct users to a page detailing free viewers for files in the following formats: Microsoft Excel, PowerPoint, Publisher & Word, KML, Flash, Quicktime, Windows Media, zip.

Example:

Free Viewers

How to:

Select the EPA Free Viewers button from the Drupal WebCMS editor.

Top of Page

---

Search EPA Archives

Use for links to EPA Web Archives home page.

Example:

Search EPA Archive

How to:

Select the EPA Archive Link button from the Drupal WebCMS editor. 

Related Link:

• Web Standard: Archive

Top of Page

---

Forms

Forms are used for things like submitting questions or comments, registration, or requesting services. In Drupal WebCMS, forms are created using the Webforms content type. Follow the Forms Web Standard.

How to:

• From the web area home page, click Create Content.  
• Select the Webforms content type and add required content and metadata to the page.  Click Save.
• After creating the form page, select the Webforms tab to add form components (see below for various form components and styles).
• Improve the accessibility of your forms by using default values in components, accurate names and labels, and clear descriptions.

Related links:

• Web Standard: Forms
• Web Standard: Contact Us Page and Links

Top of Page

---

Select list

Creates a dropdown list of options.

Example:

How to:

• First, create a Webform.
• Under the Webform tab, enter a name for the new component and pick Select Options from the Type dropdown. Click Add.
• In the Edit Component screen, enter information as needed.
• Under Display, click Listbox to create the dropdown menu. Click save.

Top of Page

---

Radio options

For when users need to select only one option from a list.

Example:

How to:

• First, create a Webform.
• Under the Webform tab, enter a name for the new component and pick Select Options from the Type dropdown. Click Add.
• In the Edit Component screen, enter information as needed. Radio list is the default setting for this type of component, do not select Multiple or Listbox as this creates checkboxes and select lists. Click save.

Top of Page

---

Checkboxes

Can be used to allow users to select multiple options from a list.

Example:

How to:

• First, create a Webform.
• Under the Webform tab, enter a name for the new component and pick Select Options from the Type dropdown. Click Add.
• In the Edit Component screen, enter information as needed. Select Multiple above the Options field to create checkboxes. Click save.

Top of Page

---

Textfield

One line areas that allow user to input text. For multiple lines, use a textarea.

Example:

How to:

• First, create a Webform.
• Under the Webform tab, enter a name for the new component and pick Textfield from the Type dropdown. Click Add.
• In the Edit Component screen, enter information as needed. Click Save.

Top of Page

---

Textarea

Text field that spans multiple lines.

Example:

How to:

• First, create a Webform.
• Under the Webform tab, enter a name for the new component and pick Textarea from the Type dropdown. Click Add.
• In the Edit Component screen, enter information as needed.

Top of Page

---

Report a Violation Badge

The "Report a Violation" badge and link are required on the web area contact us form.

Example:

Please see the example to the right.

How to:

When a new web area is created, the badge is automatically part of the web area contact us form. For contact us forms that do not have the badge, copy the HTML below.

<div class="box right">
  <div class="slat-image">
    <a href="/tips"><img alt="Report an environmental violation" src="/sites/all/themes/epa/img/badge.gif" /></a>
  </div>
  <div class="slat-content">
    <div><strong><a href="/tips">Report a Violation</strong></div>
    <p><small>Report possible violations of environmental laws and regulations.</small></p>
  </div>
</div>

• In the code view, place the code before the mailing address.

Top of Page

---

Buttons

The example for the submit button applies to all buttons.

• Blue background, on rollover darker blue.
• White text.

Example:

How to:

• Buttons are automatically added to the bottom of Webforms pages.

Top of Page

---

Lists

Unordered list

Unordered lists are bullet lists.  Use unordered lists normally. In the main content areas for Microsite homepages, the bullets are styled differently.

Example:

• magna
• cras
• gravida
  • pluribus
  • etna
  • aliquam
• lorem
• egestas

How to:

• First, add your content.
• Select or highlight text.
• Click the Drupal WebCMS editor Insert/Remove Bulleted List button.
• To nest a list item, highlight the list item and click the Increase Indent button.

Top of Page

---

Ordered list

Ordered lists are numbered lists. Use ordered lists normally.

Example:

1. velit
2. eu
3. gravida
   1. pluribus
   2. etna
   3. aliquam
4. elit
5. sit
6. G

How To:

• First, add your content.
• Select or highlight text.
• Click the Drupal WebCMS editor Insert/Remove Numbered List button.

Top of Page

---

Roomy List

To increase the readability of lists with long blocks of text, multiple paragraphs, or links that wrap, the Roomy class adds space between list items.

Example:

• The British Isles is an archipelago consisting of the two large islands of Great Britain and Ireland, and many smaller surrounding islands.
• Great Britain is the largest island of the archipelago. Ireland is the second largest island of the archipelago and lies directly to the west of Great Britain.
• The full list of islands in the British Isles includes over 1,000 islands, of which 51 have an area larger than 20 km.

How to:

• Create an unordered, or bullet, list.
• Select or highlight your list.
• Select List, roomy from the Styles dropdown menu.

Top of Page

---

Definition list

The <dl> element is for another type of list called a definition list. Instead of list items, the content of a <dl> element consists of <dt> (Definition Term) and <dd> (Definition description) pairs. Definition lists are commonly used for questions (<dt>) and answers (<dd>), or for defining terms. They are also good for organizing content into parent child relationships (e.g., annotated A-Z lists)

Example:

This is a term.

This is the definition of that term, which both live in a <dl>.

Here is another term.

And it gets a definition too, which is this line.

Here is term that shares a definition with the term below.

Here is the defined term.

<dt> terms may stand on their own without an accompanying <dd>, but in that case they share descriptions with the next available <dt>. You may not have a <dd> without a parent <dt>.

How to:

• Disable rich-text and add the <dl><dt><dd> tags, and content, as needed.

Top of Page

---

Unordered list, pipeline

These are horizontal lists, separated by a pipe. This kind of list should only be used for pagination or simple menu structures. They should never be used to provide tertiary navigation to set of related, separate content because we discourage the use of tertiary navigation.

Example:

• This is a link
• Active Link
• Lorem link
• Dolor link two
• Here is a link

How to:

• Create an unordered, or bullet, list.
• Select List, pipeline in the styles drop down menu.

Usability/Accessibility Tip: Keep in mind that users can scan vertical lists faster than horizontal ones.

Top of Page

---

On This Page/Table of Contents

A title with a list immediately beneath it, followed by an <hr>.   Always use "id element" when making anchor links in the WebCMS.

• On This Page Standard
• How to make On This Page/Table of Contents in the WebCMS

Example:

• page section anchor link
• page section anchor link
• page section anchor link

---

How to:

• First, enter a line of text for the title
• Beneath it, create your list.
• Under the list, add an <hr> using the Drupal WebCMS editor Insert Horizontal Line button.
• Highlight the title and select Normal (DIV) from the format menu dropdown. This removes the space between the title and the list.

Related link:

• Web Standard: On this Page/ Table of Contents.

Usability/Accessibility Tip: Adding a table of contents helps users determine right away that your page contains the desired information. It particularly helps screenreader users navigate your content quickly and easily.

Top of Page

---

Images and Graphics

Images uploaded in the Drupal WebCMS editor can be formatted to different responsive sizes, linked to the original size image, and used for box headers. Follow the graphics standards for all images.

It matters where you place an image. Images will never break outside the boundaries of its parent elements, like boxes, columns or panels.

Max-width dimensions for images by their format:

• Thumbnail: 96px
• Small: 160px
• Medium: 448px
• Large: 928px

Note that these are the largest *possible* dimensions in the Drupal Web CMS. Images sizes must comport with our web standard on images.

Each image you upload gets scaled; thumbnails are also cropped:

• Thumbnail: scale and crop; no wider or taller than one column at 20%
• Small: scale; no wider or taller than one column at 20%
• Medium: scale; no wider or taller than one column at 50%;
• Original: scale; no wider than the widest it can be (928px)

Homepage images:

Any size image will be scaled and crop to the available area. At full desktop screen width, your images will measure:

• Resource directory homepage images: 325px wide x 100px high
• Microsite banners: 731px wide x 350px high

You should upload images that are those dimensions or larger. If you upload larger sizes, retain the same aspect ratio. See: Microsite Homepage Styles.

Related links:

• Web Standard: Graphics
• Web Standard: Graphic Logos
• Photos to use on EPA sites (Intranet)

Top of Page

---

Image, with caption

In basic pages, images can be floated left or right or centered.

Follow the Web Standards for graphics and images (see Images and Graphics).

Example:

How to:

• Click the Drupal WebCMS editor Add Files and Images button.
• Upload a new file, or browse for images in My Files or View Library.
  • When uploading a new file, enter a descriptive title for the link text. Add tags to the keywords field so that you can search or browse for the file again.
• On the option screen:
  • select the appropriate format
  • link to the original image (good for large images)
  • select the image alignment
  • and add a caption and alternative text, as needed.

Top of Page

---

Image, gallery

Multiple images, displayed in a grid.

Example:

Example code for a three image gallery:

<div class="row cols-3">
  <div class="col">
  [image]
  </div>
  <div class="col">
  [image]
  </div>
  <div class="col">
  [image]
  </div>
</div>

How to:

• Webmasters must add appropriate code to create up to five columns:
• First, use the Add Files and Images button to add up to five images to the page
  • Disable rich-text and wrap the set of images in <div class="row col-5">
    • Note: replace the '5' with the number of columns you want (up to five)
  • Inside the col-5 div, wrap each image in <div class="col">

Top of Page

---

Colorbox - Limited to WebMasters

See some examples of Colorbox and what you can do with it.

How to:

• Webmasters add code and JavaScript. See: JavaScript: Colorbox

Top of Page

---

Widgets Styles

Iframe

An Iframe can be added to any page. It has no associated styles (borders, background colors, etc.), since the content pulled into the space is likely to be highly stylized.  Remember to use https:// for EPA assets. 

Note: YouTube videos get special treatment: embed the Privacy-enhanced version.

Example

How to:

• In the Drupal WebCMS editor, click the IFrame button.
• In the iframe window, enter values as needed (URL, width and height, alignment, etc.)
• If you're in the WebCMS, you might not be able to see some iframe content because you're pulling in insecure (HTTP) content into a secure (HTTPS) page. Either use the HTTPS version or, if none is available, click on the little "shield" (on the upper left for FF and upper right for Chrome) that allows you to "pass through" the insecure content. The iframe will always be visible once you publish the page.
• Disable rich-text and change to scrolling=”auto” – Drupal currently just gives the option of either scrolling=”yes” or scrolling=”no”
• Disable rich-text.  Add a title to the iframe.  title="This is the iframe title" Add it in the src code in the WebCMS.

Usability/Accessibility Tip: Be sure to include descriptive text in the Title attribute for screenreaders.

Top of Page

---

Widgets and Styles Under Development

• video style standard, stay away from overlays because of accessibility issues.
• video slideshow
• Slats: a standard format of an image with text beside it. On microsite homepages will have a gradient background, basic pages do not have gradient.

We will not be implementing a Facebook widget style. Facebook widgets require using code that has privacy issues.

Top of Page

---

Text

Emphasis (italics)

The <em> element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is solely required for stylistic differentiation, the <i> element may be preferable.

Example:

You simply must try the flat white!

How to:

• First, add your content.
• Select or highlight text to be styled.
• Use the Drupal WebCMS editor Italic button.
• To insert an <i>, disable rich-text, then add code.

Top of Page

---

Strong (bold)

The <strong> element is used to denote text with strong importance. Where bolding is solely used for stylistic differentiation, the <b> element may be preferable.

Example:

Don’t stick nails in the electrical outlet.

How to:

• First, add your content.
• Select or highlight text to be styled.
• Use the Drupal WebCMS editor Bold button.
• To insert a <b>, disable rich-text, then add code.

Top of Page

---

Small

The <small> element is used to represent disclaimers, caveats, legal restrictions, or copyrights (commonly referred to as ‘small print’). It can also be used for attributions or satisfying licensing requirements. The <small> element replaces epaltsans.

Example:

Copyright © 1922-2012 Acme Corporation. All Rights Reserved.

How to:

• First, add your content.
• Select or highlight text.
• Select Small from the Styles dropdown menu.

Top of Page

---

Mark

The <mark> element is used to highlight text for reference purposes. When used in a quotation it indicates a highlight not originally present but added to bring the reader’s attention to that part of the text. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user’s current activity.

Example:

I also have some kittens who are visiting me these days. They’re really cute. I think they like my garden! Maybe I should adopt a kitten.

How to:

• First, add your content.
• Select or highlight text to be marked.
• Select Mark from the Styles dropdown menu.

Top of Page

---

Warning

The warning class is used to highlight text you want highlighted for warning/alert purposes. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its relevance to the user’s current activity.

Example:

Please be careful downloading this application.

How to:

• First, add your content.
• Select or highlight text to be marked.
• Select Warning from the Styles dropdown menu.

Top of Page

---

Abbreviation

The <abbr> element is used for any abbreviated text, whether it be acronym, initialism, or otherwise. Generally, it’s less work and useful (enough) to mark up only the first occurrence of any particular abbreviation on a page, and ignore the rest. Any text in the title attribute will appear when the user’s mouse hovers the abbreviation (although notably, this does not work in Internet Explorer for Windows.)

Example:

BBC, HTML, and Staffs.

How to:

• Click the Drupal WebCMS editor Insert Abbreviation button.
• In the abbreviation window, complete the abbreviation and explanation fields.

Top of Page

---

Code

The <code> element is used to represent fragments of computer code. Useful for technology-oriented sites, not so useful otherwise.

Example:

When you call the activate() method on the robotSnowman object, the eyes glow.

Used in conjunction with the pre element:

function getJello() {
  echo $aDeliciousSnack;
}

Shown with line numbers:

1. <?php
2. echo 'Hello World!';
3. ?>

How to:

• First, add your content.
• Select or highlight your code text.
• Select Code using the Styles dropdown menu.

Top of Page

---

Super/ Subscripts

The <sup> element represents a superscript and the <sub> element represents a subscript. These elements must be used only to mark up typographical conventions with specific meanings, not for presentation or visual appeal. As a guide, only use these elements if their absence would change the meaning of the content.

Examples:

The coordinate of the ith point is (x_i, y_i). For example, the 10th point has coordinate (x₁₀, y₁₀).

f(x, n) = log4xn

How to:

• First, add your content.
• Select or highlight text to be styled.
• Click the Drupal WebCMS editor Superscript or Subscript buttons.

Top of Page

---

Blockquote

The <blockquote> element represents a section of content that is being quoted from another source.

Do not use blockquote for presentation, as a means to indent text. This negatively impacts the accessibility of your page.

Example, with cite:

Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.

Winston Churchill, in a speech to the House of Commons. 11th November 1947

How to:

• First, add your content.
• Select or highlight the content, including the author or citation.
• Select the Drupal WebCMS editor Blockquote button.
• Use <cite> for the title of the work, from the Styles dropdown menu.

Top of Page

---

Pull quote

A pull quote is a quotation or excerpt taken from the page's content, typically placed in a larger or distinctive typeface on the same page.

Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. —Author’s name goes here.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How to:

• First, add your content.
• Select or highlight the text, including the author’s name or citation information.
• From the Styles dropdown menu, select Pullquote.
• In front of the author's name, insert a line break <br /> by hitting shift and enter.
• Select or highlight the author's name
• From the Styles dropdown menu, select Pullquote Author.
• Add a mdash in front of the Author’s name using the Drupal WebCMS editor Insert Special Character button.

Usability/Accessibility Tip: Screenreaders read the pull quote in line with the rest of your text, so be sure your content still makes sense either with or without the pull quote.

Top of Page

---

Indented text

Use to indent a section of text, typically to help improve scanning or increase readability of large blocks of content. Do not use in place of the pullquote or blockquote styles, as this negatively impacts the accessibility of your page.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at diam tellus, id feugiat neque. Nunc consequat, eros sit amet dignissim tristique, augue turpis pretium dui, vitae suscipit urna risus eget ipsum. Phasellus sed arcu tellus, in commodo tortor. Fusce arcu sem, varius a elementum ut, viverra a nunc.

Nunc laoreet interdum sem, ut congue odio ultrices et. tristique, augue turpis pretium dui, vitae suscipit urna risus eget ipsum. Phasellus sed arcu tellus, in commodo tortor. Fusce arcu sem, varius a elementum ut, viverra a nunc.

How to:

• First, add your content.
• Highlight or select the content.
• Select Indented Text from the Styles dropdown menu.

Top of Page

---

Headings

Headings provide the basic organization for a page, grouping content into readable chunks. They are formatted in descending levels of size and emphasis, enabling clear and precise content organization. Headings directly influence search engine results and rankings, and should include key, critical search terms for your page.

Any skipping of heading levels breaks the flow of the page for both disabled and able-bodied users. Choosing to use any heading elements out of order, for purely visual appeal, renders your content less useful and less accessible.

• <h1> for the highest level of content organization. At EPA, <h1> is the page title and is part of the template. Additional <h1> tags cannot be added to the page.
• <h2> provides the main organization or grouping of content, increasing scannability and ease-of-use. The first heading used on a given page is <h2>.
• <h3> to <h6> break down the content under the <h2> into further sections, leading the user through the page.
  • These headings should be used as you would an outline structure.
  • The Highlighted Heading style applies colored backgrounds to the <h3>through <h6> levels. See the Highlighted Heading style.

Examples:

Second-Level Heading

The first header on the page, after the page title (which is always <h1>).

Third-Level Heading

Used after the first <h2> header in a document hierarchy.

Fourth-Level Heading

Used after <h3> headers in a document hierarchy.

Fifth-Level Heading

Used after the <h4> headers in a document hierarchy.

Sixth-Level Heading

Used after the <h5> headers in a document hierarchy.

How to:

• First, add your content.
• Select or highlight text.
• Select appropriate heading from format dropdown.

Related links:

• Improving Relevance Ranking in EPA Search Results
• Standard: Headings
• Standard: Writing Style

Top of Page

---

Highlighted Heading

A heading with a background color applied. Used to improve scannability of a web page.

• To avoid chaos, the highlighted heading can only be applied to one heading size per page.
  • Don't highlight every heading on a page. This is just noise.
  • Use highlighted headings consistently.
    • On pages with multiple heading sizes, apply the style to one size, not all. All <h3> are highlighted, or all <h4>, but not both the <h3> and <h4> headings used on the page.
    • Do not randomly select multiple headings of various sizes to highlight.
  • Works best on text-heavy pages, as the style can easily conflict with images, boxes, and other visual elements such as <hr>.

Example:

Highlighted H3

How to:

• First, add content.
• Select the highlighted heading from Styles dropdown menu.

Top of Page

---

Separators (horizontal rules)

<hr> can help separate content sections.

Example:

---

How to:

• Select the Drupal WebCMS editor Insert Horizontal Line button from the editor.

---

Top of Page

Floated right and automatically links to the top of the main content area. A <hr> can also be added to separate content sections, unless Highlighted Headings are used.

Example (see right of page):

Top of Page

How to:

• Select the Drupal WebCMS editor Top of Page button from the editor.

Usability/Accessibility Tip: Include these links at the end of every section on long pages, especially if you used On This Page/ Table of Contents.

Top of Page