Thank you! A Welcome email with your discount code will be sent to you shortly.

Typography

Important: Lineheights have not been defined in style guide design. We're defaulting to 1.5 across all headings for the time being.

H1 - Raleway Regular 32px

H2 - Raleway Medium 24px (0.5 LS)

H3 - Raleway Semibold 16px (0.5LS)

H4 - Raleway Bold 12px (2.0LS)

Homepage Collection Card Title

Raleway Medium 13 / 22px
Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum.

Text Link

Button

Button White

Button Outline

Accordion - Lite

Accordion - Lite - All breakpoints

Use accordion--global class explicitly for the accordion to have unified style across all breakpoints.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Accordion - Lite - Mobile Only

Use accordion--mobile class explicitly for the accordion to only have accordion styles on mobile.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis justo arcu. Phasellus tempor, turpis eget posuere efficitur, purus nunc iaculis mi, lobortis feugiat nisi lectus a libero. Vivamus orci orci, imperdiet nec lobortis et, tincidunt sit amet lectus. Nunc est tortor, venenatis id metus vitae, semper mollis libero.

Carousel

Use `data-module-init="carousel"` to initialize carousel functionality.

Carousel - Mobile Only

Use `class="carousel carousel--mobile"` for carousels that run on mobile only.

Carousel - Mobile Only

Use `class="carousel carousel--compact"` for carousels that has dots on mobile and arrows on desktop.

Full-width Banner

This style is also used for hero.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae finibus sem. Maecenas vitae faucibus est. Donec facilisis facilisis ultricies. Etiam pretium pellentesque mi sed laoreet. In ornare, mi quis tempus faucibus, lorem magna iaculis urna, sed suscipit mauris leo vel neque.

Aliquam vel dolor augue. Donec porta posuere diam. Sed nisl quam, porttitor vel cursus nec, scelerisque nec urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae finibus sem. Maecenas vitae faucibus est. Donec facilisis facilisis ultricies. Etiam pretium pellentesque mi sed laoreet. In ornare, mi quis tempus faucibus, lorem magna iaculis urna, sed suscipit mauris leo vel neque.

Aliquam vel dolor augue. Donec porta posuere diam. Sed nisl quam, porttitor vel cursus nec, scelerisque nec urna.

Modal Type

Default Modal

To display this modal, add data-modal attribute with modal id.

Size Guide Modal

Use .modal--medium class to specify a Size Guide Modal type.

Size Modal with Accordion

This modal will include an accordion module.

Notification text
Success message
Warning display