Style Guide

Defualt Elements

Text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam aut voluptates ipsam, neque sapiente repellendus veritatis ut. Tempora voluptatum consequatur aperiam eaque exercitationem ducimus est, dicta quia expedita doloremque nobis eos quo numquam, officia nisi, accusantium ullam totam voluptates tempore maiores libero magnam in dolore? At incidunt delectus nesciunt impedit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo perspiciatis odio excepturi a, quibusdam corporis magni id quod quia dignissimos odit debitis eaque distinctio quos saepe maiores porro! Quaerat animi vel quos? Quibusdam corporis exercitationem alias dicta aliquid voluptatibus perferendis necessitatibus, iusto magni rerum illum nesciunt sed tempora, harum veritatis.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, aut necessitatibus. Et ipsam explicabo nostrum quasi quam atque, repellat saepe perferendis velit minus possimus officiis porro inventore natus vitae harum pariatur itaque blanditiis, similique mollitia, illo officia illum nulla? Veniam quod ipsa ducimus tempora quasi iusto, laborum numquam necessitatibus perspiciatis!

Lists

  • Unordered List
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List

Buttons

Links

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Tables

Table Caption
Table Header Table Header Table Header
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

Forms defualt styles

Forms components

form title

Passwords must be at least 8 characters long.

This is a text tooltip

*

List Title

  • This is a text tooltip
  • This is another tooltip
  • This is the third tooltip
*
*
*
Favorite Foods

Select food from the list that you like.

*
This field is required and at least one option must be selected.
Preferred Communication Method

Select your preferred method of communication.

*
This field is required and at least one option must be selected.
*

Leave any comments or questions you may have.

This is a number input field hint.

*

Please enter a valid phone number, be sure to enter only numbers, the field will automatically format itself.

Colors

Primary
primary-light
primary-dark
secondary
secondary-light
secondary-dark
tertiary
tertiary-light
tertiary-dark
accent
accent-light
accent-dark
success
success-light
success-dark
warning
warning-light
warning-dark
error
error-light
error-dark
info
info-light
info-dark

Components

Header

Look at the header above.

Accordian

Auto Scroller

Auto Scroller

  • The
  • Auto
  • Scroller
  • Takes
  • In
  • An
  • Assortment
  • Of
  • LI
  • Elements

Card

alt text

this is a test title

eyebrow text

This is test text that will be displayed in the card component

Carousel

Employee

alt text

John Doe

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum quia voluptate similique, alias ipsa autem quasi rem nam eos? Aut accusamus debitis, facilis iusto placeat dolorum voluptas maxime eveniet molestias!

Some Position

Expanding Photo Gallery

Hero

alt text

eyebrow text

test title

this is test content

alt text

test title

Section Header

this is an eyebrow

this is the heading for the section

this is the subheading below the main heading for the section

this is an eyebrow

this is the heading for the section

this is the subheading below the main heading for the section

this is an eyebrow

this is the heading for the section

this is the subheading below the main heading for the section

Icon Feature

this is the features title

this is the features text to acompany the title and icon

this is the features title

this is the features text to acompany the title and icon

this is the features title

this is the features text to acompany the title and icon

Icon

Image Link

test title
alt text

Service

alt text

test title

$100

  • bullet 1
  • bullet 2
  • bullet 3
  • bullet 4
  • bullet 5

Problem Solution

alt text

this is a test title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quod, quia numquam laudantium temporibus doloribus nam repellendus nisi cupiditate voluptates.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quod, quia numquam laudantium temporibus doloribus nam repellendus nisi cupiditate voluptates.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quod, quia numquam laudantium temporibus doloribus nam repellendus nisi cupiditate voluptates.

Learn More

Testimonials

opening quotention mark

"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo sed excepturi, provident quasi culpa sapiente suscipit atque dignissimos totam exercitationem dolorum aliquid laborum quaerat vero?"

alt text

John Wrangler Doe

TestimonialSwiper

lorem ipsum dolor sit amet consectetur adipisicing elit

John Doe 1

lorem ipsum dolor sit amet consectetur adipisicing elit

John Doe 2

lorem ipsum dolor sit amet consectetur adipisicing elit

John Doe 3

lorem ipsum dolor sit amet consectetur adipisicing elit

John Doe 4

Side Navigation

Look at the side navigation on the left or top if on mobile.

Footer

Look at the footer below.