Carousel
Use `data-module-init="carousel"` to initialize carousel functionality.
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.
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 - 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.
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 |
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 |