Style Guide
Heroes
Large Hero
Gutenberg Blocks
This is a container with a background image, H1, H2 and Paragraph pre-styled. You can add-n-remove as needed. Only use the Title (H1) if this is the first section of the page.
This is the Title (H1)
This is the Subtitle (H2)
This is some paragraph text that goes underneath or is completely deleted.
Small Hero
Gutenberg Blocks
This is a container with a background image, H1, H2 and Paragraph pre-styled. You can add-n-remove as needed. Only use the Title (H1) if this is the first section of the page.
This is the Title (H1)
This is the Subtitle (H2)
This is some paragraph text that goes underneath or is completely deleted.
Elements
Image with Large Caption
Gutenberg Blocks
Look for Image / Large Caption in the list of blocks to use this. It’s a simple image block with the caption at the bottom (on the front-end of the site, the caption will appear over the image). These images should not be linked. There is another block for that.
Image with Small Caption
Gutenberg Blocks
Look for Image / Small Caption in the list of blocks to use this. It’s a simple image block with the caption at the bottom (on the front-end of the site, the caption will appear over the image). These images should not be linked. There is another block for that.
Paragraph with Border
Gutenberg Blocks
Look for Paragraph with Border in the list of blocks. This is meant to just highlight a simple line of text.
This is a paragraph
Column Highlight
Gutenberg Blocks
Type /column and select Column Highlight (either Light or Dark). The color (Light/Dark) is the font color you want to have. Note: the background color is NOT apart of the reusable block.
Sunday Drive-in Worship Service
10:30AM
Pray and Play
Following the Children’s Moment at 11am Worship at the Playground Pavilion
Wednesday Bible Study
5pm via Zoom link
Led by Rev. Allison Per-Lee
Study of the Minor Prophets
See notice in ‘From the Pastor’s Desk’
Sunday Drive-in Worship Service
10:30AM
Pray and Play
Following the Children’s Moment at 11am Worship at the Playground Pavilion
Wednesday Bible Study
5pm via Zoom link
Led by Rev. Allison Per-Lee
Study of the Minor Prophets
See notice in ‘From the Pastor’s Desk’
Thick Outline Callout
Gutenberg Blocks
Look for Thick Outline Callout in the list of blocks. This is meant to just highlight a section of text.
One-Line CTA
Gutenberg Blocks
Look for One-Line CTA in the list of blocks. The left side is meant for a few words living inside a paragraph. You can adjust the button colors + the background color of the Container
Check out all of the updates at our WPC Craft Fair Facebook Page!
Image Links
Gutenberg Blocks
Look for Image Links in the list of blocks. The number of columns is required to select prior to loading it in (there is code at the Single Column level that makes the links work correctly).
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
This is a paragraph
Separators
Gutenberg Blocks
Add a Separator Block. Select a color. You can attach any of the following classes to change style.
Default
wpcs-thin
wpcs-large
wpcs-thin-space
wpcs-medium-space
wpcs-large-space
wpcs-full-width
wpcs-wide
Core Styles
These are not reusable blocks. This just shows the default styling for all content across the board. Anything that requires a CSS class will be noted.
Headings
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
wpcs-alt
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique lacus eu nunc iaculis aliquet. Sed at aliquet urna. Maecenas nec felis dictum felis sodales porttitor. Sed sit amet feugiat libero, eget vehicula justo. Suspendisse at feugiat sem. Nulla molestie laoreet augue sit amet viverra. Curabitur tortor eros, mattis ultrices orci condimentum, efficitur commodo augue. Mauris sed justo pulvinar, condimentum magna nec, bibendum massa. Cras mattis ultricies metus et sodales. Nulla commodo est eget ante consectetur molestie. Morbi vel vehicula mauris, ac luctus nibh.
Aenean odio quam, lacinia quis purus vel, facilisis pretium nibh. Phasellus a nulla auctor, accumsan ligula at, viverra odio. In ut ipsum risus. Donec porta maximus diam, ac rutrum orci hendrerit id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae vestibulum nulla. Cras rhoncus consequat pretium. Nam nisi arcu, bibendum sed metus in, finibus consectetur libero. Aenean purus velit, euismod ac justo nec, tempus consequat augue. Phasellus bibendum lacus at consectetur elementum. Cras id magna at lectus placerat laoreet. Phasellus a lacus posuere, gravida urna sed, imperdiet tellus.
- Vestibulum cursus volutpat lorem
- Vitae iaculis justo luctus sed. Sed eu ligula ligula.
- Cras convallis quam ac sem condimentum
- Pharetra rutrum dolor sodales.
Phasellus sapien augue, tincidunt quis pharetra non, mattis eget ligula. Pellentesque volutpat orci felis, fermentum gravida mauris viverra sed. Donec vitae erat non neque blandit interdum. Phasellus ac nunc lorem. Ut vestibulum quam eu metus aliquam, nec tristique turpis faucibus. Aenean volutpat accumsan metus at efficitur. Integer justo nibh, laoreet vitae vehicula sit amet, feugiat in ante. Phasellus venenatis, nibh in congue ultrices, ante enim vulputate leo, ut convallis felis ligula vel elit. Etiam laoreet nibh vitae risus accumsan lacinia ac ut lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut mollis est non rhoncus eleifend.
Buttons
As the text inside of each button, I have written out the CSS class to apply at the Button level to make the size correct. Each button, I have used a different background and text color.
wpcs-header-button-border
Create a Container with a Header 3 and a Buttons block. Attach the class at the Container Level to apply border. Chose Alignment.