Style Guide

Typography

Headings: h1-h5

NOTE: Use h1-h5 semantically; add as class for styling

h1 - Lorem ipsum dolor sit amet

h2 - Consectetur adipisicing elit architecto dolores eius exercitationem

h3 - Cumque deleniti dolores dolorum mollitia omnis quia rerum!

h4 - Accusamus aliquid asperiores assumenda blanditiis

h5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

Special Headings

The Value of Joining Become a PCA SKIN Certified Professional

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?

Lists

Unordered, Ordered, and Nested

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    2. Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
  • Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
  • Accusantium aliquam commodi consequuntur cumque eveniet minima nobis provident similique!
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
  2. Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
  3. Accusantium aliquam commodi consequuntur cumque eveniet minima nobis provident similique! Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    2. Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?

Inline

List with checkmarks

  • Live
  • In-office
  • Accusantium aliquam commodi consequuntur cumque eveniet minima nobis provident similique! Adipisci deserunt dicta ipsam perferendis possimus quas qui recusandae saepe sint ullam?
  • On Demand

Inline text links

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cupiditate dicta dolorem doloremque id illo iste, itaque iure libero maiores molestias officia pariatur provident quaerat quia quis repudiandae sint voluptas.

Buttons

(height 66px)

Primary

a class="btn btn-primary"

request training

button class="btn btn-primary"

add class "btn-block"

Secondary

a class="btn btn-secondary"

add to cart

button class="btn btn-secondary"

add class "btn-block"

otherText links

(height 40px)

products

Reverse version

skin concerns
see all
go up
load more

Pager

(height 40px)

Forms

Select

Select a state:
Select an option (disabled): Disabled

Checkboxes

Checkbox examples

Radio Buttons

Radio button examples

Modals

Click on a button to open a modal.

Click to open this video in a pop-up modal: Treatment Tuesday: Acne Solutions

Treatment Tuesday: Acne Solutions

Tabs

FIRST - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, animi asperiores assumenda, at autem blanditiis dolorum error exercitationem id illo iure laudantium libero nesciunt obcaecati possimus provident tempora veniam voluptatibus.
SECOND - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, dicta ducimus eos esse impedit incidunt ipsa ipsum magni nesciunt porro provident quibusdam quisquam, quo reiciendis sit ullam vel vero voluptates?
THIRD - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Alerts dismissible

Default

alert-info

Warning

alert-warning

Error

alert-danger

Success

alert-success

Colors

Primary

black #000000

blue #60aee0

Secondary

dark-blue #0c456b

grey #9a9a9a

charcoal #383838

Background

bg-lt-grey #f6f6f6

bg-lt-blue #e9f4fb

Favicon and web clip icon set

Source image 260x260 PNG

PCA Skin Academy icon source image

Generated favicon ICO file

favicon for PCA Skin Academy