Style Guide
Logo & Brand Colors
This is the logo of River Edge Behavioral Health. It should be displayed on a blue background whenever possible. Below are the primary and secondary colors used in the website.
Primary blue: HEX 006fba
Primary dark blue: HEX 024774
Secondary black: HEX 212529
Secondary white: HEX ffffff
Tertiary teal: HEX 3bd4ae
Tertiary tan: HEX f0ede3
Heading Styles
Heading 1
font-family: "Encode Sans Condensed", sans-serif;
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
color: #212529;
margin-bottom: 2rem;
Heading 2
font-family: "Encode Sans Condensed", sans-serif;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.2;
color: #006fba;
margin-bottom: 2rem;
Heading 3
font-family: "Encode Sans Condensed", sans-serif;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
color: #212529;
margin-bottom: 2rem;
Heading 4
font-family: "Encode Sans Condensed", sans-serif;
font-size: 1.125rem;
font-weight: 800;
line-height: 1.2;
color: #212529;
margin-bottom: 2rem;
Heading 5
font-family: "Encode Sans Condensed", sans-serif;
font-size: 1rem;
font-weight: 800;
line-height: 1.2;
color: #212529;
margin-bottom: 2rem;
Heading 6
font-family: "Encode Sans Condensed", sans-serif;
font-size: .875rem;
font-weight: 800;
line-height: 1.2;
color: #212529;
margin-bottom: 2rem;
Custom heading embellishments are available in custom styles. They should be used only on Heading 2 elements, generally for key sections that deserve special call-outs. There are two versions: Lines on Sides and Lines on Right:
Heading 2
Heading 2
Text Styles
The site typically uses black text but offers other text styles that can be used as needed
Black Text: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Blue Text: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Dark Blue Text: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Teal Text: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
White Text: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Playfair Text: Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Buttons
Button styles are shown below. When creating a new button, the style class should be added last, after all other formatting and links have been applied.
Blue Button. btn-blue
Use for internal links to areas of the site that are critical connection points for audiences (e.g. locator, learn about brick, etc.).
Secondary Blue Border Button. btn-blue-border
Used for internal links to other areas of the site as well as external. Interchangeable with the secondary teal button.
Secondary Teal Border Button. btn-teal-border
Used for internal links to other areas of the site as well as external. Interchangeable with the secondary blue outline button.
Other Styles
Image Cards
Stylized cards can be created to bring emphasis to prominent figures or bring a sense of order when you wish to display or highlight multiple images of individuals
- Ensure the images have no set width or height so that they display properly on mobile
- Images should be optimized (compressed) for fast load times. Try to keep them below 250KB.
- Place images within columns of 3 or 4 for best results when displaying multiple cards.
<div class="card shadow h-100"> <img alt="Cass Hatcher, CCM, EDFP" class="card-img-top aspect-ratio-1-1 img-fluid" src="https://www.river-edge.org/skins/userfiles/images/240118-re-board_hs_021-edit_flip.jpg" /> <div class="card-body bg-blue rounded-bottom d-flex align-items-center justify-content-center text-center"> <p><strong>Cass Hatcher, CCM, EDFP</strong><br /> Chief Executive Officer</p> </div> </div>
Cass Hatcher, CCM, EDFP
Chief Executive Officer
River Edge Crisis Service Center
60 Blandy Way
Milledgeville, Georgia 31061
478-451-2700
*Mental Health and Substance Use Disorder Crisis Services
Information Cards
These cards can be created to house information for locations, events, or other things of this nature.
- Place the cards within columns of 3 or 4 as their size is determined by the container.
- Phone numbers can also be linked if you double click the text and press Ctrl + K
<div class="card shadow h-100"><div class="card-body"><p><a href="https://www.river-edge.org/mental-health/crisis-service-ctr.cms"><b>River Edge Crisis Service Center</b></a><br />60 Blandy Way<br />Milledgeville, Georgia 31061<br />478-451-2700</p><p><i>*Mental Health and Substance Use Disorder Crisis Services</i></p></div></div>