Styleguide

Paragraph text example, this modules default contents purpose is to show you what the css formatting of all text elements on this template are setup to look like. This is a great point of reference when you need to know what heading tags are styled to look like, buttons, ordered lists ect. Below is some brief information on how you as a marketer can leverage css classes to take your page editing a step further, providing flexibility beyond what the default text styles are unaltered.

Custom Text Classes

Classes can be added to html text elements to alter appearance via the source code side of your Rich Text Editor.

(This require editing html, if you are uncomfortable working in HTML contact your developer)

Heading Classes:

<h1>This is what the html of an h1 heading with no class looks like</h1>

This is what an h1 heading with no class looks like

<h1 class="h4">This is what the html of an h1 heading styled like an h4 using a css class looks like</h1>

This is what an h1 heading styled like an h4 using a css class looks like

Heading classes available on this theme:

h1

h2

h3

h4

h5

h6

display-large

Paragraph Text Classes:

<p>This is what the html of a paragraph with no class looks like</p>

This is what a paragraph with no class looks like

<p class="text-lg">This is what the html of a paragraph styled using the "text-lg" css class looks like</p>

This is what a paragraph styled using the "text-lg" css class looks like

Paragraph classes available on this theme:

text-lg

text-md

text-sm

text-xs

text-overline

Hyperlink Text Classes:

<a href="https://www.celerium.com/">This is what the html of an hyperlink with no class looks like</a>

This is what a hyperlink with no class looks like

<a class="btn btn-yellow" href="https://www.celerium.com/">Yellow Button</a>

Yellow Button

Hyperlink classes available on this theme:

btn btn-yellow = btn btn-yellow

btn btn-sm btn-yellow = btn btn-sm btn-yellow

btn btn-yellow arrow-right = btn btn-yellow arrow-right

btn btn-sm btn-yellow arrow-right = btn btn-sm btn-yellow arrow-right

btn btn-outline = btn btn-outline

btn btn-sm btn-outline = btn btn-sm btn-outline

btn btn-outline arrow-right = btn btn-outline arrow-right

btn btn-sm btn-outline arrow-right = btn btn-sm btn-outline arrow-right

arrow-link arrow-right = arrow-link arrow-right

Unordered list classes:

<ul class="checkmark-list">

• List item one
• List item two
  • Sub list item one
  • Sub list item two
• List item three
• List item four aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.List item four aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Unordered lists

• List item one
• List item two
  • Sub list item one
  • Sub list item two
  • Sub list item three
• List item three
• List item four aliquet quam id dui posuere blandit. List item four aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ordered list

1. List item one
2. List item two
   1. Sub list item one
   2. Sub list item two
   3. Sub list item three
3. List item four aliquet quam id dui posuere blandit. List item four aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. List item four aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H1 - Heading

H2 - Heading Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus.

Paragraph text class "text-overline" ipsum dolor sit amet, consectetur adipiscing elit.

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Lorem ipsum sapien massa, dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit.Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

H3 - Heading

Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

H4 - Heading Lorem Ipsum Dolor Eset

Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

H5 - Heading

Sed porttitor lectus nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta.

H6 - Heading

Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

"Blockquote Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Blockquote Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Blockquote Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Blockquote Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Blockquote Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi."