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 link 1 a element and external a element examples
The link 2 a element and external a element examples
The link 1 rte a element and link 1 rte external a element examples
The link 2 rte a element and link 2 rte 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
The example
The example
The legal element example
P1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero.
P2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero.
P3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero.
P4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero.
Form Elements
Components
Icons
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