This is a style guide showcasing common HTML elements.

Palette

Governor Bay

#403ACE

East Bay

#4d5489

Pacifc Blue

#00a5c7

Beryl Green

#dce4b9

Limeade

#728807

Mineshaft

#333333

Ecru White

#ECF2E0

Swans Down

#e0f1ec

Green Mist

#C9D0A9

Aqua Haze

#f3f8f8

Early Dawn

#fff8ea

Tahuna White

#e9f1c7

White

#ffffff

Black

#000000

Typography

Literata Light 300

Literata Regular 400

Literata Medium 500

Lato Regular 400

Lato Bold 700

Headers

Example REM PX

Header 1

 3.75rem 60px

Header 2

 1.875rem 30px

Header 3

 1.75rem 28px

Header 4

 1.25rem 20px
Header 5
 1.063rem 17px
Header 6
 0.9375rem 15px

Body Text

Lead Paragraph/Intro

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiatadipisicing ex in dolore ullamco.

Standard Paragraph

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiatadipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip occaecatdeserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse

Cupidatatid consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure in ex sintdolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.

Lists

Unordered List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous inSource Title

Tables

Table caption
Table Heading Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer Table Footer
Table Data a element .uk-table Table Data Button Table Data Table Data
Table Data Table Data Table Data Table Data
Active Row Active Row Active Row Active Row
Table Data Table Data Table Data Table Data
Table Sub Heading Table Sub Heading Table Sub Heading Table Sub Heading
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data

Table Divider

Table Heading Table Heading Table Heading
Table Data a element .uk-table Table Data Button Table Data
Table Data Table Data Table Data
Active Row Active Row Active Row
Table Data Table Data Table Data
Table Sub Heading Table Sub Heading Table Sub Heading
Table Data Table Data Table Data
Table Data Table Data Table Data

Table Striped

Table Heading Table Heading Table Heading
Table Data a element .uk-table Table Data Button Table Data
Table Data Table Data Table Data
Active Row Active Row Active Row
Table Data Table Data Table Data
Table Sub Heading Table Sub Heading Table Sub Heading
Table Data Table Data Table Data
Table Data Table Data Table Data

Breadcrumbs

Pagination

Default

Carousel

  • 1

  • 2

  • 3

  • 4

  • 5

    Accordion

    • Item 1

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    • Item 2

      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.

    • Item 3

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

    Tabs

    • Hello!
    • Hello again!
    • Bazinga!

    Tooltips

    Embeds

    Google Map

    YouTube