Colors

Color setting - used in \_settings.scss more info

Primary

Secondary

Success

Warning

Alert

White

secondary Gray

Gray

Medium Gray

primary Gray

Black

h1. This is a very large header. Smaller element

h2.subheader

Check how we use headers Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. J. R. R. - check it maecenas malesuada elit lectus felis, malesuada ultricies check the <div> and Cmd+Q.

h2. This is a large header. Smaller element

h2.subheader

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

h3. This is a medium header. Smaller element

h3.subheader

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

h4. This is a moderate header. Smaller element

h4.subheader

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

h5. This is a small header. Smaller element
h5.subheader

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

h6. This is a tiny header. Smaller element
h6.subheader

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Unordered list

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Ordered list

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms

Text alignment: helpers here >

Text with .text-left class

The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.

Text with .text-right class

The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.

Text with .text-center class

The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.

Text with .text-justify class

The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.

Definition list

Time
The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.
Space
A continuous area or expanse that is free, available, or unoccupied.
The dimensions of height, depth, and width within which all things exist and move.

Blockquote

Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov
And this is a lead paragraph:

If you want to add a nice lead-in paragraph, you can add the .lead class to it. And voila!

Buttons

Learn More
View All Features

Sizes

So Tiny So Small So Basic So Large Such Expand Wow, Small Expand Wow, Expand only on small viewport Expand only on medium viewport Expand only on large viewport Wow, Expand on medium and larger Expand on large and larger Expand on medium and smaller Expand on large and smaller
primary
secondary
Disabled
Disabled Disabled
Disabled

Forms

Text Inputs

Number Inputs

Text Areas

Select Menus

Switch

Checkboxes and Radio Buttons

Choose Your Favorite
Check these out
Check these out

Your password must have at least 10 characters, a number, and an Emoji.

$

Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Table with scroll

This is the description! One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve
These are all the words that people use to describe Foundation 6! Cool Swag Chill Killer Rad Baller OMG Sweet Awesome Beast Dope Tubular
These are some words that people use to describe other web frameworks. Whatevs Ugh. LOL K Aight Eh. Grrr... Meh. TTYL Bleh. Really? Why?
Here are some great super heros. Batman Superman Spiderman Wonder Woman Hulk Nicolas Cage Antman Aquaman Captain America Wolverine Thor Iron Man
Here's a footer, just in case

Tabs

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Accordion

  • Accordion 1
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 2
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 3
    I would start in the open state, due to using the `is-active` state class.
  • Accordion 4
    I would start in the open state, due to using the `is-active` state class.

Pagination

Breadcrumbs

Magnific Gallery

WordPress Elements

Gallery with two columns

Gallery with three columns

Gallery with four columns

We made it a little bit more responsive. On mobile, you get one column. On tablet – two. Four columns are displayed for media query “large” variable.

Gallery with five columns

We made it a little bit more responsive. On mobile, you get one column. On tablet – three. Five columns are displayed for media query “large” variable.

Gallery with six columns

Behold! Here we inserted a gallery with links not to media files, but attachment pages.
We made it a little bit more responsive. On mobile, you get two columns. On tablet – three. Six columns are displayed for media query “large” variable.

Gallery with seven columns

We made it a little bit more responsive. On mobile, you get two columns. On tablet – four. Seven columns are displayed for media query “large” variable.

Gallery with eight columns

We made it a little bit more responsive. On mobile, you get two columns. On tablet – four. Eight columns are displayed for media query “large” variable.

Gallery with nine columns

We made it a little bit more responsive. On mobile, you get three columns. On tablet – six. Nine columns are displayed for media query “large” variable.

This is a road.

Photo at left

Quote Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

This is a road.

Photo at left

Quote Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

This is a road.

Photo at left

Quote Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Pargraph Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

This is the image content.

More

Styleguide button.

More

It goes straight home.

More

Hello, world!

More