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 field *

Text dropdown *

Default

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

Accordion - Lite - Mobile Only

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

Details

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.

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.

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

Typography

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

Accordion - Lite

Accordion - Lite - All breakpoints

Details

Details

Details

Details

Details

Accordion - Lite - Mobile Only

Details

Details

Details

Details

Details

Carousel

Carousel - Mobile Only

Carousel - Mobile Only

Full-width Banner

Modal Type

Default Modal

Size Guide Modal

Womens Size Guide

Size Modal with Accordion

Children Size Guide

Ava Leather Ballets

Catie Ballets

Boots & Gumboots

Sign up now & receive 15% off your next purchase

Subscribe now