Hero - Primary
A collaboration inspired by the FASHION and ideals of the disco Era,
SHOP THE COLLECTION
Style Guide
Elements
Headings
H1 The quick brown fox jumps over the lazy dog
H2 The quick brown fox jumps over the lazy dog
H3 The quick brown fox jumps over the lazy dog
H4 The quick brown fox jumps over the lazy dog
H5 The quick brown fox jumps over the lazy dog
H6 The quick brown fox jumps over the lazy dog
List Types
Ordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
Definition List
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
Tables
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| A row with a cell spanning all 3 columns | ||
| Table Footer 1 | Table Footer 2 | Table Footer 3 |
Text Elements
The a element and external a element examples
The abbr element and an abbr element with title examples
The ACRONYM element example
The b element example
The cite element example
The code element example
The data element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example
The q element
exampleinside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The example
The u element example
The var element example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero. Nam tristique eleifend enim, a suscipit sem maximus nec. Proin lobortis tortor vel sem suscipit euismod. Cras laoreet mattis libero, in viverra erat volutpat ac. Cras porttitor luctus fringilla. Nullam elementum tortor sed velit luctus, quis egestas urna pretium. Curabitur convallis arcu augue, ut feugiat mi vehicula ac. Nam ac tincidunt diam. Vivamus eu neque commodo metus congue luctus. Vivamus tempor molestie ex, eu mollis metus eleifend id. Sed vel condimentum metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus urna, rutrum a mauris a, luctus pulvinar odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu scelerisque elit.
Quisque vel fringilla libero, sed ornare nulla. Nulla ac condimentum nisl. Aliquam ac risus ac mauris mattis semper suscipit sit amet nisi. Duis vitae augue ut arcu varius ullamcorper sed a erat. Sed vel ligula at augue maximus dignissim vel ut risus. Sed quis felis pharetra, porta ante ut, malesuada nisi. Pellentesque lacinia turpis ultricies metus bibendum interdum. Mauris vel iaculis quam, eget tincidunt leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque viverra justo ut auctor mattis. Morbi nec est fermentum, interdum velit id, varius tellus. Praesent et tempor ligula. Mauris nulla felis, viverra fermentum magna nec, egestas condimentum felis. Donec imperdiet ipsum ac urna iaculis molestie. Nam malesuada quis justo vitae tincidunt.
Form Elements
Components
Accordion
Modals
Toggle Dropdown
Lazy Load Image
Snippet - using the `c-responsive-image` snippet with an image object:
Custom - using `data-sizes="auto"` with custom widths:
Dynamic background color
Vue Test
Split Tout
The summer wardrobe
Cool breathable layers, for quick errand runs and poolside vacationing later
The summer wardrobe
Cool breathable layers, for quick errand runs and poolside vacationing later
Our Denim
Refresh your look with new light washes, and TIMELESS CLASSICS YOU’LL RETURN TO AGAIN AND AGAIN.
Our Denim
Refresh your look with new light washes, and TIMELESS CLASSICS YOU’LL RETURN TO AGAIN AND AGAIN.
Video
Portrait Inline Video
Landscape Inline Video (With dark theme)
Alt Video (Modal)
Collection Touts
Latest
Drops
All Drops
Product Item
Image sizes based on product type
Measurements
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening
waist
25
in
rise
11
in
hip
34
in
inseam
27
in
opening
14
in
- 25 in waist
- 34 in hip
- 11 in rise
- 27 in inseam
- 14 in leg opening