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:
- Signup/Login: Used for one page tools/applications that require permission to access
- Simple one level navigation: Used for sites with a few pages of overview content
- Two level nav and search: Used for sites that have fairly deep content. May be useful for sites with both high level content (about, contact, etc.) and deep topic content.
- Two level nav with dropdowns, search, and social media icons: Used for sites that have very deep content.
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 document
. View this important document
.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Basic Modal Example
Ordered List
- This is an ordered list.
- This is the second item, which contains a sub list
- This is the sub list, which is also ordered.
- It has two items.
- 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.
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 |