Skip to main content

EERE Application Style Guide

This EERE application Style Guide page shows the standard styles and color palette for elements that you might incorporate into your project. All elements are designed on a responsive framework to accommodate responsive applications. EERE does not require applications to be responsively designed. The required elements for all applications are:

  • Application banner
  • Application footer
  • CSS governing typography
  • Use of the color palettes below for any charts or graphics.

All other elements shown here are optional. Please use these standard styles for common website elements only if you have them on your application or website (breadcrumbs are optional). Access all code for the template at https://github.com/NREL/eere-app-template. If you have questions about how to apply these styles or if you have an element that's not included, please contact the EERE Web Template Coordinator.

Top Banner, Navigation, Login Links, and Website Search

Your application may have all or none of these elements. This Style Guide page shows the layout of an application with only the required banner. Styles for additional elements are linked below:

Primary Color Palette

These are the primary colors used in EERE application interfaces. Text used over these colors must comply with WCAG AA color contrast standards for accessibility. The class for each color includes a default text color that complies with these standards, shown as the color name.

Gray (Foundation)

Green (Primary)

Extended Color Palette

These colors can be utilized for things like charts and graphs or other graphics and are based on the EERE Identity and Design Guidelines colors. Additional colors that fit with the palette can be created when charts or graphs require more than the number of colors shown here. Text used over these colors must comply with color contrast standards for accessibility. The class for each color includes a default text color that complies with these standards, shown as the color name.

Orange

Yellow

Light Green

Light Blue

Dark Blue

Light Gray

Header Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.


Links

Go to the home page or return to the top of this page. View this important documentPDF. View this important documentMicrosoft Word.


Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Ordered List

  1. This is an ordered list.
  2. This is the second item, which contains a sub list
    1. This is the sub list, which is also ordered.
    2. It has two items.
  3. This is the final item on this list.

Unordered List

  • United Kingdom of Great Britain and Northern Ireland:
    • England
    • Scotland
    • Wales
    • Northern Ireland
  • Republic of Ireland
  • Isle of Man
  • Channel Islands:
    • Bailiwick of Guernsey
    • Bailiwick of Jersey

Definition list

This is a term.
This is the definition of that term, which both live in a .
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 a 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.

Callout well

Authoritatively Dynamically procrastinate

Iterate resource-leveling imperatives after sticky information. End-to-end collaboration.

Forms

Forms can be used when you wish to collect data from users. The fieldset element enables you to group related fields within a form, and each one should contain a corresponding legend. The label element ensures field descriptions are associated with their corresponding form widgets.

Text Box Example

Checkbox Example

Radio Example

Textarea Example

Select Example

Disabled Items

Buttons

Button Types
Button Sizes

Faceted Search

Results List

Showing results 1 - 3 of 7331

National Renewable Energy Laboratory

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions...

Department of Energy

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.....

Department of Energy

Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service....

Tables

Table with stripes

Game Score
Italy vs Costa Rica 0 – 1
Honduras vs Ecuador 1 – 2
Switzerland vs France 2 – 5

Condensed table

Game Score
Australia vs Spain 0 – 3
Cameroon vs Brazil 1 – 4
Netherlands vs Chile 2 – 0
Croatia vs Mexico 1 – 3

Table with borders

Game Score
Belgium vs Russia 1 – 0
Korean Republic vs Algeria 2 – 4
United States vs Portugal 2 – 2