Back to Index
HRF Style Guide
Use this as a toolkit for most of the UI elements used in the HRF website. This collection is curated from the underlying "evo" framework of the HRF design system, with no modification. Use it simply by connecting to the evo-elements style sheet.
<link rel="stylesheet" href="../css/evo-elements.css">
Black and White
- Black
- HEX#000000
- RGB( 0, 0, 0 )
- SASS$evo_black
- CSSevo-color-black
- CSSevo-color-black-bg
- CSSline-black
- CSSevo-box box-black
- White
- HEX#ffffff
- RGB( 255, 255, 255 )
- SASS$evo_white
- CSSevo-color-white
- CSSevo-color-white-bg
- CSSline-white
- CSSevo-box box-white
Grays
- Gray 18
- HEX#595959
- RGB( 89, 89, 89 )
- SASS$gray_18
- CSSevo-gray-18
- CSSevo-gray-18-bg
- CSSline-gray-18
- CSSevo-box box-gray-18
- Gray 12
- HEX#A6A6A6
- RGB( 166, 166, 166 )
- SASS$gray_12
- CSSevo-gray-12
- CSSevo-gray-12-bg
- CSSline-gray-12
- CSSevo-box box-gray-12
- Gray 8
- HEX#D9D9D9
- RGB( 217, 217, 217 )
- SASS$gray_8
- CSSevo-gray-8
- CSSevo-gray-8-bg
- CSSline-gray-8
- CSSevo-box box-gray-8
Typography
Use combinations of CSS classes to create type styling such as evo-text-11 hrf-font-1 hrf-color-1.
Our Work 10
Our Work 8
Our Work 6
Our Work 4
Our Work 3
- Green Headers
Water Quality 10
Water Quality 8
Water Quality 6
Water Quality 4
Water Quality 3
- Gray Headers
10
Water Quality 6
Water Quality 4
- Gray Subheaders
Submit Proposal 3
Submit Proposal 0
- Green Eyebrow Subheaders
Lorem ipsum dolor sit amet.
- White Hero Copy
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
- Intro Copy
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Body Copy
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Small Body Copy
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Smallest Body Copy
Icons
- Icons
- Gray Icons
- White Icons
Images
Use combinations of CSS classes to create image styles and behaviors image-bg image-square image-bg-fpo evo-box box-.
- Image
- Square Background Image
- Half Hero Parallax Background Image
Graphics
Use combinations of CSS classes to contain graphics image-bg hrf-graphic-infograph-bg evo-image-25 contain.
- Graphic
- Graphic Background
Boxes and Lines
Use combinations of CSS classes to create lines and box borders evo-image-15 evo-box box-1.
- Box Borders
- HR Lines
Lists
List elements evo-list.
- Breadcrumb List
- Icons List
- Bulleted List
- Ordered List With Lines
Tables
Table elements.
| Name of Document | Size |
|---|---|
| Hudson River | 3.1 mb |
| Raritan Bay | 183 kb |
| Arthur Kill | 17 mb |
| Mohawk River | 264 kb |
| Passaic River | 314 kb |
- Small Table
| Organization | Project | Amount |
|---|---|---|
| America Rows and Swims Newburgh | To continue and expand projects in connection with the Student Ambassador Program founded by the Newburgh Rowing Club in Newburgh | $10,000 |
| Arms-of-the-Sea Productions | To purchase equipment for a new Arm-of-the-Sea production dealing with fish advisories for the Hudson River | $2,000 |
| The Battery Conservancy | To create a moveable waterfront classroom and to develop a Hudson River/NY Harbor ecology themed curriculum for students visiting Battery Park, Manhattan | $10,000 |
| Brooklyn Bridge Park Conservancy | To fabricate, construct, and install the Discovery Station in the Conservancy's Environmental Education Center in Brooklyn | $7,000 |
| City Parks Foundation | For education programs and to improve and maintain park trails along the Hudson River in Inwood Hill Park and Riverdale Park in NYC | $5,000 |
- Large Table
Links
Link elements evo-link.
- Link
- Inverse Link
- Link with icon
- Inverse Link With Icon
Buttons
Button elements #.
- Button
- Inverse Button
- Inverse Button with Icon
Forms
Form elements #.
- Mega Search
- Mega Search with Link
- Large Email
Stay Informed
- Sign up with your email address and stay up to date on the latest Hudson + Harbor news.
- Footer Email
- Text Input
- Dropdown Input
- TextArea Input
- Checkbox Input
- File Upload
- Custom File Upload Button
8 characters or more
- Sample Error Message
- Disabled Input States
Videos
Video elements #.
- Video