Style Guide
Elements
Headings
.header-one: The quick brown fox jumps over the lazy dog
.header-two: The quick brown fox jumps over the lazy dog
.header-three: The quick brown fox jumps over the lazy dog
.header-four: The quick brown fox jumps over the lazy dog
.header-five: The quick brown fox jumps over the lazy dog
.header-six: The quick brown fox jumps over the lazy dog
Body
.body-one: The quick brown fox jumps over the lazy dog
.body-two: The quick brown fox jumps over the lazy dog
.body-three: The quick brown fox jumps over the lazy dog
.body-four: The quick brown fox jumps over the lazy dog
.body-five: The quick brown fox jumps over the lazy dog
.body-six: The quick brown fox jumps over the lazy dog
.body-seven: The quick brown fox jumps over the lazy dog
.body-eight: The quick brown fox jumps over the lazy dog
.body-nine: The quick brown fox jumps over the lazy dog
Labels
.label-one: The quick brown fox jumps over the lazy dog
.label-two: The quick brown fox jumps over the lazy dog
.label-three: The quick brown fox jumps over the lazy dog
CTA
.cta-one: The quick brown fox jumps over the lazy dog
.cta-two: 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
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.
Primary Font
Secondary Font
Tertiary Font
Primary Font Bold
Secondary Font Bold
Tertiary Font Bold
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:
Vue Test
Icons
Split Tout Sample Configuration 1
Get inspired
No living room is complete without the perfect focal point. Handcrafted in Los Angeles from solid wood, the Bay Coffee Table is a piece made for elevated living.
Learn moreSplit Tout Sample Configuration 2
The Trendless Textile
When it comes to your home, there’s one textile that never disappoints: boucle. Vintage-inspired yet fittingly contemporary, our boucle furniture will transform any space.
Shop NowSplit Tout Sample Configuration 3
Style
3 Looks That Define Summer Style
Invigorate your seasonal wardrobe with these casual summer outfits that are equal parts comfortable and polished.
Entertaining
The Complete Guide to Buying & Trying Summer Wine
We asked wine expert Marissa Ross for a rundown on all things natural wine and the bottles she keeps on hand all season long.
Read moreProduct Item