Colors

Color setting - used in \_settings.scss more info

Primary

Secondary

Success

Warning

Alert

White

Light Gray

Medium Gray

Dark Gray

Black

h1. This is a very large header. Smaller element

h1.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 size

Primary Secondary Success Alert Warning Disabled Disabled Primary Secondary Success Alert Warning Disabled

Forms

Text Inputs

Number Inputs

Text Areas

Select Menus

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

Foundation elements we DON'T USE in the starter

TAGS

sample tag

FILTER

sample tag   sample tag

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.

Zapraszamy