It seems like you're not in the right place!
Let us guide you on your path to a better night's sleep.
Design Guide
Typography
Headings
H1 Title
H2 Header Title
o-title
H3 Header Title
H4 Pre-Title
H5 Heading
H6 Heading
Other Titles
o-hero--title -- no margin top
o-title -- no margin top
o-pretitle -- no margin bottom
Body Style
Body Style// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae laoreet mi. Maecenas purus ligula, volutpat ut lacus eget, porta euismod dui. Etiam sodales est id augue scelerisque, in imperdiet leo bibendum. In hac habitasse platea dictumst. Vivamus fermentum viverra est. Suspendisse nunc enim, suscipit sed ante quis, tristique ultricies arcu. Morbi quis felis elit. Mauris aliquam ligula nulla, nec porta libero rutrum sed. Aenean sed lorem lacus.
Paragraph Small
Body Style Small // Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae laoreet mi. Maecenas purus ligula, volutpat ut lacus eget, porta euismod dui. Etiam sodales est id augue scelerisque, in imperdiet leo bibendum. In hac habitasse platea dictumst. Vivamus fermentum viverra est. Suspendisse nunc enim, suscipit sed ante quis, tristique ultricies arcu. Morbi quis felis elit. Mauris aliquam ligula nulla, nec porta libero rutrum sed. Aenean sed lorem lacus.
Paragraph Minor
Body Style Minor // Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae laoreet mi. Maecenas purus ligula, volutpat ut lacus eget, porta euismod dui. Etiam sodales est id augue scelerisque, in imperdiet leo bibendum. In hac habitasse platea dictumst. Vivamus fermentum viverra est. Suspendisse nunc enim, suscipit sed ante quis, tristique ultricies arcu. Morbi quis felis elit. Mauris aliquam ligula nulla, nec porta libero rutrum sed. Aenean sed lorem lacus.
Inputs
Buttons
Large
The widths of the large buttons will need to be set case-by-case as they usually take the full width or half of the width of their container
Ghost
Phone
CTAs
Disabled
Checkbox
Radio
Select
Note: Elements need to be wrapped in a "o-select" class for the arrow to show up.
Single Input Form
Text, Email, Password, Search, Tel
Textarea
Quantity
Note: elements need to be wrapped in a "o-quantity" class for styling, and js classes for the buttons to increment/decrement the input.
Elements
Links
Base
LinkDiscrete
LinkBrand
LinkLists
Ordered List
- Item 1
- Item 2
- Item 3
- Item 4
Unordered List
- Item 1
- Item 2
- Item 3
- Item 4
Discrete List
- Item 1
- Item 2
- Item 3
- Item 4
Tables
Static
Header 1 | Header 2 | Header 3 |
---|---|---|
Row 1 | Row 2 | Row 3 |
Row 1 | Row 2 | Row 3 |
Row 1 | Row 2 | Row 3 | Footer 1 | Footer 2 | Footer 3 |
Images
Static
Static
Full width
Variable widths
Note: The above image loads '1440:480,800:400,320' as the breakpoints, meaning it displays a 480px image for screens <= 1440px, 400px for screens <= 800px and 320px for screens <= 320px. This is useful for example for product tiles that should be 1/3 on desktop, 1/2 on tablet and 1/1 on mobile.
Blockquote
Blockquote /// Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae laoreet mi. Maecenas purus ligula, volutpat ut lacus eget, porta euismod dui. Etiam sodales est id augue scelerisque, in imperdiet leo bibendum. In hac habitasse platea dictumst. Vivamus fermentum viverra est. Suspendisse nunc enim, suscipit sed ante quis, tristique ultricies arcu. Morbi quis felis elit. Mauris aliquam ligula nulla, nec porta libero rutrum sed. Aenean sed lorem lacus.
Code
Code block
Utilities
Accordion
-
-
According to this accordion and in accordance with all accordions, this and all accordions will be accorded accordingly with accordance to accordions.
-
According to this accordion and in accordance with all accordions, this and all accordions will be accorded accordingly with accordance to accordions.
-
According to this accordion and in accordance with all accordions, this and all accordions will be accorded accordingly with accordance to accordions.
-
-
According to this accordion and in accordance with all accordions, this and all accordions will be accorded accordingly with accordance to accordions.
-
According to this accordion and in accordance with all accordions, this and all accordions will be accorded accordingly with accordance to accordions.
Modal
Video Modal
Flyouts
Slideshows
Banner Slideshow (Custom Dots Container)
Testimonial Slideshow
Tile Slideshow
Full Screen Banner Slideshow (Generated Dots Container)
Instagram Slider
Hero Banner
Upsell Banner
Loading
Base
Light
Brand (Purple)
Social Media Sharing
Pagination
La manière Polysleep
Blog Filters
Tiles (Articles)
Has all optional fields
No show_blog
No show_time
No show_blog and show_time