Style Guide
Default Blocks
Headings
Heading 1 Page Title
Usage: Heading 1 is the largest header and is typically used as the page title.
Heading 2 – Section
Usage: H2 – Section is utilized only when you need to differentiate main sections in content areas, typically on very long or complex pages. For standard content, it’s best to start with the standard H2.
Heading 2
Usage: H2 is the first level heading in the content area. When adding new content to pages or posts, this should be the top level heading and should be used to break up text into main sections.
Heading 3
Usage: H3 is the second level heading in the content area.
Heading 4
Usage: H4 is the third level heading in the content area.
Usage: H5 is the fourth level heading in the content area.
Heading 6
Usage: H6 is the fifth level heading in the content area.
Text Styles
Intro Text
Vivamus imperdiet pharetra tempus. Duis cursus iaculis lectus, sed rutrum turpis sollicitudin sit amet.
Usage: The intro class should be used for introductory paragraphs on landing pages that need more visual prominence or need to be set apart in some way from the rest of the text. To apply an intro class, create a paragraph block, open the sidebar block settings, and choose the “Introduction” button from the Styles panel.
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus nunc consequat mauris volutpat, eleifend accumsan metus tempor. Cras venenatis, urna in tincidunt maximus, nisi mauris cursus sem, quis volutpat ex nulla nec est. Mauris ornare orci diam, ut pretium eros tristique in. Donec massa mi, ultricies sit amet velit ut, semper vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.
Quote
Mauris eleifend sem id velit tincidunt, nec dapibus ex consectetur. Pellentesque dignissim vestibulum neque nec varius. Estibulum a varius metus. Quisque a ex ante. Morbi purus urna, tristique a cursus vel, dictum id felis. Proin nec tristique mi.Lorem Ipsum, dolor semet
Quote Author
Usage: A quote block is used for quotations or to highlight a specific piece of content. A citation can be added below the quote, if necessary.
Separator
Usage: Also known as a ‘horizontal rule’, a separator defines a thematic break in a page.
Other
Usage: A hyperlink is used to link from one page to another, or to an image or document. Use the popup toolbar to add a link.
This is bold, this is italic, this is underlined
Usage: Italics can be used for added emphasis or to denote an article. Bold defines important text. Tip: Avoid using underline since it could be confused for a hyperlink. Add an underline by selecting the text, and hitting cmd + U on Mac or ctrl + U on PC.
Lists
Bulleted List
- Risus ipsum maximus enim
- Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
- Sed sagittis dictum felis
Usage: Use the list block to create an unordered list.
Numbered List
- Risus ipsum maximus enim
- Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
- Sed sagittis dictum felis eu porttitor
Usage: Use the list block to create a numbered list.
Colors
Black #000000
Dark #343B3B
Orange #E6732C
Yellow #FFCA6B
Green #008553
Red #F05125
Buttons & Links
Content and Image
Usage: This block comes pre-populated with a Heading, Paragraph, and Buttons block in one column, and an Image block in the other. The Content Position can be set to Left or Right in the Block Settings pane. The Image block can have an optional Background Image or color in the Block Settings. The Image block also accepts a video URL, and can have an optional Image and Lightbox effect.
Content and Image BlockDefault Background Image
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.
Content and Image BlockCustom Background Image
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.
Content and Image BlockWith Video
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.
Video Blocks
Usage: All Video block elements have optional toggles for Lightbox and Custom Poster Image. For the Lightbox, a title and description can be set in the Block Settings pane to display when the Lightbox is active. Setting a Custom Poster Image in the Block Settings overrides the default display from YouTube, and displays the custom “play” icon.
3-column Video Layout – no preview image
Usage: Set the parent Columns block to “Video” to appropriately style the video and caption
Location
Location
Location
3-column Video Layout – with preview image
Location
Location
Location
Video Carousel
Usage: A Carousel block element with Youtube videos on each slide. On the parent Carousel block, there are toggles to display Dots, Arrows, Caption for each slide, and Page Number.
Grasslands National Park Bison Cam
by explore.org
The Giant Flying Fox
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Auto-Play Livestream Video
Usage: To embed a livestream video to autoplay on page load, add a Custom HTML block. Copy the Embed code from the Youtube Video, and delete everything in the src URL after the question mark. Add “autoplay=1&mute=1” after the question mark to set the video to autoplay on mute (following accessibilty best practices).
Featured Video Block
Usage: This full-width Feature block is used in place of a featured image as the hero of a page or blog Post.
Content Group Blocks
Default Group
Usage: The default content area size is 700px.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est ante, pretium et, cursus quis, nonummy ut, lacus. Morbi volutpat ante ac elit. Phasellus gravida. Vestibulum egestas interdum est. Aenean quis nisi vitae ante pretium convallis. Nulla facilisi. Curabitur non justo. Sed massa. Aenean diam lectus, aliquet vel, blandit sed, euismod in, tortor. Cras interdum. Etiam hendrerit vehicula nunc.
Full Width Group
Usage: Grouping blocks with the style “Full Page Width” will increase the horizontal space the blocks take up to 1400px.
Consectetuer adipiscing elit. In est ante, pretium et, cursus quis, nonummy ut, lacus. Morbi volutpat ante ac elit. Phasellus gravida. Vestibulum egestas interdum est. Aenean quis nisi vitae ante pretium convallis. Nulla facilisi. Curabitur non justo. Sed massa. Aenean diam lectus, aliquet vel, blandit sed, euismod in, tortor. Cras interdum. Etiam hendrerit vehicula nunc.
