Style Guide
Default Blocks
Headings
Selecting the style “Expandable” on a Heading block adds the yellow plus symbol and hides the content below it until the user clicks to expand. Create a Group with the Heading as the first element to determine which blocks get hidden.
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
Default 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 Default block style to create a bullet-pointed list.
Plain No Bullets 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: Using the style “Plain No Bullets” for a List block will create an unordered list without bullet points, and is used to create a Table of Contents on pages like Biblical Parenting
Topics 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: Select the style “Topics List” from the Block settings, and add links to the list items to add the Arrow link style to each item, like in the Resources and Media section on the home page
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
Red #EB151C
Blue #1C1FE6
Gray #696A65
Light Gray #DDE0E0
Yellow #FEF101
Buttons & Links
Media and Text
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.
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.
Card Blocks
Grid Layouts
Every aspect of Snowbird’s 11 camp weeks focuses on challenging and encouraging students with the Gospel of Jesus Christ — by any means necessary!
SWO Summer removes students from their comfort zones and provides a fresh, new perspective of Christ’s life, Scripture and the necessity of Biblical community and discipleship.
Weekly Schedule
Usage: Overall number of columns and row height are set on the Cards Container block styles. Each card’s column or row span is set in the Card block styles, and can be set with an image, text, links, or combination of these elements. The image focal point is set in the Card block styles.
The Bible is the Word of God, written by men, divinely inspired of God and is sufficient for salvation, for trusting Him completely, and for obeying Him faithfully.
“Snowbird Wilderness Outfitters exists to proclaim the Gospel of Jesus Christ through the exposition of Scripture and personal relationships in order to equip the Church to impact this generation.”
ContacT us
Our property is rustic, clean, and effective for ministry. Click the link below to view our worship buildings, cabins, and bathhouse facilities.
Lorem Ipsum 1
Lorem Ipsum 2
Lorem Ipsum 3
Lorem Ipsum 4
Lorem Ipsum 5
Lorem Ipsum 6
Usage: The number of columns is configurable in the Cards Container block settings. These Card blocks use the Default block style with a Heading and Button block.
Lorem Ipsum 1
Lorem Ipsum 2
Usage: The default Card block style adds a Title and Paragraph over an image. The image aspect ratio and focus point can be set in the Card block settings.
BOLD EXPOSITIONAL PREACHING
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
HIGH-ADVENTURE RECREATION
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
GOSPEL-CENTERED DISCIPLESHIP
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Usage: The Default card block style with a Shadow color applied. Used on the Home page and Topic hub landing pages.
Hover Cards
Lorem Ipsum 1Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem Ipsum 2Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Usage: Setting the block style of the Card to “Hover” adds linking functionality
Video Embeds Blocks
Direct Embed
Usage: The embedded video will expand to fill the space it is in. Paste in the YouTube URL as found in the browser and hit “embed”.
With Custom Poster Image
Usage: Selecting a “Custom Poster Image” in the block settings will set a preview image for the given video, as well as the custom play button styling.
Link with Lightbox Pop Up Overlay
Usage: Videos linked in text or in button links can display with a lightbox pop up overlay on the current page, by adding the custom class “play” in the Additional CSS Class(es) of the Block Editor. This block feature is used on pages that link to a lot of videos, such as the Bible Study Video Series.
Other Custom Blocks
Profile Block
Usage: Each tile can be configured with a headshot, name and position or title. A brief description, and buttons to support, email or contact, and access the person’s bio and articles are viewable in the drop down of each profile’s tile.
Person name 1
Person name 2
Person name 3
Person name 4
Person name 5
Person name 6
Person name 7
Person name 8
Program Block
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est ante, pretium et, cursus quis, nonummy ut, lacus
Lorem ipsum dolor sit amet, consectetuer adipiscing
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.
Another quote Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est ante, pretium et, cursus quis, nonummy ut, lacus
22 Lorem ipsum dolor sit amet, consectetuer adipiscing
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.
Podcast Embed
Usage: Embed a new podcast by pasting in the URL.
Quotes
Usage: A rotating carousel of testimonials over a static image. Each Quote block has an optional Citation field.
When I asked students what their favorite part of camp was, about half said the teaching. Wow. What a testimony to their experience.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est ante, pretium et, cursus quis, nonummy ut, lacus. Morbi volutpat ante ac nunc.
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
Columns
Columns with vertical separators
Recommendations About the Snowbird Institute Program
I am happy to commend Snowbird’s ministry. They are committed to the gospel of Jesus Christ, and desire to see young people saved and for them to grow in Christ.
Dr. Thomas R. Schreiner
The Southern Baptist Theological Seminary
The SWO Institute has had a huge impact on my life. For me, it was a time the Lord really used to teach me about himself and mature me just in everyday life. It also impacted how I serve and care… I really enjoyed the classes that ranged from practical life stuff with Brody to really looking at theological and scriptural knowledge.
Brittany Pleasants
Former Student
Choosing a camp is often a decision between a fun, beautiful, adventurous facility or strong leadership and great teaching for your students. At Snowbird, these two things collide. You’ll have an unforgettable experience and challenging Gospel-centered teaching from the Word of God. I love Snowbird Outfitters.
Ben Dockery
Pastor, Christ Church
Columns with rounded corners
Recommendations About the Snowbird Institute Program
I am happy to commend Snowbird’s ministry. They are committed to the gospel of Jesus Christ, and desire to see young people saved and for them to grow in Christ.
Dr. Thomas R. Schreiner
The Southern Baptist Theological Seminary
The SWO Institute has had a huge impact on my life. For me, it was a time the Lord really used to teach me about himself and mature me just in everyday life. It also impacted how I serve and care… I really enjoyed the classes that ranged from practical life stuff with Brody to really looking at theological and scriptural knowledge.
Brittany Pleasants
Former Student
Choosing a camp is often a decision between a fun, beautiful, adventurous facility or strong leadership and great teaching for your students. At Snowbird, these two things collide. You’ll have an unforgettable experience and challenging Gospel-centered teaching from the Word of God. I love Snowbird Outfitters.
Ben Dockery
Pastor, Christ Church
Gallery Blocks
Default
Logos
Usage: In the Gallery block styles, select “Logos”. This will automatically resize logos to a maximum width of 200px and maximum height of 120 pix for a uniform look. For this block style, the “Columns” count setting is ignored.
Full Width Styles
Usage: set the Gallery block styles to “Full Width” to span the full page width
Carousel
Usage: In the Gallery block styles, select “Carousel” for a manually rotating carousel of images
Hero Block
Usage: The Home page hero banner carousel with top level heading text, buttons, and a banner images for each slide. Autoplay is togglable in the block settings, as is the speed of the slide rotation.
Lorem Ipsum Dolor
Lorem Ipsum 2
Background Slides Block
Usage: A full-width block to display static list of slides with an image and heading. When a user hovers over an option, the image changes to match the given heading text. The first slide set is the default shown to users when the page loads.
Summer CAmp Recreation
Posts Block
Usage: A full width block to show posts based on Topic, Author, or Category. Block settings include a certain number of posts to display, show available taxonomy and keyword search filters, and show promoted posts first. Posts can be included or excluded based on their ID. Posts to display / available for users to search can be limited by Post Type, Category, Tags, or Topics.
Content with Sidebar Blocks
Usage: Used on pages like Summer Camp to show users the description and details of the event in the Main Content, and the schedule in the Sidebar Content. These blocks stack vertically on mobile, with Sidebar Content below the Main Content.
Content Group Blocks
Default Group
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.
Narrow Content Group
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 (no background color)
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.
With Background Colors
Default
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.
Narrow content
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 (with background color)
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.
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 (with angled background color)
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.
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.
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 (with angled background color, & speckle texture)
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
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. nunc.
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 (with background color, & speckle texture)
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.
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.