#003E69
#075488
#37919A
#F47B20
#333333
#6E6F6F
#ABACAD
#CCCECF
#E5E5E5
#F1F1F1
#F7F7F7
#ED3126
#FFB700
#5E9732
#000000
Transparent to #333333
Transparent to #7F7F7F
<!--
Use the `.gradient-{number}` class to add a background gradient to an element
- Number: Number from 1-2
-->
<div class="box" class="gradient-1">
Add some gradient...
</div>Depth 1
Depth 2
Depth 3
Depth 4
Depth 5
Depth 6
Depth 7
Depth 8
<!--
Use the `.shadow-{number}` class to add a box shadow to an element
- Number: Number from 1-8
-->
<img src="image.jpg" class="shadow-1">
<!-- Normal -->
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<!-- Bold -->
<h1 class="text-bold">Heading Level 1</h1>
<h2 class="text-bold">Heading Level 2</h2>
<h3 class="text-bold">Heading Level 3</h3>
<h4 class="text-bold">Heading Level 4</h4>
<h5 class="text-bold">Heading Level 5</h5>
<h6 class="text-bold">Heading Level 6</h6>
<!--
Modifiers:
".text-bold" - Bold the heading text
-->Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti vero molestias consectetur, magni autem optio numquam voluptates non rem ullam laborum voluptatem odio laboriosam incidunt, quidem labore voluptatum quasi facilis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti vero molestias consectetur, magni autem optio numquam voluptates non rem ullam laborum voluptatem odio laboriosam incidunt, quidem labore voluptatum quasi facilis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti vero molestias consectetur, magni autem optio numquam voluptates non rem ullam laborum voluptatem odio laboriosam incidunt, quidem labore voluptatum quasi facilis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti vero molestias consectetur, magni autem optio numquam voluptates non rem ullam laborum voluptatem odio laboriosam incidunt, quidem labore voluptatum quasi facilis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti vero molestias consectetur, magni autem optio numquam voluptates non rem ullam laborum voluptatem odio laboriosam incidunt, quidem labore voluptatum quasi facilis.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti vero molestias consectetur, magni autem optio numquam voluptates non rem ullam laborum voluptatem odio laboriosam incidunt, quidem labore voluptatum quasi facilis.
<!-- Normal -->
<p>Content goes here...</p>
<!-- Small -->
<p class="is-small">Content goes here...</p>
<!-- Fine -->
<p class="is-fine">Content goes here...</p>
<!--
Modifiers:
".is-small" - Make the text smaller
".is-fine" - Make the text even smaller
-->Blue |
Blue w/Icon |
Teal |
Teal w/Icon |
| Text Link | Document.pdf | Text Link | Document.pdf |
<!-- Plain -->
<a href="#">Text Link</a>
<!-- With Icon -->
<a href="#" class="has-icon text-teal">
<svg class="icon icon-document bump-up">
<use xlink:href="#icon-document"></use>
</svg>
Document.pdf
</a>
<!--
Modifiers:
".has-icon" - Use on `a` tag when including an icon
".is-small" - Use on `a` tag to make the text smaller
--><ul>
<li>List item content...</li>
<li>List item content with nested list...
<ul>
<li>List item content with nested list...
<ul>
<li>List item content...</li>
</ul>
</li>
</ul>
</li>
<li>List item content...</li>
</ul>
<!--
Modifiers:
".is-small" - Use on `ul` tag to make the text smaller
".is-tight" - Use on `ul` tag to tighten spacing
--><ol>
<li>List item content...</li>
<li>List item content with nested list...
<ol>
<li>List item content with nested list...
<ol>
<li>List item content...</li>
</ol>
</li>
</ol>
</li>
<li>List item content...</li>
</ol>
<!--
Modifiers:
".is-small" - Use on `ol` tag to make the text smaller
".is-tight" - Use on `ol` tag to tighten spacing
--><dl>
<dt>Data:</dt>
<dd>Attribute goes here...</dd>
<dt>Data:</dt>
<dd>Attribute goes here...</dd>
</dl>
<!--
Modifiers:
".is-small" - Use on `dl` tag to make the text smaller
--><ul class="list list--checklist text-teal">
<li>List item content...</li>
<li>List item content...</li>
<li>List item content...</li>
</ul>
<!--
Modifiers:
".is-small" - Use on `ul` tag to make the text smaller
-->Default |
|
|
Filled In |
|
|
Querying |
||
Valid |
|
|
Warning |
|
|
Error |
|
|
Textarea |
|
|
Textarea |
|
<!-- Label as Placeholder -->
<div class="form-field">
<div class="form-field__wrap is-floating">
<input id="input-1" type="text" class="form-field__input">
<label for="input-1" class="form-field__label">Label as Placeholder</label>
</div>
<small class="form-field__message">Helper text will go here</small>
</div>
<!-- Normal -->
<div class="form-field">
<label for="input-2" class="form-field__label">Label</label>
<div class="form-field__wrap">
<input id="input-2" type="text" class="form-field__input">
</div>
<small class="form-field__message">Helper text will go here</small>
</div>
<!--
Modifiers:
".is-filled" - Use with `.form-field` class to add a clear input button
".is-querying" - Use with `.form-field` class to add a loading icon
".is-valid" - Use with `.form-field` class to add a checkmark icon
".is-warning" - Use with `.form-field` class to add a warning icon
".is-error" - Use with `.form-field` class to add an error icon
".is-search" - Use with `.form-field` class to add floating search styling
--><div class="form-field">
<div class="form-field__radio">
<label>
<input type="radio" name="radio-input">
<div class="form-field__content">Radio Input Option 1</div>
</label>
</div>
<div class="form-field__radio">
<label>
<input type="radio" name="radio-input">
<div class="form-field__content">Radio Input Option 2</div>
</label>
</div>
</div><div class="form-field">
<div class="form-field__checkbox">
<label>
<input type="checkbox" name="checkboxes[]">
<div class="form-field__content">Checkbox Option 1</div>
</label>
</div>
<div class="form-field__checkbox">
<label>
<input type="checkbox" name="checkboxes[]">
<div class="form-field__content">Checkbox Option 2</div>
</label>
</div>
</div><div class="form-field">
<div class="form-field__switch">
<label>
<span>On</span>
<input type="checkbox" name="switch-input">
<span class="switch"></span>
<span>Off</span>
</label>
</div>
</div>Drop files or browse your files.
<div class="form-field">
<div class="form-field__upload">
<svg class="icon icon-upload"><use xlink:href="#icon-upload"></use></svg>
<strong>Upload your data file.</strong><br>
<p class="is-small">Drop files or <a class="text-teal">browse your files.</a></p>
</div>
</div>Default |
|
Querying |
|
|
|
|
Filled In |
|
<div class="form-field is-search">
<div class="form-field__wrap">
<input type="search" class="form-field__input" placeholder="Placeholder">
</div>
<ul class="form-field__results">
<li class="is-active">Result Item 1</li>
<li>Result Item 2</li>
<li>Result Item 3</li>
</ul>
</div>
<!--
Modifiers:
".is-filled" - Use with `.form-field` class to add a clear input button
".is-querying" - Use with `.form-field` class to add a loading icon
".is-open" - Use with `.form-field` class to show search results dropdown
".is-search" - Use with `.form-field` class to add floating search styling
".is-active" - Add to `.form-field__results li` to add active styling
-->| Column Name | Column Name | Column Name |
|---|---|---|
| 1234567890 | Central Air (Gas) | 01/05/2019 |
| 1234567890 | Central Air (Gas) | 01/05/2019 |
<table>
<thead>
<tr>
<th>Column Name</th>
<th>Column Name</th>
<th>Column Name</th>
<th>Column Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1234567890</td>
<td>1234567890</td>
<td>Central Air (Gas)</td>
<td>01/05/2019</td>
</tr>
<tr>
<td>1234567890</td>
<td>1234567890</td>
<td>Central Air (Gas)</td>
<td>01/05/2019</td>
</tr>
</tbody>
</table>
<!--
Modifiers:
".is-small" - Use on `table` tag to make the text smaller
".is-tight" - Use on `table` tag to tighten spacing
".is-full" - Use on `table` tag to make the table full width
-->| Column Name | Column Name | Column Name | Column Name | Column Name | ||
|---|---|---|---|---|---|---|
| 1234567890 | 1234567890 | Central Air (Gas) | 01/05/2019 | Open | View |
|
| 1234567890 | 1234567890 | Central Air (Gas) | 01/05/2019 | Open | View |
|
| 1234567890 | 1234567890 | Central Air (Gas) | 01/05/2019 | Open | View |
|
<div class="table-group">
<div class="table-group__header">
<h4 class="table-group__name">Table Name</h4>
<div class="table-group__action">
<button class="btn is-small btn--green">Table Action</button>
</div>
</div>
<table class="table-group__table table--fancy">
<thead>
<tr>
<th class="is-sortable is-active is-desc">Column Name</th>
<th class="is-sortable">Column Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Central Air (Gas)</td>
<td>01/05/2019</td>
<td class="view"><a href="#">View</a></td>
<td class="quick-actions">
<div class="tooltip" data-tooltip="bottom">
<svg class="icon icon-dots">
<use xlink:href="#icon-dots"></use>
</svg>
<div class="tooltip__popup">
<ul class="tooltip__menu">
<li><a href="#">Quick Action Link 1</a></li>
<li><a href="#">Quick Action Link 2</a></li>
<li><a href="#">Quick Action Link 3</a></li>
</ul>
<div class="tooltip__tip"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>Central Air (Gas)</td>
<td>01/05/2019</td>
<td class="view"><a href="#">View</a></td>
<td class="quick-actions">
<div class="tooltip" data-tooltip="bottom">
<svg class="icon icon-dots">
<use xlink:href="#icon-dots"></use>
</svg>
<div class="tooltip__popup">
<ul class="tooltip__menu">
<li><a href="#">Quick Action Link 1</a></li>
<li><a href="#">Quick Action Link 2</a></li>
<li><a href="#">Quick Action Link 3</a></li>
</ul>
<div class="tooltip__tip"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--
Modifiers:
".is-sortable" - Add to `th` tag to add sortable field styling
".is-desc" - Add to `th` tag to flip the sort indicator
".is-active" - Add to `th` tag to add active styling
".is-tight" - Use on `table` tag to tighten spacing
".is-full" - Use on `table` tag to make the table full width
-->Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nam qui molestias maxime esse enim iste quo perspiciatis reiciendis inventore unde quaerat, accusamus, a repudiandae atque nulla possimus quas ea!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nam qui molestias maxime esse enim iste quo perspiciatis reiciendis inventore unde quaerat, accusamus, a repudiandae atque nulla possimus quas ea!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nam qui molestias maxime esse enim iste quo perspiciatis reiciendis inventore unde quaerat, accusamus, a repudiandae atque nulla possimus quas ea!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nam qui molestias maxime esse enim iste quo perspiciatis reiciendis inventore unde quaerat, accusamus, a repudiandae atque nulla possimus quas ea!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nam qui molestias maxime esse enim iste quo perspiciatis reiciendis inventore unde quaerat, accusamus, a repudiandae atque nulla possimus quas ea!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta nam qui molestias maxime esse enim iste quo perspiciatis reiciendis inventore unde quaerat, accusamus, a repudiandae atque nulla possimus quas ea!
<div class="accordion">
<div class="accordion-item">
<button class="accordion-item__heading">Heading</button>
<div class="accordion-item__content">
<p>Content goes here...</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-item__heading">Heading</button>
<div class="accordion-item__content">
<p>Content goes here...</p>
</div>
</div>
</div>
<!--
Modifiers:
".is-small" - Use with `.accordion` class to make the text smaller
-->Tab 1 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius suscipit dolor eum asperiores et, hic recusandae tenetur sed in a est id quasi esse accusantium repellendus laborum numquam dolores ex.
Tab 2 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius suscipit dolor eum asperiores et, hic recusandae tenetur sed in a est id quasi esse accusantium repellendus laborum numquam dolores ex.
Tab 3 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius suscipit dolor eum asperiores et, hic recusandae tenetur sed in a est id quasi esse accusantium repellendus laborum numquam dolores ex.
Tab 4 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius suscipit dolor eum asperiores et, hic recusandae tenetur sed in a est id quasi esse accusantium repellendus laborum numquam dolores ex.
<ul class="tab-controls" data-tab-set="1">
<li>
<button class="tab-controls__button is-active" data-tab-item="1">Tab Title 1</button>
</li>
<li>
<button class="tab-controls__button" data-tab-item="2">Tab Title 2</button>
</li>
</ul>
<div class="tab-items" data-tab-set="1">
<div class="tab-items__item is-active" data-tab="1">
<p>Content goes here...</p>
</div>
<div class="tab-items__item" data-tab="2">
<p>Content goes here...</p>
</div>
</div>
<!--
Modifiers:
".is-active" - Add to `.tab-controls__button` class to add active styling and show content
"[disabled]" - Add to `.tab-controls__button` class to add disabled styling
--><ul class="tab-controls" data-tab-set="2">
<li>
<button class="tab-controls__button is-active" data-tab-item="1">
Tab 1 Title
<div class="badge">5</div>
</button>
</li>
<li>
<button class="tab-controls__button" data-tab-item="2">
Tab 2 Title
<div class="badge">10</div>
</button>
</li>
</ul>
<div class="tab-items" data-tab-set="2">
<div class="tab-items__item is-active" data-tab="1">
<p>Content goes here...</p>
</div>
<div class="tab-items__item" data-tab="2">
<p>Content goes here...</p>
</div>
</div>
<!--
Modifiers:
".is-active" - Use with `.tab-controls__button` and `.tab-items__item` classes to add active styling and show content
"[disabled]" - Use with `.tab-controls__button` class to add disabled styling
--><ul class="list list--tags">
<li><a href="#" class="list__link">Tag Name</a></li>
<li><a href="#" class="list__link">Tag Name</a></li>
<li><a href="#" class="list__link">Tag Name</a></li>
</ul><ul class="list list--labels">
<li><a href="#" class="list__link">Label Name</a></li>
<li><a href="#" class="list__link">Label Name</a></li>
<li><a href="#" class="list__link">Label Name</a></li>
</ul><span class="status-label status-label--green">Status Label</span>
<span class="status-label status-label--green is-outlined">Outlined Status Label</span>
<!--
Modifiers:
".status-label--{color}" - Use with `.status-label` class to change the label color
- Colors: red, green, yellow
".is-outlined" - Use with `.status-label` class to make the label outlined
--><ul class="list list--subnav">
<li><a href="#" class="list__link is-active">Link 1</a></li>
<li><a href="#" class="list__link">Link 2</a></li>
<li><a href="#" class="list__link" disabled>Link 3</a></li>
<li>
<div class="list__link">
<div class="tooltip" data-tooltip="bottom">
<svg class="icon icon-bars bump-up">
<use xlink:href="#icon-bars"></use>
</svg>
More
<div class="tooltip__popup">
<ul class="tooltip__menu">
<li><a>Extra Link 4</a></li>
<li><a>Extra Link 5</a></li>
</ul>
<div class="tooltip__tip"></div>
</div>
</div>
</div>
</li>
</ul>
<!--
Modifiers:
".is-active" - Use with `.list__link` class to add active styling
"[disabled]" - Use with `.list__link` class to add disabled styling
--><ul class="list list--pagination">
<li>
<a href="#" class="list__link arrow arrow--prev" disabled></a>
</li>
<li>
<a href="#" class="list__link is-active">
<span>1</span>
</a>
</li>
<li>
<a href="#" class="list__link">
<span>2</span>
</a>
</li>
<li>
<a href="#" class="list__link arrow arrow--next"></a>
</li>
</ul>
<!--
Modifiers:
".is-active" - Use with `.list__link` class to add active styling
"[disabled]" - Use with `.arrow` class to add disabled styling
--><ul class="list list--breadcrumbs">
<li><a href="#" class="list__link">Breadcrumb 1</a></li>
<li><a href="#" class="list__link">Breadcrumb 2</a></li>
<li><a href="#" class="list__link is-active">Breadcrumb 3</a></li>
</ul>
<!--
Modifiers:
".is-active" - Use with `.list__link` class to add active styling
--><ul class="list list--stepper">
<li class="is-complete">Step 1 Name</li>
<li class="is-active">Step 2 Name</li>
<li>Step 3 Name</li>
</ul>
<!--
Modifiers:
".is-complete" - Use with `li` tag to add completed styling
".is-active" - Use with `li` tag to add active styling
-->|
Tell us about your home to get started.
|
Tell us about your home to get started.
|
|
Tell us about your home to get started.
|
<!-- Content -->
<div class="tooltip" data-tooltip="top">
<svg class="icon icon-info">
<use xlink:href="#icon-info"></use>
</svg>
<div class="tooltip__popup">
<div class="tooltip__content">
Tell us about your home to get started.
</div>
<div class="tooltip__tip"></div>
</div>
</div>
<!-- Menu -->
<div class="tooltip" data-tooltip="bottom">
Tooltip Menu
<div class="tooltip__popup">
<ul class="tooltip__menu">
<li><a>Tooltip Link 1</a></li>
<li><a>Tooltip Link 2</a></li>
</ul>
<div class="tooltip__tip"></div>
</div>
</div>
<!--
Modifiers:
"data-tooltip="{position}"" - Use with `.tooltip` class to set where the tooltip appears
-->|
Success Text: This is a toast notification for success messages. Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
|
Warning Text: This is a toast notification for warning messages.
|
|
Error Text: This is a toast notification for error messages.
|
<div class="notification is-success">
<strong>Bold Text:</strong> Notification message goes here...
<button class="notification__close"></button>
</div>
<!--
Modifiers:
".is-success" - Use with `.notification` class to add success styling
".is-warning" - Use with `.notification` class to add warning styling
".is-error" - Use with `.notification` class to add error styling
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quibusdam eaque eligendi possimus sed impedit sapiente, pariatur nemo laborum optio corrupti! Aliquam ipsa officiis molestias consequatur perferendis, aspernatur praesentium reprehenderit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quibusdam eaque eligendi possimus sed impedit sapiente, pariatur nemo laborum optio corrupti! Aliquam ipsa officiis molestias consequatur perferendis, aspernatur praesentium reprehenderit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quibusdam eaque eligendi possimus sed impedit sapiente, pariatur nemo laborum optio corrupti! Aliquam ipsa officiis molestias consequatur perferendis, aspernatur praesentium reprehenderit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quibusdam eaque eligendi possimus sed impedit sapiente, pariatur nemo laborum optio corrupti! Aliquam ipsa officiis molestias consequatur perferendis, aspernatur praesentium reprehenderit.
<!-- Normal -->
<div class="card card--basic">
<h4 class="card__headline text-bold">Text Headline</h4>
<p class="card__content is-small">
Card content goes here...
</p>
<ul class="card__actions">
<li><a href="#" class="text-teal is-small">Text Link</a></li>
</ul>
</div>
<!-- With Header/Footer -->
<div class="card card--basic">
<div class="card__label text-teal">Label</div>
<h4 class="card__headline text-bold">Text Headline</h4>
<p class="card__content is-small">
Card content goes here...
</p>
<div class="card__footer">
<p><strong>Tags:</strong></p>
<ul class="card__tags list--tags">
<li><a href="#" class="list__link">Tag</a></li>
</ul>
<ul class="card__actions">
<li><a href="#" class="text-teal is-small">Footer Link</a></li>
</ul>
</div>
</div>|
Teal
Air Conditioning
Symptoms
|
|
Blue
Air Conditioning
Symptoms
|
<div class="card card--color card--teal">
<h4 class="card__headline text-bold">Text Headline</h4>
<div class="card__content">
<strong class="is-small">Bold Text</strong>
<ul class="is-tight is-small">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<button class="card__close"></button>
</div>
<!--
Modifiers:
".card--{color}" - Use with `.card--color` class to change card color
- Colors: blue, teal, orange, red, green, yellow
-->Info Entry Data
Info Label:Info Entry Data
email@address.com
<div class="card card--info">
<div class="card__header">
<h4 class="card__headline text-bold">Text Headline</h4>
<button class="card__action">
<svg class="icon icon-edit">
<use xlink:href="#icon-edit"></use>
</svg>
Edit
</button>
</div>
<div class="card__content is-equal-spaced">
<div>
<small>Info Label:</small>
<p>Info Entry Data</p>
<small>Info Label:</small>
<p>Info Entry Data</p>
</div>
<div>
<small>Contact Preference:</small>
<div class="form-field">
<div class="form-field__radio">
<label>
<input type="radio" name="info-radio-buttons" checked>
<div class="form-field__content">Email</div>
</label>
</div>
<div class="form-field__radio">
<label>
<input type="radio" name="info-radio-buttons">
<div class="form-field__content">Phone</div>
</label>
</div>
</div>
<p></p>
<small>Email Address:</small>
<p>email@address.com</p>
</div>
</div>
</div><div class="card">
Insert fancy table markup here (see above)
</div>
<!--
Modifiers:
".card--{color}" - Use with `.card--color` class to change card color
- Colors: blue, teal, orange, red, green, yellow
-->Default |
|
Selected |
|
Disabled |
|
<div class="form-field">
<div class="form-field__radio is-card">
<label>
<input type="radio" name="card-radio">
<div class="form-field__content">
<h4 class="form-field__title">Title</h4>
<p class="form-field__description">Description</p>
</div>
</label>
</div>
</div>
<!--
Modifiers:
"[disabled]" - Add to `input` tag to add disabled styling
-->Default |
|
Selected |
|
Disabled |
|
<div class="form-field">
<div class="form-field__checkbox is-card">
<label>
<input type="checkbox" name="card-checkbox">
<div class="form-field__content">
<div>
<h4 class="form-field__title">Title</h4>
<p class="form-field__description">Description</p>
</div>
<div class="form-field__action" data-inactive="Add" data-active="Remove"></div>
</div>
</label>
</div>
</div>
<!--
Modifiers:
"[disabled]" - Add to `input` tag to add disabled styling
"[data-inactive="Inactive"]" - Use with `.form-field__action` to set the button text when inactive
"[data-active="Active"]" - Use with `.form-field__action` to set the button text when active
-->Praesent commodo cursus magna, vel scelerisque nisl consectetur et
Donec ullamcorper nulla non metus auctor fringilla
Maecenas sed diam eget risus varius blandit sit amet non magna, vel scelerisque nisl consectetur
<ul class="card card--steps">
<li class="card__step">
<h4 class="card__headline">Headline</h4>
<p class="card__content">
Step content goes here...
</p>
<ul class="card__actions">
<li><a href="#" class="text-teal">Text Link</a></li>
</ul>
</li>
<li class="card__step">
<h4 class="card__headline">Headline</h4>
<p class="card__content">
Step content goes here...
</p>
</li>
</ul>
Greg & Colleen Hays
(Buy)
G3441 Clement St
Flint, MI 48504-2484
Single Family Residence
| Plan Price | $375.00 |
| Plan Price Fee | $95.00 |
| Svc Ltd | $0.00 |
| Svc Ltd | $0.00 |
<div class="card card--header">
<div class="card__header">
<div class="card__left">
<h4 class="card__headline">Headline</h4>
<span class="status-label status-label--red">Status: Expired</span>
</div>
<div class="card__action">
<div class="tooltip" data-tooltip="bottom">
<svg class="icon icon-bars bump-up">
<use xlink:href="#icon-bars"></use>
</svg>
Options
<div class="tooltip__popup">
<ul class="tooltip__menu">
<li><a href="#">Action Link 1</a></li>
<li><a href="#">Action Link 2</a></li>
</ul>
<div class="tooltip__tip"></div>
</div>
</div>
</div>
</div>
<div class="card__content is-spread-spaced">
<div>
<dl class="is-small">
<dt>Plan:</dt>
<dd>IN & MI HPONE-7 W/$95 S/F 4-06</dd>
</dl>
</div>
<div>
<ul class="is-spread-spaced">
<div>
<small>Holder(s):</small>
<p class="is-small">
Greg & Colleen Hays<br>
(Buy)
</p>
</div>
<div>
<small>Property Address:</small>
<p class="is-small">
G3441 Clement St<br>
Flint, MI 48504-2484<br>
Single Family Residence
</p>
</div>
</ul>
</div>
<div>
<small>Accounting:</small>
<table class="is-tight is-small">
<tr>
<td>Plan Price</td>
<td>$375.00</td>
</tr>
</table>
</div>
</div>
</div><!-- Trigger -->
<button data-modal="{modal-name}">Open Modal</button>
<!-- Modal -->
<div id="modal-{modal-name}" class="modal">
<div class="modal__content">
<h4 class="is-bold">Verify Holder Information</h4>
<small>Contact Preferences:</small>
<div class="form-field">
<div class="form-field__radio">
<label>
<input type="radio" name="modal-radio-buttons" checked>
<div class="form-field__content">Email</div>
</label>
</div>
<div class="form-field__radio">
<label>
<input type="radio" name="modal-radio-buttons">
<div class="form-field__content">Phone</div>
</label>
</div>
</div>
<div class="form-field">
<div class="form-field__checkbox">
<label>
<input type="checkbox" name="refused-email">
<div class="form-field__content">Customer refused to give email</div>
</label>
</div>
</div>
<div class="form-field is-full is-filled">
<div class="form-field__wrap is-floating">
<input id="modal-email" type="text" class="form-field__input" value="email@address.com">
<label for="modal-email" class="form-field__label">Email Address</label>
</div>
</div>
<div class="form-field is-full">
<div class="form-field__wrap is-floating">
<input id="modal-phone" type="text" class="form-field__input">
<label for="modal-phone" class="form-field__label">Phone Number</label>
</div>
</div>
<div class="form-field">
<button class="btn btn--teal is-small float-right" data-modal-close>Save</button>
</div>
<button class="modal__close" data-modal-close></button>
</div>
</div>
<!--
Modifiers:
"[data-modal="{modal-name}"]" - Add to any tag that you want to open the modal when clicked
"[data-modal-close]" - Add to any tag that you want to close the modal when clicked
--><div class="sidebar-wizard-container">
<div class="sidebar-wizard">
<h4 class="is-bold">Service Wizard</h4>
<p class="is-small">
Contract #: <a class="text-teal">15190784</a><br>
IN & MI HPONE-7 W/$95 S/F 4-06
</p>
<p class="is-small">
<strong>Greg & Colleen Hays</strong><br>
G3441 Clement St<br>
Flint, MI 48504-2484
</p>
<ul class="sidebar-wizard__stepper">
<li class="sidebar-wizard__step is-complete">
<span>Step Name</span>
<a>Edit</a>
</li>
<li class="sidebar-wizard__step is-active">
<span>Step Name</span>
<a>Edit</a>
</li>
<li class="sidebar-wizard__step>
<span>Step Name</span>
<a>Edit</a>
</li>
</ul>
</div>
</div>
<!--
Modifiers:
".is-complete" - Use with `.sidebar-wizard__step` class to add completed styling
".is-active" - Use with `.sidebar-wizard__step` class to add active styling
-->Depth 1
Depth 2
Depth 3
Depth 4
Depth 5
Depth 6
Depth 7
Depth 8
<!--
Use the `.shadow-{number}` class to add a box shadow to an element
- Number: Number from 1-8
-->
<img src="image.jpg" class="shadow-1">|
blue-lightest
|
blue-lighter
|
blue-light
|
blue
|
blue-dark
|
|
|
teal-lightest
|
teal-lighter
|
teal-light
|
teal
|
teal-dark
|
|
|
orange-lightest
|
orange-lighter
|
orange-light
|
orange
|
orange-dark
|
|
|
green-lightest
|
green-lighter
|
green-light
|
green
|
green-dark
|
|
|
red-lightest
|
red-lighter
|
red-light
|
red
|
red-dark
|
|
|
yellow-lightest
|
yellow-lighter
|
yellow
|
|||
|
gray-1
|
gray-2
|
gray-3
|
gray-4
|
gray-5
|
gray-6
|
|
white
|
black-1
|
black-2
|
<!--
Use the `.text-{color}` class to change the text color of an element
- Colors: See below
-->
<div class="text-teal-dark">This text will be teal-dark...</div>|
blue-lightest
|
blue-lighter
|
blue-light
|
blue
|
blue-dark
|
|
|
teal-lightest
|
teal-lighter
|
teal-light
|
teal
|
teal-dark
|
|
|
orange-lightest
|
orange-lighter
|
orange-light
|
orange
|
orange-dark
|
|
|
green-lightest
|
green-lighter
|
green-light
|
green
|
green-dark
|
|
|
red-lightest
|
red-lighter
|
red-light
|
red
|
red-dark
|
|
|
yellow-lightest
|
yellow-lighter
|
yellow
|
|||
|
gray-1
|
gray-2
|
gray-3
|
gray-4
|
gray-5
|
gray-6
|
|
white
|
black-1
|
black-2
|
<!--
Use the `.bg-{color}` class to change the background color of an element
- Colors: See below
-->
<div class="bg-blue-dark">This elements background color will be blue-dark...</div><!--
Use the `.text-{weight}` class to change the font weight of an element
- Weights: normal, bold
-->
<div class="text-bold">This text will be bold...</div><!--
Use the `.is-equal-spaced` class to equally space a group of elements
-->
<div class="is-equal-spaced">
<div>Equally spaced item</div>
<div>Equally spaced item</div>
<div>Equally spaced item</div>
</div><!--
Use the `.is-spread-spaced` class to add space between a group of elements
-->
<div class="is-spread-spaced">
<div>Spread spaced item</div>
<div>Spread spaced item</div>
<div>Spread spaced item</div>
</div><!--
Use the `.float-{direction}` class to float an element
- Directions: left, right
-->
<div class="float-right">Float element right</div>