Primary
Colors
Color setting - used in \_settings.scss
more info
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
- Cheese (essential)
- Pepperoni
- Bacon
- Normal bacon
- Canadian bacon
- Sausage
- Onions
- 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 FeaturesSizes
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 smallerForms
Text Inputs
Number Inputs
Text Areas
Select Menus
Checkboxes and Radio Buttons
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
- Controls: button group, slider, switches
- Navigation: Drilldown menu, Top Bar menu - we use a simpler solution for now, Magellan
- Containers: callouts, dropdown panes, media objects, off canvas, Reveal - we use Magnific Popup, Responsive accordion tabs
- Media: badges, responsive embeds, labels, Orbit - we use Slick instead, progress bars, thumbnail, tooltips
- Plugins: abide - we use contact form plugins, so it's not necessary in the starter, interchange smooth scroll motion ui (animations)
TAGS
sample tagFILTER
sample tag sample tagWordPress Elements
Gallery with two columns
Gallery with three columns
Gallery with four columns
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.
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.
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.
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.