Standard: Boxes
Brief description
(see the full document below for details)
Boxes are used to format or highlight specific web content. Box types have been provided for commonly used formatting
On this page
All standards and guidance
Content requirements
- Boxes serve specific functions. For each function, use the appropriate box listed below
- Multi-purpose Box: Used on any page. Always right aligned. Typically at or near the top of the page. Content may include such things as:
- Featured item
- Glossary
- Figure list
- Upcoming events
- Procedure list
- List of links other than to national information (e.g., table of contents or related links)
- National Information Box: Used on regional pages to link to related national information. Always right aligned. Typically at or near the top of the page. Heading text is always “National Information.”
- Simple or Temporary Information Box: Used on any page. Right aligned. Used to set apart a small amount of information or to periodically feature temporary information such as events, notices, new content, etc.
- Highlight Box: Used on national or regional pages. Boxes are left or center aligned. Used to emphasize and call out any information or links and provide some variety in page layout. Four format options are available:
- Gray: Default box. Used on any page.
- Green: Used on regional or national pages
- Blue: Used only on national pages (Use on a regional page will diminish the effectiveness of the easily identifiable National Information Box).
- Without a Header: Used on any page.
- Emergency Alert Box: Used on any page. Right aligned. Used only for emergency information. Use of the Emergency Alert Box on a persistent basis is discouraged as it will diminish its effect of being highly noticeable.
- Pull Quote Box: Used on any page. Right aligned. Used to highlight a quote or other short passage. Includes option to note author.
- PDF Disclaimer Box: Use on any page including PDF or other Non-HTML links. Right or center aligned. Content describes how to obtain a free reader for the filetype. Using a box for the PDF disclaimer is not required.
- Quick Finder Box: Used on any page, typically on a main page. Left aligned at the top of the page. Used to provide links to the most frequent or useful program or regional content.
- Image Box (with or without a caption): Used to contain an image. May be left, right or center aligned. The box is only required if a caption is included. It is optional without a caption.
- Within the new template, boxes have separate heading and content sections, except for the following types:
- Simple or temporary information (heading is optional)
- Highlight box (heading is optional)
- Pull quote
- Image
- PDF disclaimer /Non-HTML file information
Top of page
Style requirements
- Styles for boxes and their contents are established by the standard style sheet. An optional smaller text size is available for lists within boxes.
- When using a Quick Finder box, your Content and Infrastructure Coordinators may grant an exemption to the use of the style sheet if the style does not meet your page layout needs. Any custom coded Quick Finder must meet the following criteria:
- Located at the top of the content area.
- Left Aligned
- Include a green header bar (color 5A9263) with rounded upper corners.
- The box has no borders on the side, but may have one on the bottom.
- Include white header text “Quick Finder”
- Link text is blue, not underlined, and highlights on mouseover.
- Do not use boxes other than those in this standard.
Top of page
How to
For more detailed examples of how to implement styles for boxes, see http://www.epa.gov/epafiles/s/boxes.html
- Multi-purpose, national information links, simple or temporary, and alert boxes
- Create using <div class="insert box class here"> using the classes listed below.
For example, to create a Multi-purpose box: <div class="boxmulti">content</div>.
The class determines the standard formatting, including the box width.
- Box headings: put the text within <h5></h5> tags. It must be h5, not other sizes. Headings are required for Multi-purpose, National Information, Alert and National and Regional Highlight boxes. Headings are optional for simple, temporary or plain highlight boxes.
- Box content: code normally using p, br, ul, etc.
Box type |
Class |
Multi-purpose |
boxmulti |
National information links |
boxnat |
Simple or temporary |
boxsimple |
Alert |
boxalert |
Highlight (all variations) |
box |
- Pull quote
- Create using <p class="pullquote">
- After the quote, insert a dash and put the author's name in a <span class="author"> tag.
For example:
<p class="pullquote">This is a fabulous quote pulled from the surrounding content.<span class="author"> -author’s name</span></p>
- PDF disclaimer
- Create using <p class="insert box class here"> using the classes listed below.
For example: to create a center aligned PDF box; <div class="disclaimer-wide">You will need Adobe Acrobat(...)</div>.
Box type |
Class |
Right align PDF box |
disclaimer |
Center align PDF box |
disclaimer-wide |
- Quick finder
- Do not apply any additional styles to list items.
- Items are automatically split into six columns.
- If you have a separate page showing more items than fit in the quick finder list (e.g., the EPA home page quickfinder overflow page), link to it from:
- The words "Quick Finder" in the heading: <a href="insert URL">Quick Finder</a>
- final list item: <li class="more"><a href="insert URL">More…</li>
Top of page
Examples
http://www.epa.gov/epafiles/s/boxes.html
http://www.epa.gov/epafiles/templates/aara.html
Top of page
Rationale
There is a limited set of functions for boxes. EPA has one Web site, and should be consistent in how we fulfill those functions.
Every design decision (e.g., color, rounded corners vs. straight) leaves room for poor design choices and costs the taxpayer EPA staff time, contract dollars, or both. Setting standards focuses our efforts on developing content instead of making the same style decisions repeatedly across EPA or over time.
By requiring exceptions to be discussed with the Content and Infrastructure Coordinators, and then OPA, we learn where it's truly necessary to make changes, and can make them through formal proposals to the Web Council.
Top of page
Exemptions
Discuss requests with your Content Coordinator and Infrastructure Coordinator. If they support the request, request a waiver from the person in the Office of Web Communications within the Office of Public Affairs who reviews your pages.
Top of page
Related governance documents
EPA
Related Policies
Related Procedures
Related Standards
Related Guidance
Non-EPA
None
Top of page
Full Metadata about this standard
Name Boxes
Tracking number NT000014BA
Type Standard
Required or Recommended Required
Effective date 09/11/2006
Date approved 09/11/2006
Category Graphics and Multimedia, Page Elements, PDF
Web Council review by 09/11/2009 (or earlier if deemed necessary by the Web Council)
Governing Policy Web Governance and Management (PDF) (4 pp, 339K, About PDF)
Top of page