• You are here: EPA Home
• EPA Web Design
• Available Styles
• Box Styles

Box Styles

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

Note: These styles apply to Template 4 pages.

These box styles have been approved as EPA Web Standards by the EPA Web Council.

On This Page

• Right-aligned Boxes
  • Multi-purpose Box
  • Links to National Information from Regional Pages
  • Simple or Temporary Information
  • Emergency Alerts
  • Pull Quote
• Highlight Boxes
  • Default
    • Description
    • Code
    • How-To
  • Variations on the Default
• Images (w/ or w/o captions)
• Disclaimers

---

Right-aligned Boxes

Multi-purpose Box

Description

This box is the default right-aligned box. If you don't have a national or an alert box, this "multi" box is expected on 99% of all sites.

A fixed width box (200px), borders, floated (aligned) right. Title text is white on a soft green background. Box background is gray.

How-To

1. Make a <div> and give it a class of "boxmulti". All the code for this box must be within that <div>.
2. Use <h5> for the title. Title text can be anything, but should be descriptive.
3. Make an ordered/unordered list. You can use paragraphs and images, too.
4. Rounded corners are automatic
5. That's it!

Code

<div class="boxmulti">
	<h5>Multipurpose Box</h5>
	<ul>
		<li>Unordered list</li>
		<li>Green bullets</li>
	</ul>
	<ol>
		<li>Ordered list</li>
		<li>Numbers present</li>
	</ol>
</div>

Top of page

---

Links to National Information from Regional Pages

Description

National and/or regional EPA links that supplement the topic, always located at the right side of the page. The blue header color unifies this specific purpose box.

The only difference between this and the Multi-purpose box above is the header color and narrower rules for its use.

A fixed width box (200px), borders, floated right. Title text is white on a soft blue background. Box background is gray.

How-To

1. Make a <div> and give it a class of "boxnat". All the code for this box must be within that <div>.
2. Use <h5> for the title. Title text can be anything, but should be descriptive.
3. Make an ordered/unordered list. You can use paragraphs and images, too.
4. Rounded corners are automatic
5. That's it!

Code

<div class="boxnat">
	<h5>National Info Box</h5>
	<ul>
		<li>Unordered list</li>
		<li>Blue bullets</li>
	</ul>
	<ol>
		<li>Ordered list</li>
		<li>Numbers present</li>
	</ol>
</div>

Top of page

---

Simple or Temporary Information

Description

For highlighting occasional things like reminders of individual upcoming events, call for papers, focus special features, etc. If you have more information or a bulleted list is needed, use the multi-purpose box. A flexible box (15% width) with gray borders, floated right.

How-To

1. Make a <div> and give it a class of "boxsimple". All the code for this box must be within that <div>.
2. Use <h5> for the (optional) title.
3. Use paragraphs.

Code

<div class="boxsimple">
	<p>Your text goes here</p>
</div>

Top of page

---

Emergency Alerts

Description

Used only for emergency information such as the Hurricane Katrina response information. Content will typically be issued by OEA. A fixed width box (200px) in emergency red.

How-To

1. Make a <div> and give it a class of "boxalert". All the code for this box must be within that <div>.
2. Use <h5> for the title.
3. Make an ordered/unordered list or paragraphs.

Code

<div class="boxalert">
	<h5>Alert Box</h5>
	<p>Your text goes here</p>
	<ul>
		<li>Unordered list</li>
		<li>Red bullets</li>
	</ul>
	<ol>
		<li>Ordered list</li>
		<li>Numbers present</li>
	</ol>
</div>

Top of page

---

Pull Quote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

This is a fabulous quote pulled from the surrounding content. – The author

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam feugiat, odio sed pellentesque auctor, orci diam vehicula nisi, at faucibus eros ligula sed magna. Duis risus sapien, pellentesque quis, congue vel, placerat sit amet, massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Description

Very similar to the simple box, but with larger font size and wider box width. Also includes a style for the author's name, if needed.

How-To

1. Make a <p> and give it a class of "pullquote". All the code must be within that <p>.
2. Use <span class="author"> for the author, if needed.
3. If you have a really long quote that spills over, constrain it with style="width: 123px;". Use whatever value you like.

Code

<p class="pullquote" style="width: 123px;">Your text goes here <span>- Author here</span></p>

Top of page

---

Highlight Boxes

Plain, Default

Description

This box is the default box. It is the base of all the highlight boxes whether it's centered, a different width, or the header is a different color (green or blue). The default is a box of 50% width, gray borders, and aligned left. Title text is black on a light gray background. The elements allowed are: lists, paragraphs, images. Classes available in the style sheet to modify the box as needed for individual pages:

• centered—centers the box
• righted—aligns the box right
• color1—creates a green box (bullets are green)
• color 2—creates a blue box

Top of page

Code

<div class="box centered/righted color1/color2">
	<h5>Highlight Box</h5>
	<ul>
		<li>Unordered list</li>
		<li>Blue/green bullets</li>
	</ul>
	<ol>
		<li>Ordered list</li>
		<li>Numbers present</li>
	</ol>
</div>

Top of page

How-To

1. Make a <div> and give it a class of "box". All the code for this box must be within that <div>.
2. To center this box, add a second class of "centered" (note the tense).
   • If you would rather right-align this box, add a second class of "righted" (er, note the tense).
3. For color, add yet another class:
   • "color1" for soft green; #5c9261
   • "color2" for blue; #336699 (#369)
4. To override the default width, use a local style or add in an inline style. style="width: 123px;". Use whatever value (or percentage) fits your page layout best.
5. Use <h5> for the optional title. Title text can be anything, but should be descriptive.
6. Make an ordered/unordered list. You can use paragraphs and images, too.
7. That's it!

Top of page

Variations on the Default

The following are examples of how to modify the basic box to meet your needs and the EPA boxes standard.

You can constrain (or widen) your box to fit your pages. Use the following bit of code: style="width: 123px;". Use whatever value (or percentage) you need.

Don't want a title? Okay.

Top of page

---

Images (w/ or w/o captions)

Images w/captions

Image with a caption, floated right. Your text will wrap automatically around the floated image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Images w/o captions

Image without a caption, floated left. Your text will wrap automatically around the floated image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis libero vitae ante varius interdum.

Description

More details, including "How-To" on the images page.

Top of page

---

Disclaimers

PDF Disclaimer / Non-HTML File Information

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

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

Archived Information

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

Description

More details, including "How-To" on the disclaimers page.

Top of page

For help with your epa.gov web design, contact the Web Template Workgroup.

Area Navigation

• EPA Web Design Home

  ---

• HTML Templates
• Styling your Content
• EPA Web Guide
• EPA Web Standards