Web Style Guide

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

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:

Top of Page


Related Info Box

Boxes that contain text lists of Related Information / More Information / Related Topics (will not necessarily have any of these phrases in the title). Related information is not critical or featured content.

  • Has a green header and border
  • This is the only box available in basic pages using the Drupal WebCMS editor. When used on a basic page, it can be floated left or right.  It is also available in Panelizer.

How to:

  • In Panelizer, add content, then select Related Info from the Box Style dropdown menu.
  • In the Drupal WebCMS editor, click the Related Info Box button.

Top of Page


Highlight Box

Used to contain one set of related, critical, featured content — a new regulation or publication, Did you know? , data and statistics, Fast facts, top tasks / questions / How do I?

  • Has a bright orange header and border, to attract attention.

How to:

  • In Panelizer, add content, then select Highlight Box from the Box Style dropdown menu.

Hot Tips For A Cool Summer!

We’ve got tips and apps to help you save money, cut energy costs, and continue to protect your health while still enjoying the summer.

Top of Page


News Box

A box for lists of events, such as recent press releases or upcoming calendar events.

  • Has a blue header and border.

How to:

  • In Panelizer, add content, then select News Box from the Box Style dropdown menu.

EPA Climate News

(6/26/2012) U.S. Court of Appeals- D.C. Circuit Court Upholds EPA’s Actions to Reduce Greenhouse Gases under the Clean Air Act
More Information »

(4/16/2012) EPA Publishes National U.S. Greenhouse Gas Inventory
More Information »
Press Release »

(3/27/2012) EPA Proposes First Carbon Pollution Standard for Future Power Plants/Achievable standard is in line with investments already being made and will inform the building of new plants moving forward
More Information »
Press Release »

More Headlines >

Top of Page


Alert Box

The alert box is reserved for very important messages.

  • Not just for emergencies, but can also be used for high priority, short deadline announcements such as new software releases for site users, notices for review, or expiring comment periods.
  • To comply with Section 508 requirements, text headings for all alert boxes should also indicate the alert status, i.e. “Emergency Alert: Pesticide Safety Notice”.
  • In general, this should not be considered a permanent element on a page. An exception would be things like the number to call for chemical spills.

Alert box title examples:

  • Less accessible: Hurricanes expected!
  • More accessible: Emergency alert: Hurricanes expected!
  • Less accessible: Air Quality Info
  • More accessible: Air Quality Alert

How to:

  • In Panelizer, add content, then select Alert Box from the Box Style dropdown menu.

UV Alert

It’s critical to know the level of ultraviolet (UV) radiation before you plan outdoor activities. The UV Alert system issues a notification when the level of solar UV radiation is predicted to be unusually high, and consequently the risk of overexposure is greater. The UV Alert provides SunWise action steps that you should take to reduce risk of overexposure.

We encourage you to check the UV Index daily or to sign up using our free EnviroFlash service to receive the UV Alert by email.

Be SunWise: Sign up for UV Alerts!

Top of Page


Simple Box

For when you want to have an image as the header, or for boxes without colored headings. Also used to create quizzes.

How to:

  • In Panelizer, add content, then select Simple Box from the Box Style dropdown menu.
  • To create a Simple Box with image header:
    • Leave the title field blank.
    • In the body field, click Add Files and Images to upload or select an image.
    • Under Options, select the Box Header format. Do not align image or add a caption. Click submit.
    • In the body field, under the image, add content as needed.

Simple box differs by having an outline only—no colored header.  You can have as much text as you need

  • Can have lists
  • With as many list items as needed
  • And embedded images:
San Francisco delta waterway, seen from above
Administrator Lisa Jackson talking to school children, with the word "Learn" written across the image

Simple box with image header.  Image set to "box header" format.

You can have as much text as you need

  • Can have lists
  • With as many list items as needed
  • List item 3

Top of Page


Multipurpose Box

This is for all other content that needs to be boxed, that does not meet other box styles content requirements.

  • Dark grey header and border.

How to:

  • In Panelizer, add content, then select Multipurpose Box from the Box Style dropdown menu.

Project Facts

