STYLE GUIDE
-
Image Specifications and Canva Templates
You can access image specifications and Canva templates here. For a quick link enter "/specs" after your domain. Example: friendsaustin.org/specs
-
Color Themes
Blue
#00AAEELight Blue
#ECF9F9Orange
#FF5522Light Orange
#FEF8E7Gray
#555555Light Gray
#F1F2F2 -
Fonts
PAGE and BLOCK TITLES, and SECTION HEADINGS: "Archivo Narrow", download font
Body font and "Textbox" Headings: "Roboto", download font
Heading 2
Heading 3
Heading 4
Content Block Menu:
NEW"Our Mission" Block
Chapters can chose a local photo but may not change the Network Messaging
Our Mission
Impacting generational change by empowering youth who are facing the greatest obstacles through relationships with professional mentors.
12+ years, no matter what.
NEW"Our Vision" Block
Chapters can chose a local photo but may not change the Network Messaging
Our Vision
Our vision is that one day all children who need a Friend will have a long-term, consistent relationship with a caring adult who believes in them.
NEW"Our Values" Block
Chapters can chose a local photo but may not change the Network Messaging
NEW"Button Group" Block
Add up to 3 buttons. They sit side by side on desktop and stack on mobile.
BUTTON ONE
BUTON TWO
BUTTON THREE
NEW"Styled Text & Video" Block
For YouTube or Vimeo video embeds.
Title (optional)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus pretium diam sed vehicula. Suspendisse sed lacinia sem, non volutpat lorem. Proin urna sapien, feugiat in nulla nec, imperdiet faucibus velit. Curabitur et efficitur turpis. Donec aliquet tortor sit amet lectus fringilla dignissim.
OPTIONAL BUTTONNEW"Section Heading" Block
Option to select Blue, Orange, or Yellow underlines.
Section Heading
Section Heading
Section Heading
NEW"Horizontal Rule (separator)" Block
Choose between full-width or half-width line.
NEW"Spacer" Block
Add an extra "blank" space, when needed between blocks.
"Text" Block
Basic text field with headings, lists and paragraphs. Option for blue text. You can add images and view/edit basic html source code <>.
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio.
- Sed quam nunc, pellentesque sed magna ac, semper feugiat elit.
- Sed quam nunc, pellentesque sed magna ac, semper feugiat elit.
Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
Heading 2
Heading 3
Heading 4
"Text & Image" Block
Basic text field with image, aligned left or right.
Image Caption: There is the option to add an image caption
Heading 3
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
"2 COLUMN TEXT" Block
Basic text fields, with option to add images. Chose you background theme color. Option to add buttons. Columns will collapse under each other on mobile devices.
Column 1
- Donec aliquet tortor sit amet lectus fringilla dignissim.
- Aliquam nec ex tristique justo eleifend rutrum vitae eget ante. Nullam ullamcorper sagittis tincidunt.
- Donec mi ligula, auctor quis pellentesque quis, efficitur vitae diam.
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
"3 COLUMN TEXT" Block
Basic text fields, with option to add images. Chose you background theme color. Option to add buttons. Columns will collapse under each other on mobile devices.
Column 1
- Donec aliquet tortor sit amet lectus fringilla dignissim.
- Aliquam nec ex tristique justo eleifend rutrum vitae eget ante. Nullam ullamcorper sagittis tincidunt.
- Donec mi ligula, auctor quis pellentesque quis, efficitur vitae diam.
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
Column 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus pretium diam sed vehicula. Suspendisse sed lacinia sem, non volutpat lorem. Proin urna sapien, feugiat in nulla nec, imperdiet faucibus velit. Curabitur et efficitur turpis. Donec aliquet tortor sit amet lectus fringilla dignissim. Aliquam nec ex tristique justo eleifend rutrum vitae eget ante.
Column 3
- Donec aliquet tortor sit amet lectus fringilla dignissim.
- Aliquam nec ex tristique justo eleifend rutrum vitae eget ante. Nullam ullamcorper sagittis tincidunt.
- Donec mi ligula, auctor quis pellentesque quis, efficitur vitae diam.
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
"IMAGE" BLOCK
You have the option to upload a separate "mobile" image, to be "swopped" out.
Image Caption. Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
"PHOTO GALLERY" Block
You have the option to link the images to entries or external URLs
"VIDEO" Block
This is a full page video
"STYLED TEXT & IMAGE" Block
Option to select background color and alignment
Block title
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
BUTTON OPTIONAL"STYLED TEXT" Block
Option to select background color and alignment
Block title
Sed quam nunc, pellentesque sed magna ac, semper feugiat elit. Pellentesque odio eros, dignissim dignissim vulputate vel, sagittis ut risus. Aliquam rhoncus varius efficitur. Curabitur eget placerat odio. Praesent iaculis, magna eu interdum elementum, risus orci tristique lectus, in hendrerit lectus arcu ultrices elit. Class aptent taciti sociosqu ad litora torquent.
BUTTON OPTIONAL