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

H2

H3

H4

Paragraph

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Paragraph alternate

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Text Link

Discover more
Discover more hover

Button

Button Outline

Button White

{{ errorMessage }}

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.

Hero

Styleguide for all basic heroes

OnceWas Default Featured Image

Styleguide - Hero base

Styleguide: This is the basic hero
OnceWas Default Featured Image

Styleguide - Hero Right Content

Styleguide: This is the right content hero
OnceWas Default Featured Image

Styleguide - Hero Top Left Content

Styleguide: This is the top left hero
OnceWas Default Featured Image

Styleguide - Hero Bottom Right Gradient Content

Styleguide: This is the bottom right with background grandient hero
OnceWas Default Featured Image

Styleguide - Hero long description

Styleguide: This is the long description hero to test on mobile responsive Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur maiores laudantium quidem officia debitis quisquam atque esse, architecto laborum sint! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur maiores laudantium quidem officia debitis quisquam atque esse, architecto laborum sint! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur maiores laudantium quidem officia debitis quisquam atque esse, architecto laborum sint!
OnceWas Default Featured Image

Styleguide - Hero long description

Styleguide: This is the long description hero to test on mobile responsive and break it at mobile Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur maiores laudantium quidem officia debitis quisquam atque esse, architecto laborum sint! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur maiores laudantium quidem officia debitis quisquam atque esse, architecto laborum sint! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur maiores laudantium quidem officia debitis quisquam atque esse, architecto laborum sint!

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.

Notification text
Success message
Warning display

Cards Type



Card default

Card Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Inverse layout

Card Inverse layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Product

Card Collection

Card Collection

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card Tiny