Save $100 off our mattresses! Use Promo Code: TAKE100

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

1 (844) 869 - 7659

CTAs

CTA Outline CTA Ghost CTA Outline Tight

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

Link

Discrete

Link

Brand

Link

Lists

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
  4. 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

Image placeholder

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

L'Oreiller Polysleep

Buy Now

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.

I am a modal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec augue a diam viverra ultrices. Curabitur feugiat et lacus at scelerisque. Nulla ligula enim, eleifend sed imperdiet nec, tristique consectetur dolor. Curabitur ullamcorper id massa at vehicula. Etiam quam justo, mollis id efficitur in, fermentum quis nunc. Praesent nisl arcu, cursus non massa vel, euismod venenatis risus. Curabitur vestibulum, dolor non porta eleifend, nibh lorem lacinia purus, vel pulvinar turpis erat at augue. Nulla laoreet at magna eget pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi convallis vitae quam vitae semper. Phasellus tristique vitae mi nec molestie. Morbi vel suscipit purus, sed pellentesque nulla.


Sed porttitor bibendum nunc ac tempor. Vivamus a luctus lorem. Nulla vel quam elit. Aenean vitae massa nec erat varius iaculis viverra ac elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus enim, volutpat ac rhoncus nec, volutpat auctor est. Nunc nulla ipsum, accumsan quis eros ut, faucibus lobortis justo. Maecenas scelerisque eget mi ac egestas. Fusce magna turpis, euismod ac odio non, pretium consequat velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus id lectus feugiat, scelerisque metus eu, lacinia lorem.


Vivamus facilisis consectetur congue. Fusce imperdiet lacus sem, in consectetur lectus consectetur lacinia. Nulla elit mi, condimentum sed massa sed, euismod euismod diam. Pellentesque cursus, magna sit amet consectetur dapibus, diam odio pellentesque mi, at lacinia eros augue ac enim. Donec molestie sed erat malesuada ornare. Ut eget tempus orci. Vivamus venenatis euismod leo, id ullamcorper velit finibus vitae. Mauris nec nunc lacus. Sed vel viverra ante, quis venenatis nunc. Morbi pulvinar finibus neque eget posuere. Ut turpis lacus, viverra ac tincidunt non, sagittis eget diam. Nunc dignissim in odio porttitor rutrum. Proin nunc leo, ullamcorper eget libero non, dictum suscipit nibh. Curabitur vulputate vitae ligula hendrerit fringilla. Maecenas dignissim, turpis quis pulvinar posuere, metus sem finibus lacus, id eleifend mi eros sed tellus.


Praesent pharetra magna a urna porta, sit amet dictum erat semper. Curabitur id augue leo. Praesent rutrum magna ut sem rhoncus, ut tristique tortor varius. Donec finibus odio in neque vulputate viverra. Praesent ut orci accumsan, convallis est id, venenatis nunc. Cras lorem odio, sagittis sed blandit vitae, interdum quis lectus. Aenean tempor mauris commodo nisi hendrerit porttitor. Etiam finibus tincidunt sapien, ac tempus est consectetur nec. Vestibulum suscipit, erat eget tempus viverra, libero ante ultricies dui, pulvinar tempor lacus libero vitae eros. Sed blandit bibendum nulla, et condimentum neque cursus id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque non mattis ipsum. Sed ut tempus enim, id vehicula neque.


Phasellus faucibus ex quis nibh vehicula, vitae fermentum nulla scelerisque. Integer commodo turpis ut tincidunt laoreet. Donec dignissim arcu quis libero molestie, eget varius eros posuere. Suspendisse congue imperdiet lobortis. Vivamus cursus, ligula sed viverra ultrices, dolor leo iaculis nulla, eu scelerisque nunc elit ut turpis. Phasellus egestas ut lorem et condimentum. Vivamus congue rutrum ultricies. Vestibulum pulvinar augue a magna rutrum, a euismod justo fringilla. Mauris sed dui elit. Etiam odio elit, ornare et scelerisque a, commodo sit amet leo. Morbi quis porta enim. Sed mi orci, accumsan ut lobortis vitae, sodales eget nisl. In ante dui, pellentesque eget massa et, rutrum tempus tellus.


Integer dapibus turpis sit amet nunc bibendum tempor. Pellentesque molestie volutpat ex, et suscipit metus porttitor tristique. Sed finibus libero nisl, sed varius lectus rhoncus in. Phasellus sollicitudin porta iaculis. Nullam ac bibendum enim. Cras aliquam lectus ut condimentum aliquam. Quisque scelerisque volutpat ex, vitae tristique lacus sollicitudin nec. Donec in magna dapibus, cursus nibh vitae, ornare eros.

Video Modal

Flyouts

Slideshows

Banner Slideshow (Custom Dots Container)

Testimonial Slideshow

"

Polysleep offers, bar none, the most exceptional value based on the cost of a quality mattress available in Canada.

Honest Mattress Reviews

"

We loved the liquid repellant cover and the cool, comfortable support of the Polysleep Mattress.

Mattress Junkie

"

If you are looking for a reactive foam mattress that sleeps relatively cool, has antimicrobial properties and a spill-resistant cover this is the mattress for you.

Sleep Sherpa

"

Lying on my back near the edge of the bed, I felt about as supported as I did in the center!

Sleepopolis

Tile Slideshow

Full Screen Banner Slideshow (Generated Dots Container)

Instagram Slider

Follow us

@YourStore

Hero Banner

A generic pre-title

A generic title

Upsell Banner

A generic pre-title

A generic title

Loading

Base

Light

Brand (Purple)

Social Media Sharing

Pagination

The Polysleep Way

The Other Guys add...
5A9129D3-9E99-4D56-86C4-BDAA950AD56C Created with sketchtool. Factory
24A62BAA-F85F-485F-8CB7-A4A2545A4358 Created with sketchtool. Your home
56D4FCBC-84E4-4D6B-BE10-5FF84BE2903A Created with sketchtool. Warehouse
67EE9647-BA25-41B6-B754-7D9A31726334 Created with sketchtool. Distributors
5483938E-CDB2-4D0E-9CB1-4FD3C1178F43 Created with sketchtool. Retail shops

Blog Filters

Tiles (Articles)

Has all optional fields

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

This year, Polysleep is partnering with the 37th edition of the Rendez-Vous Québec Cinéma festival! Discover how the artist gave...

5 minute read Read more

No show_blog

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

This year, Polysleep is partnering with the 37th edition of the Rendez-Vous Québec Cinéma festival! Discover how the artist gave...

5 minute read Read more

No show_excerpt

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

5 minute read Read more

No show_time

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

This year, Polysleep is partnering with the 37th edition of the Rendez-Vous Québec Cinéma festival! Discover how the artist gave...

Read more

No show_blog and show_excerpt

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

5 minute read Read more

No show_blog and show_time

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

This year, Polysleep is partnering with the 37th edition of the Rendez-Vous Québec Cinéma festival! Discover how the artist gave...

Read more

No show_excerpt and show_time

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

Read more

No optional fields

Better than recycling: How to transform cardboard into a masterpiece

Better than recycling: How to transform cardboard into a masterpiece

Read more

Your Cart

Save 100$ off our mattresses! Use promo code: TAKE100
Your Cart is Empty