This page shows all page content elements that may be used within the Grande Prairie Church of Christ website. For consistency, please refer here to choose styling which best reflects any new content added.
To add an element onto a page, copy the code from the boxes below and paste it into the HTML page editor.
Table of contents
Text-Level
Headings
- Section Title
- Heading Group
- Heading Level 2
- Heading Level 3
- Heading Level 4
- Heading Level 5
- Heading Level 6
Messages
Lists
Images
Buttons
Bold Text
Maecenas vel nisi quamHTML code
Back to topItalic Text
Maecenas vel nisi quamHTML code
Back to topHorizontal Rule
HTML code
Back to topBlockquote
Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam.
HTML code
Back to topTable
| Vivamus vel | In lacus libero |
|---|---|
| Lobortis faucibus | Tincidunt sodales |
| Eget venenatis vitae | Porttitor tincidunt sodales |
| Lobortis faucibus | Tincidunt sodales |
| Eget venenatis vitae | Porttitor tincidunt sodales |
HTML code
Back to topsection-title
Maecenas vel nisi quam
Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.
HTML code
Back to topHeading Group
Big Title
Small Title
HTML code
Back to topHeading Level 2
Maecenas vel nisi quam
Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.
HTML code
Back to topHeading Level 3
Maecenas vel nisi quam
Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.
HTML code
Back to topHeading Level 4
Maecenas vel nisi quam
Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.
HTML code
Back to topHeading Level 5
Maecenas vel nisi quam
Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.
HTML code
Back to topHeading Level 6
Maecenas vel nisi quam
Donec magna lacus, malesuada venenatis molestie a, dignissim vitae sapien. Nunc facilisis tempor felis vel lobortis. Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam. Etiam tellus turpis, molestie eu elementum nec, dictum in arcu.
HTML code
Back to topInfo Message
This is an info message
HTML code
Back to topSuccess Message
This is a success message
HTML code
Back to topWarning Message
This is a warning message!
HTML code
Back to topBullet List
- Duis et augue in purus condimentum condimentum eget eget odio.
- Maecenas vel nisi quam.
- Nullam in orci sit amet.
- In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.
HTML code
Back to topNumbered List
- Duis et augue in purus condimentum condimentum eget eget odio.
- Maecenas vel nisi quam.
- Nullam in orci sit amet.
- In lacus libero, egestas eget venenatis vitae, posuere porttitor elit. Vivamus vel tristique magna.
HTML code
Back to topDefinition List
- In at sodales nisl
- Sed non mauris felis, non iaculis ante. Duis et augue in purus condimentum condimentum eget eget odio. Etiam eget sem urna.
- Vestibulum ante ipsum primis
- Proin faucibus sem sed sapien dictum iaculis. Sed in lacus magna.
HTML code
Back to topLeft-Aligned Image
HTML code
Back to topRight-Aligned Image
HTML code
Back to topLeft-Aligned Image (Captioned)
Image caption purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam
HTML code
Back to topRight-Aligned Image (Captioned)
Image caption purus condimentum condimentum eget eget odio. Etiam eget sem urna. Maecenas vel nisi quam
Settings:
HTML code
Back to topButton
Click this buttonHTML code
Back to topSmall Button
Click this buttonHTML code
Back to topLarge Button
Click this buttonHTML code
Back to topOther Button Colors
Instructions
Every button size can have any of these alternate colors by substituting the color name for of the following values: blue, yellow, brown, or green.
HTML code
Back to topInverted Button Colors
Instructions
Every button size can have an inverted version where the background is white. Just add the attribute "invert=true" to the shortcode.