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

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

H Subtitle

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

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

Small tag .text

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

Small tag .text .text--primary

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

Small tag .text .text--secondary

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

p.lead with link

LIST + BULLET

  • 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

GOALS LIST ul.list-goals

  • 01

    Create a modern, quick and polished website to act as a showcase of Sigma Homes past work and proven track record to potential clients

  • 01

    Create a modern, quick and polished website to act as a showcase of Sigma Homes past work and proven track record to potential clients

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada nisl nisl, porta tincidunt odio viverra nec. Donec ex arcu, facilisis vel neque sed, tempor dictum risus. Suspendisse venenatis, nunc vitae condimentum laoreet, massa purus auctor lectus, fermentum blandit eros ligula et odio. Pellentesque dolor odio, dictum vitae nisl quis, eleifend posuere risus. Greg Marah Director Arborist.ie
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

Button.01 // Button normal
Button.02 // Button big
Button.03 // Ghost
Button.03 // Ghost (on solid bg element)

Color modifiers

Text color-modifiers @mixin

H1, H2, H3, H4, H5, H6 - .text--color-alert

H1, H2, H3, H4, H5, H6 - .text--color-primary

H1, H2, H3, H4, H5, H6 - .text--color-secondary

H1, H2, H3, H4, H5, H6 - .text--color-success

H1, H2, H3, H4, H5, H6 - .text--color-warning
H1, H2, H3, H4, H5, H6 - .text--color-alert

p .text--color-alert

span .text--color-primary

Background color-modifiers @mixin

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

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