Layout & Design

Default Heading Styles

HTML uses 6 heading styles to to create structure for your content.  Google and other search engines use heading styles and their content as ranking factors. The text or phrase in your Heading 1 (HTML <h1>) tag is considered more important than the content of your Heading 2 (<h2>).  Strict HTML validation will fail if the styles are used out of order.

Your template is configured with default styles for all 6 headings.  These styles include accommodations for responsive design and smaller screen sizes and specify not only the font and weight, but the line height and space between them and other content.

testing the <h1> tag.

testing the <h2> tag.

testing the <h3> tag.

testing the <h4> tag.

testing the <h5> tag.
testing the <h6> tag.

Default Content Styles

This is obviously the default paragraph (HTML <p>) content.  It is possible to have specific styles for other regular elements.  We recommend a single font & style for all default content and if  you have special cases use a custom class as detailed below.

The <p> style determines not only the font used, but also the line height, the space between paragraphs, and of course, how it changes for smaller screens.

  • testing the <ul><li> tags
  • Style determines default bullet
  • and space between list elements
  • as well as before and after the list.
  1. testing the <ol><li> tags.
  2. Style determines the type of list (number or alpha)
  3. and space between list elements
  4. as well as before and after the list

Testing the preformatted <pre> tag.
Testing the preformatted <pre> tag.
Testing the preformatted <pre> tag.

 

Custom Classes

An h4 with accent color text

(the accent color in this case is actually black.  go figure)

.color-accent-1

An h4 with accent color 2 text

This is a paragraph with the same custom class.  

.color-accent-2

An h4 with Accent color 3 text

This is a paragraph with the accent color applied to part of it.

.color-tertiary

An h4 with success text

This is handy for form submissions. 

.color-success

An h4 with warning text

.color-warning

An h4 with alert text

.color-alert

An h4 with light gray text

.color-lightgray

An h4 with medium gray text

.color-mediumgray

An h4 with dark gray text

.color-darkgray

 

AN H4 WITH reversed text

.color-default-reversed

AN H4 WITH Disabled Reversed TEXT

.color-disabled-reversed

 

Buttons


Primary Sml Primary Primary Lrg
Secondary Sml Secondary Secondary Lrg
Alternate Sml Alternate Alternate Lrg
 REVERSED SML REVERSED REVERSED LRG