Style Guide

Headings..

H1 Lorem ipsum dolor sit amet, consectetur adipiscing

H2 Lorem ipsum dolor sit amet, consectetur adipiscing

H3 Lorem ipsum dolor sit amet, consectetur adipiscing

H4 Lorem ipsum dolor sit amet, consectetur adipiscing

H5 Lorem ipsum dolor sit amet, consectetur adipiscing
H6 Lorem ipsum dolor sit amet, consectetur adipiscing
<h1> Lorem ipsum dolor sit amet, consectetur adipiscing</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing </h3>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing</h4>
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing </h5>
<h6>Lorem ipsum dolor sit amet, consectetur adipiscing</h6>
PARAGRAPH

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique viverra arcu, et vehicula risus dignissim vitae. Fusce ac tristique ligula. Praesent iaculis hendrerit tellus, sit amet feugiat turpis faucibus sed. Nam ut tortor pretium, scelerisque nisi ut, scelerisque massa. Donec enim enim, fermentum ut rhoncus vel, luctus non eros. Morbi mattis velit pretium volutpat ullamcorper.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tristique viverra arcu, et vehicula risus dignissim vitae. Fusce ac tristique ligula. Praesent iaculis hendrerit tellus, sit amet feugiat turpis faucibus sed.

Nam ut tortor pretium, scelerisque nisi ut, scelerisque massa. Donec enim enim, fermentum ut rhoncus vel, luctus non eros. Morbi mattis velit pretium volutpat ullamcorper.</p>

Buttons

BUTTON WITH BLUE BORDER

Lorem Ipsum

<a href=" " class="btn-border-blue">Lorem Ipsum</a>
<button type="button" class="btn-border-blue">Lorem Ipsum</button>
BUTTON WITH GREEN BORDER

Lorem Ipsum

<a href=" " class="btn-border-green">Lorem Ipsum</a>
<button type="button" class="btn-border-green">Lorem Ipsum</button>
BUTTON WITH ORANGE BORDER

Lorem Ipsum

<a href=" " class="btn-border-red">Lorem Ipsum</a>
<button type="button" class="btn-border-red">Lorem Ipsum</button>
BUTTON WITH BLUE BACKGROUND

Lorem Ipsum

<a href=" " class="btn-block-blue">Lorem Ipsum</a>
<button type="button" class="btn-block-blue">Lorem Ipsum</button>
BUTTON WITH GREEN BACKGROUND

Lorem Ipsum

<a href=" " class="btn-block-green">Lorem Ipsum</a>
<button type="button" class="btn-block-green">Lorem Ipsum</button>
BUTTON WITH ORANGE BACKGROUND

Lorem Ipsum

<a href=" " class="btn-block-red">Lorem Ipsum</a>
<button type="button" class="btn-block-red">Lorem Ipsum</button>
BUTTON WITH BLUE BACKGROUND AND ROUND CORNERS

Lorem Ipsum

<a href=" " class="btn-round-blue">Lorem Ipsum</a>
<button type="button" class="btn-round-blue">Lorem Ipsum</button>
BUTTON WITH GREEN BACKGROUND AND ROUND CORNERS

Lorem Ipsum

<a href=" " class="btn-round-green">Lorem Ipsum</a>
<button type="button" class="btn-border-green">Lorem Ipsum</button>
BUTTON WITH ORANGE BACKGROUND AND ROUND CORNERS

Lorem Ipsum

<a href=" " class="btn-round-red">Lorem Ipsum</a>
<button type="button" class="btn-round-red">Lorem Ipsum</button>

Form Items

SIMPLE TEXTBOX
<input type="text"/>
PASSWORD FIELD
<input type="password"/>
EMAIL FIELD
<input type="email"/>
SELECT FIELD
<div class="select-wrapper">
<select>
<option>Option1</option>
<option>Option 2</option>
</select>
</div>
FORM ITEM
<div class="form-item">
<label>Hi I am a label of a text input field</label>
<input type="text"/>
</div>

Div Classes

A BLOCK WITH PADDING AND BORDER
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div class="block-border">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
A BLOCK WITH PADDING AND WTHOUT BORDER
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<div class="block-no-border">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
PAGE HEADER

Look! I am a page header

<div class="form-header-outer-wrapper">
<div class="form-header-inner-wrapper">
<h1>Look! I am a page header</h1>
</div>
</div>

Icons


Custom Icons


  • icon-favorite2
  • icon-favorite-flagged
  • icon-church-icon
  • icon-review
  • icon-pastor
  • icon-bible
  • icon-church
  • icon-counseling
  • cf-dashboard-icon
  • cf-profile-icon
  • cf-logout-icon

Font Awesome Icons used on CF


  • icon-line-chart
  • icon-question-circle
  • icon-info-circle

  • Use A - just the icon:

    Use B - icon with words to the right (words always in italics):

    Use C - in a span class

    Some have larger versions and classes...

    Church Review



    Same in a span class...





    Info Icons with Tipsy


     

     

     


    HTML Snippets and DIV Classes



    DIV class: church-profile-eight-header



    DIV class: church-profile-four-ministries-phrase
    div class: church-profile-four-ministries-phrase


    h5 class="sub-header"


    DIV Classes


    Div class church-profile-third-title




      Premium Support - Your Account Manager