Total = $2,240,000
EPA = $1,200,000
Match/leverage = $1,040,000
Schedule: February 2010 to December 2012
Recipient: San Francisco Planning Department
Partners: San Francisco Public Utilities Commission, Friends of the Urban Forest, Plant SF, CC Puede.

Top of Page


Special One Item Box

Boxes used to feature one special item, such as one link to one page (unlike the Highlight Box, which can have a related set of featured content items).

  • Heavy border and larger font.

How to:

  • In Panelizer, add content, then select Special One Item Box from the Box Style dropdown menu.

Air Pollution

The Clean Air Act requires EPA to set National Ambient Air Quality Standards for six common air pollutants. These air pollutants are found all over the United States.

Top of Page


No Style Box

Used on microsite homepages, can feature image headers. The associated padding creates columns without adding visible lines.

  • No color, no border

How to:

  • In Panelizer, add content, then select No Style Box from the Box Style dropdown menu.
  • To create a No Style Box with image header:
    • Leave the title field blank.
    • In the body field, click Add Files and Images to upload or select an image.
    • Under Options, select the Box Header format. Do not align image or add a caption. Click submit.
    • In the body field, under the image, add content as needed.

No Style Box

This is used on Microsite homepages. You can have as much text as you need.

  • Unordered lists, too
  • With as many list items as necessary
  • And embedded images
Lake Oroville in California, as seen from above

Top of Page


RSS Feed Box - Limited to Webmasters

Used primarily on microsite homepages to display RSS feeds of 3-5 blog or news release entries.

  • Dark orange header and heavy bottom border
  • Incorporates RSS logo and link to EPA newsroom.

If 3rd party content is used, you are responsible for that content.

How to:

  • In Panelizer, add content, then select RSS Feed Box from the Box Style dropdown menu.
    • This content is important, as it provides a fallback if JavaScript is disabled.
  • Webmasters must add code and JavaScript. See: Javascript: RSS Feed.

Top of Page


Twitter Box - Limited to Webmasters

Used primarily on microsite homepages, to display official EPA Twitter accounts tweets. 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.

See the Columbia River home 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.
  • Webmasters must add appropriate code and JavaScript (under development).

Top of Page


Blog Box - Will be Limited to Webmasters

Used primarily on microsite homepages. Displays one blog entry with teaser text and link to content.

  • Green header and heavy bottom border
  • Incorporates Greenversations logo and link to EPA blog.

How to:

  • In Panelizer, add content, then select Blog Box from the Box Style dropdown menu.
    • Currently, you have to manually add blog title links, authors, and teaser information to the body field.  
    • Once XML is set up on the same domain as published Drupal WebCMS content (www2.epa.gov), webmasters will add appropriate code and javascript.

It’s Our Environment

Headlines by FeedBurner

Top of Page


Quiz Box - Limited to Webmasters

Created using the Simple Box and form elements.

How to:

  • In Panelizer, add content, then select Simple Box from the Box Style dropdown menu.
  • To create a Simple Box with image header:
    • Leave the title field blank.
    • In the body field, click Add Files and Images to upload or select an image.
    • Under Options, select the Box Header format. Do not align image or add a caption. Click submit.
    • In the body field, under the image, add content as needed.
  • Webmasters must add the form elements directly to the code.
Quiz logo showing interlocking puzzle pieces and the title "pesticide puzzler"
We use pesticides every day in our homes. Is bleach a pesticide?
 

 

C is the correct answer.

Products containing bleach that claim to "sanitize" or "disinfect" are considered pesticides and must be registered with EPA. However, products containing bleach that do not claim to sanitize or disinfect are not pesticides and are often sold as laundry additives or cleaners. All liquid bleach products are hazardous to skin and eyes and may harm you if not used according to label directions. Always read the label first before using any product.

 

Hey... No Peeking!

You need to select an answer to the question before we'll show you the right answer...

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:

Image, floated right
san francisco bay delta seen from overhead
Image, floated right, with "clear-right"

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

EPA's color palette showing each color and its hexadecimal value

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.

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:

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 /home/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:

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:

The New! Icon is a yellow lozenge with the word "New!" written across it

How to:

  • First, add the content to page.
  • Highlight the new content.
  • Select the Drupal WebCMS editor new icon button. You will not see the icon in the editor, but it will be visible when the page is published.

Related link:

Top of Page


PDF Disclaimer

The standard PDF disclaimer floats right. 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.

Examples:

You will need Adobe Reader to view some of the files on this page. See EPA’s PDF page to learn more.

Standard Disclaimer, to the right: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tortor sit amet risus interdum ornare ut et tellus. In augue purus, dignissim vitae rhoncus ac, rutrum eu tortor. Suspendisse potenti. Quisque scelerisque ante tincidunt diam varius bibendum. Nam eu felis lacus. Nam eu sem vitae est mollis luctus. Nam in eros et felis eleifend varius vel eu dolor.

Inline Disclaimer: This is the document title (PDF) (22pp, 245K, 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:

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

Top of Page


Select list

Creates a dropdown list of options.

Example:

Optional description for this form element.

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:

Optional description for this form element.

How to:

  • First, create a Webform.
  • Under the Webform tab, enter a name for the new componenet 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:

Optional description for this form element.

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:

Optional description for this form element.

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:

Optional description for this form element.

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


Buttons

The example for the submit button applies to all buttons.

  • Green background, on rollover lighter green.
  • White text.

Example:

How to:

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

Top of Page


Lists

Unordered list

Unoredered lists are bullet lists.  Use unordered lists normally. In the main content areas for Microsite homepages, the green bullets and grey sub-bullets are styled automatically.

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

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 a .75em 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. They can be used for pagination or to provide 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:

How to:

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

Top of Page


Unordered list, tabs

These are horizontal links styled as tabs. Follow the Web Standard for tabs.

Examples:

How to:

  • First, create a unordered, or bullet, list.
  • Link each list item to its appropriate page or anchor.
  • Select List, tabs in the Styles dropdown menu.
  • If you need a second line for a tab, use shift enter to create a break in the text.
  • To create an active tab, disable rich-text and add <li class="active"> to the appropriate <li>.

Related Links:

Top of Page


Unordered list, vertical tabs

These are horizontal links styled as vertical tabs. They only appear on the right side of the screen.  Follow the Web Standard for tabs.

Examples:

How to:

  • First, create a unordered, or bullet, list.
  • Link each list item to its appropriate page or anchor.
  • Select List, tabs in the Styles dropdown menu.
  • To make the tabs vertical, disable rich-text and add vertical to the ul class="tabs".
  • If you need a second line for a tab, use shift enter to create a break in the text.
  • To create an active tab, disable rich-text and add <li class="active"> to the appropriate <li>.

Related Links:

Top of Page


Tabs using JavaScript - Limited to Webmasters

Tabs are used to show/hide content all on one page. Good for displaying short sections of related content.

How to:

Top of Page


Accordions

Accordions are a useful tool to group like content and to point users to deeper content. They present two tiers of information: the top level is the main categories or groupings; the secondary level is short lists of options or annotations for deeper, linked-to content.

They should be used sparingly, and never simply to add visual appeal to a page or to fit large blocks of content within constrained spaces. Usability reviews have graded EPA poorly for hiding core content behind accordions.

  • Accordions are distinguishable from other lists. They provide visual clues to the user that more information is available by a click. They use a carat that toggles as panels open. Open panels are highlighted.
  • Accordions are opened by click or by tab action, never on hover.
  • If JavaScript is unavailable, all panels will be open by default.
  • Accordions should not be nested within other accordions.
  • The title or name of an accordion panel cannot be a link to a separate page or an external site. Both the carat and the title must only be used to open that accordion panel.
  • Place the most important category first.

Example:

  • Aerovox Mill Demolition New Bedford, MA

    The Aerovox Mill was an electronics manufacturing facility that contributed a significant amount of PCB waste that is present in New Bedford Harbor today. Located at 740 Belleville Avenue in New Bedford, Massachusetts the 450,000 sq. ft. building is on approximately 10 acres of industrial-zoned land beside the Acushnet River. From 1940 to about 1977, polychlorinated biphenyls (PCBs) were used at the facility in the manufacture of electrical capacitors and transformers. Soil and groundwater at the site, as well as the building itself, are heavily contaminated with PCBs and other industrial chemicals.

    To follow the demolition progress and for more site history »

  • Atlas Tack, Fairhaven, MA

    The Atlas Tack facility was built in 1901 in Fairhaven, MA and historically manufactured wire tacks, steel nails, rivets, bolts, shoe eyelets and similar items. Facility operations included electroplating, acid-washing, enameling, and painting until 1985. Wastes were disposed of on the grounds, in adjacent wetlands and into an on-site lagoon. High levels of heavy metals, cyanide, PCBs, volatile organic compounds, pesticides, and other contaminants impacted area groundwater and surface waters, in addition to the site soil, sediment and portions of the former buildings.

    The $21 million, two year EPA cleanup was completed in 2007 and removed about 108,129 tons of contaminated material. The upland portion of the site was backfilled and seeded, and the wetlands were restored to pre-industrial conditions with additional native freshwater wetland enhancements. The Atlas site now meets commercial/industrial cleanup standards and remains mostly private property. Although the cleanup has been completed, EPA and MassDEP continue to conduct environmental monitoring and maintenance activities. Groundwater monitoring will continue until the ecologically-based cleanup goals are met and land use restrictions will be placed on the site to help ensure that the cleanup remains protective.

    For more information about Atlas Tack »

  • Brownfields Projects and Grant Opportunities

    The City of New Bedford has received over $2.9 million in EPA Brownfields funding since 1997 to assess and cleanup Brownfields properties within the City and to conduct job training programs. They have assessed over 14 properties, cleaned up four properties and have trained 79 workers.

  • Environmental Justice Program and Grants in New England

    All residents of New England are entitled to clean air, land and water in their homes, schools, offices and outdoor environments. The EPA Region 1’s (New England) Environmental Justice program works to protect all people, regardless of race, color, national origin or income, from environmental harms and risks, and to involve all citizens in making decisions that affect the environment in which they live, work and play. Minority and low-income communities are often disproportionately exposed to the impacts of pollution. EPA New England’s Environmental Justice Program is designed to work to greater protect these communities.

    In New Bedford, EPA Region New England’s EJ program convened several meetings in late 2009 and early 2010 to provide opportunities to engage the community around environmental justice issues. As a result, New Bedford continues to be a priority community for the EJ program.

Example code: 

<ul class="accordion">
<li><a class="accordion-title" href="#pane-1" title="Click to expand description">Your Accordion Title</a>
<div class="accordion-pane" id="pane-1" style="display: none;">
<p>Your accordion's content</p>
</div>
</li>
</ul>

How to:

  • Disable rich-text and add the example code.  
  • Fill in your content in each <div class="accordion-pane">, as needed

Top of Page


On This Page/Table of Contents

A title with a list immediately beneath it, followed by an <hr>. Follow the On This Page Standard.

Example:

On this page:

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:

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.  Parent elements are things like boxes, columns or panels.

Max-width dimensions for images by their format:

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

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)

