Brand Styles Page

Most common elements and their variations are shown below.

Content Block (py-5)

Lorem ipsum dolor sit amet

This is lead text.

This is standard text with a hyperlink.

Call to action
Content Block [Gray Variant] (section-mid py-5)

Lorem ipsum dolor sit amet

This is lead text.

This is standard text with a hyperlink.

Call to action
Content Block [Dark Variant] (section-dark py-5)

Lorem ipsum dolor sit amet

This is lead text.

This is standard text with a hyperlink.

Call to action Another call to action
Content Block [Dark] with Background (section-dark py-5)

Lorem ipsum dolor sit amet

This is lead text.

This is standard text with a hyperlink.

Call to action Another call to action
Content Block [Centered with small/callout]

Small textLorem ipsum dolor sit amet

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call to action
Content Block [Centered with small/callout] (section-dark)

Small textLorem ipsum dolor sit amet

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call to action
Content Block [Centered,small,bg image] (section-dark)

Small textLorem ipsum dolor sit amet

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call to action
Call to Action Block
Call to action Another call to action
Icons Block

Lorem ipsum dolor sit amet

Lead text that can appear above. Lorem ipsum dolor sit amet.

We are passionate about winning

We believe in team play with trust

We believe honesty, integrity and candor are the best ways to do business

Positive attitudes create a better business

We care about our people, and EVERYONE MATTERS at Lippert.

Optional text that can appear below.

Cards (4 Up)
alt tag
Card Title
alt tag
Card Title
alt tag
Card Title
alt tag
Card Title
Cards (3 Up)
alt tag
Card Title
alt tag
Card Title
alt tag
Card Title
Elements

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Lead text follows. This is strong. This is italicized. This is superscript text and this is subscript text. This is underlined and this is a link.

Standard paragraph text follows.This is strong. This is italicized. This is superscript text and this is subscript text. This is underlined and this is a link. Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan. Vis. Faucibus odio magna tempus adipiscing a non. In mi primis arcu ut non accumsan vivamus ac blandit adipiscing adipiscing arcu metus praesent turpis eu ac lacinia nunc ac commodo gravida adipiscing eget accumsan ac nunc adipiscing adipiscing lorem ipsum dolor sit amet nullam veroeros adipiscing.

Second paragraph. Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan.

Lists

Unordered

  • Dolor etiam magna etiam.
  • Sagittis lorem eleifend.
  • Felis dolore viverra.

Ordered

  1. Dolor etiam magna etiam.
  2. Etiam vel lorem sed viverra.
  3. Felis dolore viverra.
  4. Dolor etiam magna etiam.
  5. Etiam vel lorem sed viverra.
  6. Felis dolore viverra.

Blockquote

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.

Form

Optional input help text.
Optional select help text.

Buttons

btn-primary class

Link External link

btn-primary btn-lg classes

Link External link

btn-secondary class (recommended use on dark)

Link External link

btn-secondary btn-lg classes (recommended use on dark)

Link External link

btn-outline-light class (recommended use on dark)

Link External link

btn-outline-light btn-lg classes (recommended use on dark)

Link External link

Tables

Add an id tag that begins with table to apply product-page-specific table styles. Changes the header to red and shrinks the font slightly to accommodate larger amounts of information.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Utilities

Use font-family-barlow to force the use of the Barlow font on any element.