Styleguide Smile Store

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

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

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

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.

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.

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

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

Plus remeber about all subheaders classes - all helpers here >

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader
  • 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

Text Alignment

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

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

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

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

  1. Cheese (essential)
  2. Pepperoni
  3. Bacon
    1. Normal bacon
    2. Canadian bacon
  4. Sausage
  5. Onions
  6. Mushrooms
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.
Those people who think they know everything are a great annoyance to those of us who do. Isaac Asimov

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

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

Buttons size

Primary Secondary Success Alert Warning Disabled Disabled Primary Secondary Success Alert Warning Disabled
View Edit Share Delete
Primary Action Show menu

Look at this close button!

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.

$

How old are you?

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

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
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

Magnific Gallery

nec ultrices tincidunt arcu non sodales. Viverra suspendisse potenti nullam ac. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum. Vel turpis nunc eget lorem dolor sed viverra. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Elementum sagittis vitae et leo duis ut diam quam nulla. Magna fermentum iaculis eu non diam phasellus vestibulum lorem. Augue eget arcu dictum varius duis at. Vitae auctor eu augue

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.

Other elements – not included in graphic guidelines.

1. Will we use Flex box? more info

2. Menu – classes more info

3. Pagination:

4. Breadcrumbs:

See more

See more

See more

See more
Call to Action heading

Call to Action heading

Est ante in nibh mauris. Condimentum mattis pellentesque id nibh. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. In arcu cursus euismod quis viverra.

Read more

Est ante in nibh mauris. Condimentum mattis pellentesque id nibh. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. In arcu cursus euismod quis viverra.

Est ante in nibh mauris. Condimentum mattis pellentesque id nibh. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. In arcu cursus euismod quis viverra.

Est ante in nibh mauris. Condimentum mattis pellentesque id nibh. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. In arcu cursus euismod quis viverra.

Est ante in nibh mauris. Condimentum mattis pellentesque id nibh. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. In arcu cursus euismod quis viverra.

Est ante in nibh mauris. Condimentum mattis pellentesque id nibh. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. In arcu cursus euismod quis viverra.

fermentum posuereRhoncus aenean vel elit scelerisque mauris

Eget est lorem ipsum dolor sit amet. Erat velit scelerisque in dictum non. Ridiculus mus mauris vitae ultricies. Massa sapien faucibus et molestie ac feugiat sed. Risus nec feugiat in fermentum posuere. Volutpat sed cras ornare arcu dui vivamus arcu felis. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.

  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare

velit scelerisque Eget est lorem

Eget est lorem ipsum dolor sit amet. Erat velit scelerisque in dictum non. Ridiculus mus mauris vitae ultricies. Massa sapien faucibus et molestie ac feugiat sed. Risus nec feugiat in fermentum posuere. Volutpat sed cras ornare arcu dui vivamus arcu felis. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.

  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare

velit scelerisque Volutpat sed cras ornare

Eget est lorem ipsum dolor sit amet. Erat velit scelerisque in dictum non. Ridiculus mus mauris vitae ultricies. Massa sapien faucibus et molestie ac feugiat sed. Risus nec feugiat in fermentum posuere. Volutpat sed cras ornare arcu dui vivamus arcu felis. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.

  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare

Test blockSome content

Eget est lorem ipsum dolor sit amet. Erat velit scelerisque in dictum non. Ridiculus mus mauris vitae ultricies. Massa sapien faucibus et molestie ac feugiat sed. Risus nec feugiat in fermentum posuere. Volutpat sed cras ornare arcu dui vivamus arcu felis. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.

  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
  • Volutpat sed cras ornare
A heading

Pre-title A heading

Bubble Speech Phone MessageCancel
Apply for Finance - Get Your Dream Smile Now & Pay Later
Apply Now
This is default text for notification bar
Learn more