For homepages:

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

  • Resource directory homepage images: 325px wide x 100px high
  • Microsite banners: 676px wide x 210px high

So you'll want, at minimum, to upload images of those sizes.

Banner and Aside text can affect the appearance of images.  See: Homepage Styles

As the screen width shrinks, your images will appear smaller. If the screen size drops past a certain size (such as smartphone screen sizes), microsite banner images become text only.

Related links:

Top of Page


Image, with caption

In basic pages, images can be floated left or right or centered. Adding a caption will apply the image container style, which includes padding around the image and a grey background. The background color unites the image with the caption.

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

Example:

two sandhill cranes in flight
The image caption shares the same grey background

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:

San Francisco delta waterway, seen from above
Image is 20% width because it's in a grid of cols-5.
two sandhill cranes in flight
Image is 20% width because it's in a grid of cols-5.
Lake Oroville in California, seen from above
Image is 20% width because it's in a grid of cols-5.
two sandhill cranes in flight
Image is 20% width because it's in a grid of cols-5.
Lake Oroville in California, seen from above
Image is 20% width because it's in a grid of cols-5.

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

The current implementation of colorbox will continue to be used until a better, more accessible lightbox solution is found. See some examples of Colorbox and what you can do with it.

How to:

Top of Page


Maps

You can:

  • Use an iframe to embed GeoPlatform maps.
    • If you're in the WebCMS, you can't see iframe content because they're pulling in insecure (HTTP) content into a secure (HTTPS) page. To view insecure content, 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 be visible once you publish the page.

  • Create standard Where You Live or US area maps.
  • Link static images to larger or more interactive maps.

