Colors
FCC colors, with the color names as they appear in code.
gray
gray-light
gray-light-2
gray-light-3
gray-med
gray-dark
gray-dark-2
white
black
error
valid
warning
information
mariner
cloudBurst
toryBlue
kashmirBlue
mustard
yellowish
boulder
alto
botticelli
toreaBay
pickledBluewood
headerColor
dim
Typography - this is an H1.
Typography is based on this CSS specification: html {font-family: "Open Sans","Helvetica","Arial",sans-serif;}, meaning that when available Open Sans will be the default site font, and when not available then the next alternative will be searched for, which in this case is Helvetica.
Open Sans is provided by Google and made available on the FCC's website by this code in the "head" section of the HTML.
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
Separate renditions of "Open Sans" can be made by specifying any combination of css font-weight, and font-style attributes in the CSS, as long as they correspond to what is made avalable via the link tag. So, for example H1 uses "font: weight: 300", H2 "font-weight: 700" as defined in CSS. H2 with the added class of 'light' in it's HTML tag will use "font-weight: 300", resulting in what appears to be like an H1 only smaller. "font-style: italic" would use the "Open Sans" version of italic.
This is an H2.
This is intro text, which must have a class of intro to become larger. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit eleifend imperdiet. Maecenas vitae nisi a odio commodo lobortis scelerisque vitae lacus. Fusce commodo nisi quis nunc accumsan tincidunt. Cras sagittis a lacus at congue.
Light h2's are used for block/box content primarily.
You can invoke the style using a cla.light Suspendisse lacus risus, dapibus eu tellus ac, fermentum condimentum massa. Donec congue ex quam, quis cursus eros fermentum in. Maecenas sodales odio in consequat ullamcorper. Curabitur mattis nunc at lectus dignissim faucibus. Praesent posuere interdum dignissim.
This is an H3.
This is a regular paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit eleifend imperdiet. Maecenas vitae nisi a odio commodo lobortis scelerisque vitae lacus. Fusce commodo nisi quis nunc accumsan tincidunt. Cras sagittis a lacus at congue. Suspendisse lacus risus, dapibus eu tellus ac, fermentum condimentum massa. Donec congue ex quam, quis cursus eros fermentum in. Maecenas sodales odio in consequat ullamcorper. Curabitur mattis nunc at lectus dignissim faucibus. Praesent posuere interdum dignissim.
This is an h4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit eleifend imperdiet. Maecenas vitae nisi a odio commodo lobortis scelerisque vitae lacus. Fusce commodo nisi quis nunc accumsan tincidunt. Cras sagittis a lacus at congue. Suspendisse lacus risus, dapibus eu tellus ac, fermentum condimentum massa. Donec congue ex quam, quis cursus eros fermentum in. Maecenas sodales odio in consequat ullamcorper. Curabitur mattis nunc at lectus dignissim faucibus. Praesent posuere interdum dignissim.
Now for some lists:
- Firs
- Foxes
- Fruits
- Figs
- Farms
- Fowl
And an ordered list:
- Beer
- Wine
- Coffee
- Water
- Tea
- Whisky
A quote:
Quoth the Raven, "Nevermore". --- Edgar Allan Poe
Some tabular data:
| Name | Last Name | City | State |
|---|---|---|---|
| Heather | Rodriguez | Croton | MD |
| Vincent | Vega | Los Angeles | CA |
| Wyatt | Earp | Tombstone | AZ |
| Bruce | Wayne | New York | NY |
| Betty | White | Beverly Hills | CA |
| Peter | Parker | New York | NY |
Links:
In a paragraph, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit eleifend imperdiet. Maecenas vitae nisi a odio commodo lobortis scelerisque vitae lacus. Fusce commodo nisi quis nunc accumsan tincidunt. Cras sagittis a lacus at congue.
Button:
Broadband for the nation's schools, libraries
Expanding access to high-capacity Internet in schools and libraries to support innovative digital learning.
An image would be rendered at 350px x 194px.
Broadband
Pagination
Toggle
Dropdowns
Accordion
With WYSIWYG filters
Section I
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Section II
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Section III
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Example
See Federal Register Documents page for example. Accordions will be managed through a Views Accordion.
Tabs
As HTML
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
With WYSIWYG filters
Nunc tincidunt
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
Proin dolor
Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
Aenean lacinia
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
GIS Design Standards
The FCC GIS Design Standards were originally created for the FCC GIS Program to maintain a consistent user experience across maps, visualizations, and other applications. The Design Standards cover foundational styles, individual components, and complex patterns. They define how interactions behave, what they look like, and how they could be implemented. More information