Thank you for creating an account, next we will send you an activation email to confirm the account set up.

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.

1
2
3
4
5

Carousel - Mobile Only

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

1
2
3

Carousel - Mobile Only

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

1
2
3
4
5

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat magna nec erat dapibus fermentum. In ultricies hendrerit ante vel sollicitudin.

Size Guide Modal

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

Womens Size Guide

Euro Size AUS / UK Size Ideal Foot Length
36 5.5 22.5cm
37 6.5 23.5cm
38 7.5 24.0cm

Centimeter measurment is the length of a barefoot without shoe or sock on. Please be aware this is a guide only. For more information visit our FAQ page.

Size Modal with Accordion

This modal will include an accordion module.

Children Size Guide

Ava Leather Ballets

Euro Size AUS / UK Size Ideal Foot Length
36 5.5 22.5cm
37 6.5 23.5cm
38 7.5 24.0cm

Catie Ballets

Euro Size AUS / UK Size Ideal Foot Length
36 5.5 22.5cm
37 6.5 23.5cm
38 7.5 24.0cm

Boots & Gumboots

Euro Size AUS / UK Size Ideal Foot Length
36 5.5 22.5cm
37 6.5 23.5cm
38 7.5 24.0cm
Notification text
Success message
Warning display

Another Blog Post With A Made Up Title

Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc Read more

Another Blog Post With A Made Up Title

Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc Read more

Another Blog Post With A Made Up Title

Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc Read more