Maps should have titles on top (using <h2> to <h4> tags, as appropriate) and descriptive captions. Follow image and map standards (see Related Links below).

Example of a GeoPlatform map using an iFrame

Includes a title and caption.

Right of Way Thorium Survey Reports

EPA has agreed to host a web-based repository of radiation testing reports and other technical documents for the benefit of those conducting work within the rights-of way. More information about the Lindsay Lights Co. Sites.

Example of a US Map

Includes a caption below the map. Each region is a separate link.

Click on your location to find an EPA Library.Region 8 Technical Library; National Enforcement Investigations Center Environmental Forensic Library, Denver, CONHEERL - Mid-continent Ecology Division Library, Duluth, MNRegion 5 Library, Chicago, ILAndrew W. Breidenbach Environmental Research Center Library, Cincinnati, OHNational Vehicle & Fuel Emissions Laboratory Library, Ann Arbor, MIRegion 1 Library, Boston, MANHEERL - Atlantic Ecology Division Library, Narragansett, RIRegion 2 Library, New York, NYRegion 3 Library, Philadelphia, PAEnviromental Science Center Library, Ft. Meade, MD Headquarters and Chemical Libraries; Legislative Reference Library; Office of General Counsel Law Library; Headquarters Repository, Washington, DC Research Triangle Park, NC Library Services; NERL - Atmospheric Sciences Modeling Division Library, RTP, NCNERL - Ecosystems Research Division Library, Athens, GARegion 4 Library, Atlanta, GANHEERL - Gulf Ecology Division Library, Gulf Breeze, FLNRMRL - Ground Water and Ecosystems Restoration Division Library, Ada, OK Region 6 Library, Dallas, TXRegion 7 Library, Kansas City, KSNERL - Environmental Sciences Division Technical Research Center, Las Vegas, NVRegion 9 Environmental Information Center/Library, San Francisco, CANHEERL - Western Ecology Division Library, Corvallis, ORRegion 10 Library, Seattle, WARegion 8 Technical Library; National Enforcement Investigations Center Environmental Forensic Library, Denver, CO NHEERL - Mid-continent Ecology Division Library, Duluth, MNRegion 5 Library, Chicago, ILAndrew W. Breidenbach Environmental Research Center Library, Cincinnati, OHNational Vehicle & Fuel Emissions Laboratory Library, Ann Arbor, MIRegion 1 Library, Boston, MANHEERL - Atlantic Ecology Division Library, Narragansett, RIRegion 2 Library, New York, NYRegion 3 Library, Philadelphia, PAEnviromental Science Center Library, Ft. Meade, MD Headquarters and Chemical Libraries; Legislative Reference Library; Office of General Counsel Law Library; Headquarters Repository, Washington, DC Research Triangle Park, NC Library Services; NERL - Atmospheric Sciences Modeling Division Library, RTP, NCNERL - Ecosystems Research Division Library, Athens, GARegion 4 Library, Atlanta, GANHEERL - Gulf Ecology Division Library, Gulf Breeze, FLNRMRL - Ground Water and Ecosystems Restoration Division Library, Ada, OK Region 6 Library, Dallas, TXRegion 7 Library, Kansas City, KSNERL - Environmental Sciences Division Technical Research Center, Las Vegas, NVRegion 9 Environmental Information Center/Library, San Francisco, CANHEERL - Western Ecology Division Library, Corvallis, ORRegion 10 Library, Seattle, WA Connecticut, Maine, Massachusetts, New Hampshire, Rhode Island, Vermont New Jersey, New York, Puerto Rico, US Virgin Islands Delaware, District of Columbia, Maryland, Pennsylvania, Virginia, West Virginia Alabama, Florida, Georgia, Kentucky, Mississippi, North Carolina, South Carolina, Tennessee  Illinois, Indiana, Michigan, Minnesota, Ohio, Wisconsin Arkansas, Louisiana, New Mexico, Oklahoma, Texas Iowa, Kansas, Missouri, Nebraska Colorado, Montana, North Dakota, South Dakota, Utah, Wyoming Arizona, California, Hawaii, Nevada, Pacific Islands Alaska, Idaho, Oregon, Washington

 

 Alaska, Idaho, Oregon, Washington

