Triggers an action and must not be used for navigation.
<a class="dc-btn" href="#" role="button">Anchor</a>
<button class="dc-btn" type="submit">Button</button>
<input class="dc-btn" type="button" value="Input">
<input class="dc-btn" type="submit" value="Submit">
Use the size modifiers dc-btn--large
and dc-btn--small
to make buttons larger or smaller.
<button class="dc-btn dc-btn--large">Large Button</button>
<button class="dc-btn">Normal Button</button>
<button class="dc-btn dc-btn--small">Small Button</button>
Buttons can have modifier classes applied to them. Different modifier classes have different meanings, use them wisely.
dc-btn--primary
: Triggers the primary action of the page it is placed on. Place only one primary button on each page/dialog.
dc-btn--destroy
: Triggers a destructive action which can't be undone and might involve loss of data.
dc-btn--disabled
: When a button is disabled. Buttons using this modifier should not be clickable.
dc-btn--link
: Has the appearance of a link but the dimensions and modifiers of a button.
<button class="dc-btn dc-btn--primary">Primary Button</button>
<button class="dc-btn dc-btn--destroy">Destroy Button</button>
<button class="dc-btn dc-btn--disabled">Disabled Button</button>
<br>
<button class="dc-btn dc-btn--link">Button Link</button>
<button class="dc-btn dc-btn--link dc-btn--destroy">Button Link - Destroy</button>
<button class="dc-btn dc-btn--link dc-btn--disabled">Button Link - Disabled</button>
<br>
Use the dc-btn--block
modifier to force a button to fill its parent's width.
<div class="container" style="display:block; width:60%; background-color: #fff; padding: 20px 20px 10px;">
<button class="dc-btn dc-btn--block">Block Button</button>
</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<div class="dc-card">
<h3 class="dc-h3">I am a basic card atom</h3>
<div class="dc-divider"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>
<input type="checkbox" class="dc-checkbox" id="c1">
<label for="c1" class="dc-label">Check this</label>
<input type="checkbox" class="dc-checkbox" id="c2" checked>
<label for="c2" class="dc-label">Check that</label>
<input type="checkbox" class="dc-checkbox" id="c3" checked disabled>
<label for="c3" class="dc-label">Check Disabled</label>
<input type="checkbox" id="c4" class="dc-checkbox dc-checkbox--alt">
<label for="c4" class="dc-label">Check this</label>
<input type="checkbox" id="c5" class="dc-checkbox dc-checkbox--alt" checked>
<label for="c5" class="dc-label">Check that</label>
<input type="checkbox" id="c6" class="dc-checkbox dc-checkbox--alt" checked disabled>
<label for="c6" class="dc-label">Check Disabled</label>
Use dc-divider
to create a lines to divide content sections width a light gray divider.
As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect. He was lying on his hard, as it were armor-plated, back and when he lifted his head a little he could see his dome-like brown belly divided into stiff arched segments on top of which the bed quilt could hardly keep in position and was about to slide off completely.
It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters
<p class="dc-p">As Gregor Samsa awoke one morning from uneasy dreams he found himself transformed in his bed into a gigantic insect. He was lying on his hard, as it were armor-plated, back and when he lifted his head a little he could see his dome-like brown belly divided
into stiff arched segments on top of which the bed quilt could hardly keep in position and was about to slide off completely.</p>
<hr class="dc-divider">
<p class="dc-p">It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in
the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters
<p>
All Icons are included in one icon font for easy usage. Icons can be made hoverable by using of the dc-icon--interactive
class.
<div class="sg-icons">
<i class="dc-icon dc-icon--add"><span>add</span></i>
<i class="dc-icon dc-icon--arrow-left"><span>arrow-left</span></i>
<i class="dc-icon dc-icon--arrow-right"><span>arrow-right</span></i>
<i class="dc-icon dc-icon--check"><span>check</span></i>
<i class="dc-icon dc-icon--cog"><span>cog</span></i>
<i class="dc-icon dc-icon--close"><span>close</span></i>
<i class="dc-icon dc-icon--eye"><span>eye</span></i>
<i class="dc-icon dc-icon--history"><span>history</span></i>
<i class="dc-icon dc-icon--info-circle"><span>info-circle</span></i>
<i class="dc-icon dc-icon--lock"><span>lock</span></i>
<i class="dc-icon dc-icon--more"><span>more</span></i>
<i class="dc-icon dc-icon--undo"><span>undo</span></i>
<i class="dc-icon dc-icon--redo"><span>redo</span></i>
<i class="dc-icon dc-icon--drag"><span>drag</span></i>
<i class="dc-icon dc-icon--contact dc-icon--interactive"><span>contact</span></i>
<i class="dc-icon dc-icon--menu dc-icon--interactive"><span>menu</span></i>
<i class="dc-icon dc-icon--help dc-icon--interactive"><span>help</span></i>
<i class="dc-icon dc-icon--user dc-icon--interactive"><span>user</span></i>
<i class="dc-icon dc-icon--play dc-icon--interactive"><span>play</span></i>
<i class="dc-icon dc-icon--search dc-icon--interactive"><span>search</span></i>
<i class="dc-icon dc-icon--trash dc-icon--interactive"><span>trash</span></i>
<i class="dc-icon dc-icon--error dc-icon--interactive"><span>error</span></i>
<i class="dc-icon dc-icon--info dc-icon--interactive"><span>info-large</span></i>
<i class="dc-icon dc-icon--success dc-icon--interactive"><span>success</span></i>
<i class="dc-icon dc-icon--warning dc-icon--interactive"><span>warning</span></i>
</div>
<a href class="dc-link">This link isn't pointing anywhere</a>
<br>
<a href class="dc-link dc-link--destroy">This link isn't pointing anywhere and destroy</a>
<br>
<a href class="dc-link dc-link--disabled">This link isn't pointing anywhere and is disabled</a>
<ul class="dc-list">
<li>First list element</li>
<li>Second list element</li>
<li>Third list element</li>
</ul>
<ul class="dc-list dc-list--is-unordered">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol class="dc-list dc-list--is-ordered">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<label class="dc-label">Simple</label>
<ul class="dc-list dc-list--is-scrollable">
<li class="dc-list__item">First list element</li>
<li class="dc-list__item">Second list element</li>
<li class="dc-list__item">Third list element</li>
<li class="dc-list__item">Fourth list element</li>
<li class="dc-list__item">Fifth list element</li>
<li class="dc-list__item">Sixth list element</li>
<li class="dc-list__item">Seventh list element</li>
<li class="dc-list__item">Eighth list element</li>
<li class="dc-list__item">Ninth list element</li>
<li class="dc-list__item">Tenth list element</li>
<li class="dc-list__item">Eleventh list element</li>
<li class="dc-list__item">Twelfth list element</li>
</ul>
<label class="dc-label">Interactive</label>
<ul class="dc-list dc-list--is-scrollable">
<li class="dc-list__item dc-list__item--is-interactive">First list element</li>
<li class="dc-list__item dc-list__item--is-interactive">Second list element</li>
<li class="dc-list__item dc-list__item--is-interactive">Third list element</li>
</ul>
<label class="dc-label">With Image</label>
<ul class="dc-list dc-list--is-scrollable">
<li class="dc-list__item">
<div class="dc-list__inner">
<img class="dc-list__img" src="/dress-code/assets/img/scrollable-list-img-1.png" alt="product image">
<div class="dc-list__body dc--island-50">
<div class="dc-list__title dc--text-truncate">TECH FLEECE 6 - Trainings- / Fitnesshose - gray</div>
<div class="dc--text-less-important dc--text-small dc--text-truncate">N1242B0F8-Q11</div>
<div class="dc--text-less-important dc--text-success dc--text-small dc--text-truncate">Available</div>
</div>
<a href class="dc-list__action dc-link">
<i class="dc-icon dc-icon--trash"></i>
</a>
</div>
</li>
<li class="dc-list__item">
<div class="dc-list__inner">
<img class="dc-list__img" src="/dress-code/assets/img/scrollable-list-img-2.png" alt="product image">
<div class="dc-list__body dc--island-50">
<div class="dc-list__title dc--text-truncate">FLEX TRAINER 6 - Trainings- / Fitnessschuh - black/white</div>
<div class="dc--text-less-important dc--text-small dc--text-truncate">N7894A0F8-Q11</div>
<div class="dc--text-less-important dc--text-small dc--text-truncate">Not in shop</div>
</div>
<a href class="dc-list__action dc-link">
<i class="dc-icon dc-icon--trash"></i>
</a>
</div>
</li>
<li class="dc-list__item">
<div class="dc-list__inner">
<img class="dc-list__img" src="/dress-code/assets/img/scrollable-list-img-3.png" alt="product image">
<div class="dc-list__body dc--island-50">
<div class="dc-list__title dc--text-truncate">FLEX TRAINER 5 - Trainings- / Fitnessschuh - blue</div>
<div class="dc--text-less-important dc--text-small dc--text-truncate">N1523C0F8-Q11</div>
<div class="dc--text-less-important dc--text-error dc--text-small dc--text-truncate">Out of stock</div>
</div>
<a href class="dc-list__action dc-link">
<i class="dc-icon dc-icon--trash"></i>
</a>
</div>
</li>
<li class="dc-list__item">
<div class="dc-list__inner">
<svg class="dc-list__img" width="44" height="64" viewBox="0 0 44 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path fill="#EDECED" d="M0 0h44v64H0z"/>
<path d="M22 35.057c-1.052 1.01-2.063 1.936-3.035 2.778-1.435 1.244-2.905 2.474-4.408 3.69L12.5 39.467c1.2-1.52 2.425-3 3.68-4.447.844-.973 1.765-1.98 2.763-3.02-1.01-1.052-1.936-2.063-2.778-3.035-1.244-1.435-2.474-2.905-3.69-4.408l2.058-2.058c1.52 1.2 3 2.425 4.447 3.68.973.844 1.98 1.765 3.02 2.763 1.052-1.01 2.063-1.936 3.035-2.778 1.435-1.244 2.905-2.474 4.408-3.69l2.058 2.058c-1.2 1.52-2.425 3-3.68 4.447-.844.973-1.765 1.98-2.763 3.02 1.01 1.052 1.936 2.063 2.778 3.035 1.244 1.435 2.474 2.905 3.69 4.408L29.467 41.5c-1.52-1.2-3-2.425-4.447-3.68-.973-.844-1.98-1.765-3.02-2.763zm0-3.042L21.985 32l.015-.015.015.015-.015.015z" fill="#FFF"/>
</g>
</svg>
<div class="dc-list__body dc--island-50">
<div class="dc-list__title dc--text-truncate">N4956A0F8-Q11</div>
<div class="dc--text-less-important dc--text-small dc--text-truncate"></div>
<div class="dc--text-less-important dc--text-error dc--text-small dc--text-truncate">Unknown article</div>
</div>
<a href class="dc-list__action dc-link">
<i class="dc-icon dc-icon--trash"></i>
</a>
</div>
</li>
</ul>
<div class="dc-loading-bar">
<div class="dc-loading-bar__bar"></div>
<div class="dc-loading-bar__fill"></div>
</div>
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
<p class="dc-p">
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
</p>
<input type="radio" class="dc-radio" id="r1" name="rg1" checked>
<label for="r1" class="dc-label">Either this</label>
<input type="radio" class="dc-radio" id="r2" name="rg1">
<label for="r2" class="dc-label">Or that</label>
<input type="radio" class="dc-radio" id="r3" name="rg2" checked disabled>
<label for="r3" class="dc-label">Disabled</label>
<select class="dc-select" name="" id="">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Option 5</option>
</select>
<div class="dc-spinner"></div>
<div class="dc-spinner dc-spinner--error"></div>
<div class="dc-spinner dc-spinner--fat"></div>
<div class="dc-spinner dc-spinner--thin dc-spinner--error"></div>
<div class="dc-spinner dc-spinner--small"></div>
<div class="dc-spinner dc-spinner--small dc-spinner--fat dc-spinner--error"></div>
<span class="dc-status dc-status--active">Active, On</span><br>
<span class="dc-status dc-status--inactive">Inactive, Off</span><br>
<span class="dc-status dc-status--new">New, Recent</span><br>
<span class="dc-status dc-status--error">Error, Issue</span>
Use dc-table__tr--interactive
modifier if the row is "clickable".
Use the dc-table__tr--tight
, dc-table__tr--comfortable
and dc-table__tr--spacious
modifiers to adjust spacing between rows.
First Name | Last Name | Status | |
---|---|---|---|
Eileen | Holland | eileen.holland42@example.com | Active |
Duane | Holmes | duane.holmes21@example.com | Active |
Kitty | Murray | kitty.murray88@example.com | New |
Austin | Carpenter | austin.carpenter87@example.com | New |
Toni | Nichols | toni.nichols83@example.com | Error |
First Name | Last Name | Status | |
---|---|---|---|
Eileen | Holland | eileen.holland42@example.com | Active |
Duane | Holmes | duane.holmes21@example.com | Active |
Kitty | Murray | kitty.murray88@example.com | New |
Austin | Carpenter | austin.carpenter87@example.com | New |
Toni | Nichols | toni.nichols83@example.com | Active |
First Name | Last Name | Status | |
---|---|---|---|
Eileen | Holland | eileen.holland42@example.com | Active |
Duane | Holmes | duane.holmes21@example.com | Active |
Kitty | Murray | kitty.murray88@example.com | New |
Austin | Carpenter | austin.carpenter87@example.com | New |
Toni | Nichols | toni.nichols83@example.com | Active |
First Name | Last Name | Status | |
---|---|---|---|
Eileen | Holland | eileen.holland42@example.com | Active |
Duane | Holmes | duane.holmes21@example.com | Active |
Kitty | Murray | kitty.murray88@example.com | New |
Austin | Carpenter | austin.carpenter87@example.com | New |
Toni | Nichols | toni.nichols83@example.com | Error |
<table class="dc-table">
<thead class="dc-table__thead">
<tr class="dc-table__tr">
<th class="dc-table__th" data-col="First Name">First Name</th>
<th class="dc-table__th" data-col="Name">Last Name</th>
<th class="dc-table__th" data-col="Name">Email</th>
<th class="dc-table__th" data-col="Name">Status</th>
</tr>
</thead>
<tbody class="dc-table__tbody">
<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--error">Error</span></td>
</tr>
</tbody>
</table>
<table class="dc-table">
<thead class="dc-table__thead">
<tr class="dc-table__tr">
<th class="dc-table__th" data-col="First Name">First Name</th>
<th class="dc-table__th" data-col="Name">Last Name</th>
<th class="dc-table__th" data-col="Name">Email</th>
<th class="dc-table__th" data-col="Name">Status</th>
</tr>
</thead>
<tbody class="dc-table__tbody">
<tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--tight dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
</tbody>
</table>
<table class="dc-table">
<thead class="dc-table__thead">
<tr class="dc-table__tr">
<th class="dc-table__th">First Name</th>
<th class="dc-table__th">Last Name</th>
<th class="dc-table__th">Email</th>
<th class="dc-table__th">Status</th>
</tr>
</thead>
<tbody class="dc-table__tbody">
<tr class="dc-table__tr dc-table__tr--comfortable">
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--comfortable">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--comfortable">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--comfortable">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--comfortable">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
</tbody>
</table>
<table class="dc-table">
<thead class="dc-table__thead">
<tr class="dc-table__tr">
<th class="dc-table__th">First Name</th>
<th class="dc-table__th">Last Name</th>
<th class="dc-table__th">Email</th>
<th class="dc-table__th">Status</th>
</tr>
</thead>
<tbody class="dc-table__tbody">
<tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Eileen</td>
<td class="dc-table__td" data-col="Last Name">Holland</td>
<td class="dc-table__td" data-col="Email">eileen.holland42@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Duane</td>
<td class="dc-table__td" data-col="Last Name">Holmes</td>
<td class="dc-table__td" data-col="Email">duane.holmes21@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--active">Active</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Kitty</td>
<td class="dc-table__td" data-col="Last Name">Murray</td>
<td class="dc-table__td" data-col="Email">kitty.murray88@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Austin</td>
<td class="dc-table__td" data-col="Last Name">Carpenter</td>
<td class="dc-table__td" data-col="Email">austin.carpenter87@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--new">New</span></td>
</tr>
<tr class="dc-table__tr dc-table__tr--spacious dc-table__tr--interactive">
<td class="dc-table__td" data-col="First Name">Toni</td>
<td class="dc-table__td" data-col="Last Name">Nichols</td>
<td class="dc-table__td" data-col="Email">toni.nichols83@example.com</td>
<td class="dc-table__td" data-col="Status"><span class="dc-status dc-status--error">Error</span></td>
</tr>
</tbody>
</table>
<label class="dc-label" for="optionalInput">Text Input</label>
<input class="dc-input" type="text" id="optionalInput" placeholder="e. g. give an example" />
<label class="dc-label" for="numberInput">Number input</label>
<input class="dc-input" type="number" id="numberInput" placeholder="e. g. 100" />
<label class="dc-label dc-label--required" for="requiredInput">Required Input</label>
<input class="dc-input" type="text" id="requiredInput" placeholder="e. g. give an example" />
<label class="dc-label dc-label--required dc-label--is-error" for="errorInput">Required Input – Error</label>
<input class="dc-input dc-input--is-error" type="text" id="errorInput" placeholder="e. g. give an example" />
<span class="dc--text-error">Please don't leave this empty.</span>
<label class="dc-label dc-label--disabled" for="disabledInput">Disabled input</label>
<input class="dc-input dc-input--disabled" type="text" id="disabledInput" placeholder="e. g. give an example" disabled/>
<label class="dc-label" for="textArea">Text area</label>
<textarea class="dc-textarea" name="textArea" id="" cols="30" rows="5"></textarea>