Style Guide

Headings

For emphasis, use headings. DO NOT use the H1 heading as it is for top level titles only. Also do not use strong or bold tags on their own since these won’t give you the level structure you want. Use those tags only for emphasis within a sentence. Choose the appropriate heading level H2 through H6. Their styles and code are below.

Drop Cap Styling and Use

This is a drop cap. It is used to highlight the first word on a page. Also in this section, we are showing you the Pull Quote Style. Use it to isolate or feature a quote from the page of text.

Pull Quote Styling and Use

Aliquam luctus, diam auctor ullamcorper luctus, ante erat condimentum orci, sit amet luctus lacus lacus id nulla. Pellentesque ornare ipsum pharetra sem consectetur interdum. Integer arcu elit, accumsan at fermentum sed, euismod condimentum magna. Sed rutrum lectus mi, in interdum tellus fringilla sit amet. Ut viverra rhoncus urna, rhoncus eleifend lacus consectetur non. Duis venenatis est vitae porttitor convallis. Curabitur facilisis est at augue pulvinar, nec vestibulum quam luctus. Nullam ullamcorper mauris ut viverra elementum. Proin elementum aliquam elit, in rutrum elit ultricies id. Maecenas vehicula, mi id pellentesque interdum, tortor erat accumsan augue, in sodales eros felis vel nisl. Cras ut nisl id ex dapibus ultricies. Donec at dictum nibh. Phasellus consequat, turpis nec cursus blandit, dolor sem auctor mauris, venenatis sodales sapien lorem eget ante.

A Level 2 Heading

A Level 3 Heading

A Level 4 Heading

A Level 5 Heading
A Level 6 Heading

Table Styles

Heading 1 Heading 2
Data in cell Data in cell
Data in cell Data in cell
Data in cell Data in cell

Creative Lists

You have several lists to choose from, Ordered Lists (1, 2, 3, etc.), Unordered Lists (bulleted), and Definition Lists. Choose the appearance you prefer from the samples below.

Ordered List

  1. First List Item
  2. Second List Item
  3. Third List Item

Unordered Lists

  • First List Item
  • Second List Item
  • Third List Item

Definition Lists

Fancy

Definition Term
Definition Description
Definition Description
Definition Term
Definition Description

Clean

Definition Term
Definition Description
Definition Description
Definition Term
Definition Description

Custom Numbered List

  1. An itemized list
  2. An itemized list
  3. An itemized list
  4. An itemized list

Info Boxes

This is an info box that is used to highlight crucial information.

This is a success box that is used to let the user know the process was successful.

This is a warning box that is used to highlight something you want to warn users about. it is less stern than an error message box.

This is an error message box. it alerts the user that he or she must correct a defect in a form in order to proceed.

This is a blockquote division. Use it to cite a quotation or cite to some important text from another document.

Buttons

Ghost Button

Button

CTA Button

Gallery and Image Styles

Posts Versus Pages

It is critical to site organization to determine when to use a Post versus when to use a Page. Pages are more likely to be static content; and won’t often change. They are the site’s backbone. Posts, on the other hand, tend to be more transient in nature. By that, I mean that they are generally used for announcements and are often organized in chronological order, latest first. Some pages that I see here should actually be posts. If in doubt, create a POST. 🙂