Example of a static image linked to larger map, with caption:

Map uses the standard image style, with caption.

Three New Bedford Harbor Fish Closure Areas

Click the image to see a larger map of the closure areas

How to:

For all maps, be sure to add titles, in appropriately sized headers, and captions (as needed). 

  • For GeoPlatforms maps embedded in an iframe:
  • For linked static images, you can:
    • Use the Add Files and Images button to upload a large-scale map image.  Select a format, then check the box Link to original image on the options screen,
    • Or, to link an image to a separate web page:
      • Select the image, then click the Link button to insert the link.
  • For interactive Where You Live maps or US Maps
    • Use the Add Files and Images button to upload the map image.  
    • Save your page, view it, then right-click and open the map image in a new tab.  Copy the image URL.
    • Go back to your page, and click edit.  Disable rich-text and remove the image div.  Insert an image tag, including the src=[relative url] and the name and id of your map.  Also include the usemap="#[name/id]" code.  Remember to include alt text, as needed.
      • <img alt="Map of the US, split into EPA regions" id="libraries1usregions_v4_Weba" name="libraries1usregions_v4_Weba" src="/sites/production/files/styles/large/public/2013-06/libraries-1-us-regions_v4_web-a_0.gif" usemap="#m_libraries1usregions_v4_Weba" />
    • Add the <map> and <area> tags as needed, including:
      • map [name|id],
        area [alt|coords|href|hreflang|media|rel|shape|target|type]

Related Links:

Top of Page


Microsite Homepage Styles

Home page examples are linked below. Follow OneEPA Web content requirements for microsite homepages.

At the top of each microsite homepage are the area name, banner, and aside.

  • Area name height increased, to improve readability.
  • Banners: important content can be featured in the large images; uploading multiple images will create a roating banner.
    • Banner text is white.
    • Banner links are blue. Usability studies showed people had trouble differentiating linked text from plain text. The blue adds visible contrast to linked text.
    • Too much text in the banner overlay will affect the overall size of both the banner and aside area.  A lot of text in the aside area will make the black border around the banner bigger in some browsers.  A lot of text in the banner overlay will affect banner image size and appearance.  Read more about images.
  • The aside is the area next to the banner. Usability studies showed that using the black background color led users to assume the aside was always related to the banner
    • Green background.
    • Link text is white, rollover text is yellow
    • The amount of text in this area will increase the border around the banner, in some browsers.

Below the image banner and aside there are 3 rows for content.

  • Row 1 has a drop shadow surrounding the row. Since this top row features the main architecture or content groupings of the microsite, the drop shadow helps give visual weight to this area.
  • Row 2 has a gray background.
  • Row 3 has a white background.

Home page bullets: green with grey sub-bullets:

  • Will only apply to content not in a box. Box styles retain normal (default) bullets, even on homepages.
  • Will also apply to resource directory homepages.

Other microsite features:

Top of Page


Widgets Styles

Email Signup

Standard image and email form that can be used on any page.

Example:

Get email alerts

How to:

  • In the Drupal WebCMS editor, click the EPA Email Alert button.

Top of Page


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.

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 can't see iframe content because they're pulling in insecure (HTTP) content into a secure (HTTPS) page. To view insecure content, 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 be visible once you publish the page.

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


Table, Default

The default table has borders and is zebra-striped. Row and column headers can be added via the Drupal WebCMS editor. Table widths are determined by the amount of data in each cell.  See below for information on creating accessible tables.

Manipulating table styles:

  • Default table styles can be changed to remove borders and striping
  • Tables can also be made sortable
  • Blue or green background colors can be applied
  • In the cell properties window, table widths can be manipulated

All other styles will be stripped upon saving and publishing the page.  Even those styles applied in the properties window.

Example, default table with header row:

Table 1: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
JMJ Pensions 1 1986

