Breakpoints
Github

Atoms

Buttons

Button

Triggers an action and must not be used for navigation.

Anchor
<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">

Sizes

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>

Options

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>

Button Block

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>

Card

I am a basic card atom

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>

Checkboxes

Checkbox

<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>

Checkbox Switch

<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>

Divider

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>

Icons

All Icons are included in one icon font for easy usage. Icons can be made hoverable by using of the dc-icon--interactive class.

add arrow-left arrow-right check cog close eye history info lock more undo redo drag menu help user play search trash msg-error msg-info msg-neutral msg-success msg-warning
<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"><span>info</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--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--msg-error dc-icon--interactive"><span>msg-error</span></i>
	<i class="dc-icon dc-icon--msg-info dc-icon--interactive"><span>msg-info</span></i>
	<i class="dc-icon dc-icon--msg-neutral dc-icon--interactive"><span>msg-neutral</span></i>
	<i class="dc-icon dc-icon--msg-success dc-icon--interactive"><span>msg-success</span></i>
	<i class="dc-icon dc-icon--msg-warning dc-icon--interactive"><span>msg-warning</span></i>
</div>

Lists

List

  • First list element
  • Second list element
  • Third list element
<ul class="dc-list">
	<li>First list element</li>
	<li>Second list element</li>
	<li>Third list element</li>
</ul>

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<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>

Ordered

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<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>

Scrollable

  • First list element
  • Second list element
  • Third list element
  • Fourth list element
  • Fifth list element
  • Sixth list element
  • Seventh list element
  • Eighth list element
  • Ninth list element
  • Tenth list element
  • Eleventh list element
  • Twelfth list element
  • First list element
  • Second list element
  • Third list element
  • product image
    TECH FLEECE 6 - Trainings- / Fitnesshose - gray
    N1242B0F8-Q11
    Available
  • product image
    FLEX TRAINER 6 - Trainings- / Fitnessschuh - black/white
    N7894A0F8-Q11
    Not in shop
  • product image
    FLEX TRAINER 5 - Trainings- / Fitnessschuh - blue
    N1523C0F8-Q11
    Out of stock
  • N4956A0F8-Q11
    Unknown article
<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-truncate">TECH FLEECE 6 - Trainings- / Fitnesshose - gray</div>
				<div class="dc-text--less-important dc-text--small dc-truncate">N1242B0F8-Q11</div>
				<div class="dc-text--less-important dc-text--success dc-text--small dc-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-truncate">FLEX TRAINER 6 - Trainings- / Fitnessschuh - black/white</div>
				<div class="dc-text--less-important dc-text--small dc-truncate">N7894A0F8-Q11</div>
				<div class="dc-text--less-important dc-text--small dc-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-truncate">FLEX TRAINER 5 - Trainings- / Fitnessschuh - blue</div>
				<div class="dc-text--less-important dc-text--small dc-truncate">N1523C0F8-Q11</div>
				<div class="dc-text--less-important dc-text--error dc-text--small dc-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-truncate">N4956A0F8-Q11</div>
				<div class="dc-text--less-important dc-text--small dc-truncate"></div>
				<div class="dc-text--less-important dc-text--error dc-text--small dc-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>

Loading Bar

<div class="dc-loading-bar">
	<div class="dc-loading-bar__bar"></div>
	<div class="dc-loading-bar__fill"></div>
</div>

Paragraph

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>

Radio Button

<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

<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>

Spinner

<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>

Status

Active, On
Inactive, Off
New, Recent
Error, Issue
<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>

Table

Use dc-table to style tables. Use the varians dc-table--tight, dc-table--comfortable and dc-table--spacious for additional padding options.

First Name Last Name Email 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 Email 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 Email 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 Email 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
<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" 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" 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--active">Active</span></td>
		</tr>
	</tbody>
</table>

<table class="dc-table dc-table--tight">
	<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" 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" 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--active">Active</span></td>
		</tr>
	</tbody>
</table>


<table class="dc-table dc-table--comfortable">
	<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">
			<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" 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" 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--active">Active</span></td>
		</tr>
	</tbody>
</table>


<table class="dc-table dc-table--spacious">
	<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">
			<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" 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" 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--active">Active</span></td>
		</tr>
	</tbody>
</table>

Text Input

Please don't leave this empty.
<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/>

Textarea

<label class="dc-label" for="textArea">Text area</label>
<textarea class="dc-textarea" name="textArea" id="" cols="30" rows="5"></textarea>