This is an example H1

This is an example H2

This is an example H3

This is an example H4

This is an example H5
This is an example H6

Palette:

primary (#49a942)
secondary
info
warning
danger
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700 (#4d4d4d)
gray-800
gray-900

This is an example paragraph. This is bold text elit, sed do eiusmod tempor incididunt ut inline link labore et dolore magna aliqua. Ut enim ad minim veniam, strikethrough text laboris nisi ut aliquip ex ea commodo consequat. Underlined text reprehenderit in marked text velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <inline code> non proident, sunt in culpa qui officia this is abbr text mollit anim id est laborum. ctrl + , (keyboard instructional text).

TIP: You can place shortcodes within any WordPress editor.

Example unordered list:

  • Item 1
  • Item 2 (a longer item here)
  • Item 3
    • Nested Item 1
    • Nested Item 2
  • Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
  • Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Example ordered list:

  1. Item 1
  2. Item 2 (a longer item here)
  3. Item 3
    1. Nested Item 1
    2. Nested Item 2
  4. Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
  5. Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Example definition list:

Definition Term
Definition description.
Definition Term 2
Definition description 2.
Definition Term 3
Definition description 3.

Example blockquote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Example <hr> (horizontal rule):


Output buttons:

Handy shortcode (default values shown here): [btn text="Contact Us" url="/contact/" color="primary" size="" ghost="false" block="false"]

  • Change text to whatever text you want displayed on the button (defaults to “Contact Us” if not defined)
  • Change url to wherever you want the button to link to (defaults to “/contact/” if not defined)
  • color can be primary (default), secondary, light or dark
  • size can be large, small, or empty (default, which is medium-sized)
  • ghost can be true or false (default), which generates an outlined button instead of a solid-background one
  • block can be true or false (default), which generates a full-width block button

Small Medium (no size defined) Large

Primary Color (no color defined) Secondary Color Light Color Dark Color

Primary Ghost Secondary Ghost Light Ghost Dark Ghost

Example Block Button


Output your content in columns:

In any WordPress editor, simply wrap your content with these shortcodes (replacing the ellipses with your content):

  • Two columns: [columns-two] ... [column-split] ... [/columns-two]
  • Three columns: [columns-three valign="bottom"] ... [column-split] ... [column-split] ... [/columns-three]
  • Four columns: [columns-four valign="center"] ... [column-split] ... [column-split] ... [column-split] ... [/columns-four]
  • Note: valign (vertical alignment between columns) is optional and defaults to “top” if left empty or undefined.

Example two-column output:

Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example three-column output (with valign="center", and centered content within):

Donec id elit non mi porta gravida at eget metus.

Vivamus sagittis magna, vel scelerisque nisl consectetur et lacus vel augue laoreet rutrum faucibus dolor auctor.

Praesent commodo cursus.