Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Basic Template with Gallery Example

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.

This page is strictly a mockup for design purposes.

How To

Note the following:

  • The entire unordered list has a class of "gallery"
  • The first list item, in a row, has a class of "first"
  • The last list item, in a row, has a class of "last"
  • You can repeate for as many rows as you want
  • Each image is 128px wide, so you can fit up to five images per row.

If you want to use a popup to show the full-sized images, check out the jQuery Colorbox plugin.

Code

<ul class="gallery">
 <li class="first">
  <img src="https://www3.epa.gov/epafiles/images/playset.jpg" width="128" alt=""/>
  <p>Studies have shown that pharmaceuticals are present in our nation's waterbodies.</p>
 </li>
 <li>
  <img src="https://www3.epa.gov/epafiles/images/playset.jpg" width="128" alt=""/>
  <p>Studies have shown that pharmaceuticals are present in our nation's waterbodies.</p>
 </li>
 <li>
  <img src="https://www3.epa.gov/epafiles/images/playset.jpg" width="128" alt=""/>
  <p>Studies have shown that pharmaceuticals are present in our nation's waterbodies.</p>
 </li>
 <li>
  <img src="https://www3.epa.gov/epafiles/images/playset.jpg" width="128" alt=""/>
  <p>Studies have shown that pharmaceuticals are present in our nation's waterbodies.</p>
 </li>
 <li class="last">
  <img src="https://www3.epa.gov/epafiles/images/playset.jpg" width="128" alt=""/>
  <p>Studies have shown that pharmaceuticals are present in our nation's waterbodies.</p>
 </li>
</ul>

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

Jump to main content.