How to:

  • Click the Drupal WebCMS editor Table button.
  • In the table window, add headers, rows, and columns as needed.

Top of Page


Table, no borders

Here’s a table without borders, with the noborder class applied.

Example:

Table 2: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
JMJ Pensions 1 1986

How to:

  • Click the Drupal WebCMS editor Table button.
  • In the table window, add headers, rows, and columns as needed. Click Ok.
  • In the body window, click into your table, then select table, no border from the styles dropdown menu.

Top of Page


Table, no stripes

This table has no zebra stripes, with the nostripe class applied.

Example:

Table 3: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
JMJ Pensions 1 1986

 

How to:

  • Click the Drupal WebCMS editor Table button.
  • In the table window, add headers, rows, and columns as needed. Click Ok.
  • In the body window, click into your table, then select table, no striping from the styles dropdown menu.

Top of Page


Table, no style

This table is without borders or stripes, using the nostyle class.

Example:

Table 4: Company data
Company Employees Founded
ACME Inc 1000 1947
XYZ Corp 2000 1973
JMJ Pensions 1 1986

How to:

  • Click the Drupal WebCMS editor click the Table button.
  • In the table window, add headers, rows, and columns as needed. Click Ok.
  • In the body window, click into your table, then select Table, no style from the styles dropdown menu.

Top of Page


Table, sortable

Here’s a sortable table, with the tablesorter class applied. Blue and green table cells have the blue or green class applied.

Example:

Table 5: Fruit Colors
Fruit Color
Apple Red
Banana Yellow
Blueberry Blue
Grape Purple
Lime Green
Orange Orange

How to:

  • Click the Drupal WebCMS editor Table button.
  • In the table window, add headers, rows, and columns as needed. Click Ok.
  • Disable rich-text, then add the tablesorter class to the table tag, <table class="tablesorter">
  • To change cells to blue or green background colors:
    • Disable rich-text, then add <td class="blue"> or <td class="green"> to the appropriate cell.

Accessible Tables

Drupal WebCMS editor

Tables built in the Drupal WebCMS include accessability features by default. Tables automatically include the <thead> and <tbody> tags, grouping table rows into structural elements. When header rows and columns are selected, tables are marked up using the scope attribute. These features make tables more accessible for users employing assistive technologies like screen readers.

  • Adding a scope attribute with the value col to column headers links them to the data cells in the same column.
  • Adding a scope with the value row to row headers makes them headers for the data cells to their right.
  • Captions provide a title, name, or short description of the table, displayed on the page.
  • Summaries provide longer, more in-depth descriptions highlighting the important elements of a table. They are not displayed on the page.

Complex Tables

In addition to what the  Drupal WebCMS does by default, very complex or irregular tables can also be manually marked up using headers. This technique can be used to connect data cells with multiple headers in both rows and columns.

  • Each column header gets a unique id.
  • A headers attribute is then manually added to each data cell.
    • This attribute contains a list, separated by spaces, of the id of every column header that applies to that data cell.

Example:

Table 2: Contacts for the Fish Tissue Study
Name Location Phone Number Email
Leanne Stahl Washington, DC (202) 566-0404 stahl.leanne@epa.gov
Hilary Snook EPA Region 1
(CT, ME, MA, NH, RI, VT)
(617) 918-8670 snook.hilary@epa.gov
James P. Kurtenbach EPA Region 2
(NJ, NY)
(732) 321-6695 kurtenbach.james@epa.gov

Example Code:

<thead>
<tr>
<th id="name2">Name</th>
<th id="location2">Location</th>
<th id="phone2">Phone Number</th>
<th id="email2">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name">Leanne Stahl</a></td>
<td headers="location">Washington, DC</td>
<td headers="phone">(202) 566-0404</td>
<td headers="email">stahl.leanne@epa.gov</td>
</tr>

How to:

  • Use the Drupal WebCMS Editor to add a table
  • Insert text and data, as needed.
  • Disable rich-text and add unique ids and headers attributes to table cells, as needed.

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 (xi, yi). For example, the 10th point has coordinate (x10, y10).

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.

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 Higlighted 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 hightlight text.
  • Select appropriate heading from format dropdown.

Related links:

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:

Top of Page

How to:

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

Top of Page