Breakpoints
Github

Atoms

Buttons

Button

Buttons should usually trigger an action on page and should not be used for navigation. Use labels that are explicit. Starting with an imperative verb is often a good choice.

Save File 
<a class="dc-btn" href="#" role="button">Save File</a>
<button class="dc-btn" type="submit">Edit Account</button>
<input class="dc-btn" type="button" value="Create User">
<input class="dc-btn" type="submit" value="Download">

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, with different meanings.

dc-btn--primary The primary action of the page it is placed on. Place only one primary button on each page/dialog.

dc-btn--destroy A destructive action which can't be undone and might involve loss of data.

dc-btn--active Active or toggled. Buttons using this modifier should not be clickable.

dc-btn--disabled Action is disabled. Buttons using this modifier should not be clickable.

dc-btn--link Looks like a link but aligns and behaves like buttons. For secondary or tertiary actions.

dc-btn--no-focus Does not keep focus on the button when clicked.



<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--active">Active Button</button>
<button class="dc-btn dc-btn--disabled" disabled>Disabled Button</button>
<button class="dc-btn dc-btn--no-focus">Button without focus</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" disabled>Button Link - Disabled</button>
<button class="dc-btn dc-btn--link dc-btn--no-focus">Button Link - without focus</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:100%; background-color: #efefef; padding: 10px;">
	<button class="dc-btn dc-btn--block">Block Button</button>
</div>

Card

Cards are the basic building blocks of a page. Usually all content should be inside one or more card. For example, in this demo, every section or element is inside a card. We don't recommend nesting cards, such as in this example, but it's technically possible.

<div class="dc-card">
	<p>Cards are the basic building blocks of a page. Usually all content should be inside one or more card. For example, in this demo, every section or element is inside a card. We don't recommend nesting cards, such as in this example, but it's technically
		possible.</p>
</div>

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.

Secondary divider

If you want to have a secondary divider use dc-divider dc-divider--secondary

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

<h3 class="dc-h3">Secondary divider</h3>
<p class="dc-p">If you want to have a secondary divider use <code>dc-divider dc-divider--secondary</code></p>

<hr class="dc-divider dc-divider--secondary">

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

Forms

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>

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

dc-select styles select form elements. Error states use dc-select--error. Use dc-select--small for a smaller version that has the same height as radios and checkboxes.

<select class="dc-select" name="" id="">
	<option value="">Enabled</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</option>
</select>

<select class="dc-select" disabled name="" id="">
	<option value="">Disabled</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</option>
</select>

<select class="dc-select dc-select--is-error" name="" id="">
	<option value="">Enabled</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</option>
</select>

<select class="dc-select dc-select--small" name="" id="">
	<option value="">Enabled</option>
	<option value="">Option 2</option>
	<option value="">Option 3</option>
	<option value="">Option 4</option>
	<option value="">Option 5</option>
</select>

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
    <span class="dc-label__sub">optional</span>
</label>
<input class="dc-input" type="number" id="numberInput" placeholder="e. g. 100" />

<label class="dc-label" for="requiredInput">
    Required input
    <span class="dc-label__sub">required</span>
</label>
<input class="dc-input" type="text" id="requiredInput" placeholder="e. g. give an example" />

<label class="dc-label" for="errorInput">
    Required input – Error
    <span class="dc-label__sub dc-label__sub--is-error">required</span>
</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="smallInput">Small input</label>
<input class="dc-input dc-input--small" type="text" id="smallInput" placeholder="e. g. give an example" />

Textarea

Please don't leave this empty. 
<label class="dc-label" for="textArea">Text area</label>
<textarea class="dc-textarea" name="textArea" id="" cols="30" rows="5"></textarea>

<label class="dc-label" for="errorTextArea">
    Required text area – Error
    <span class="dc-label__sub dc-label__sub--is-error">required</span>
</label>
<span class="dc--text-error">Please don't leave this empty.</span>
<textarea class="dc-textarea dc-textarea--is-error" name="errorTextArea" id="" cols="30" rows="3"></textarea>

Icons

Icons

All Icons are included in one icon font for easy usage. Apply classes dc-icon and dc-icon--[icon-name] to use. Adjust the font size to make icons bigger or smaller.

add
arrow-down
arrow-left
arrow-right
arrow-up
bar-chart
check
clear
close
cog
contact
drag
error
eye
help
history
info
info-circle
line-chart
link
lock
menu
minus
more
open-circle
pencil
play
pointer
redo
search
spinner
success
trash
triangle-down
triangle-up
undo
user
users
warning 
<div class="dc-row dc-block-grid--small-3 dc-block-grid--medium-4 dc-block-grid--large-6">
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--add"></i><span>add</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--arrow-down"></i><span>arrow-down</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--arrow-left"></i><span>arrow-left</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--arrow-right"></i><span>arrow-right</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--arrow-up"></i><span>arrow-up</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--bar-chart"></i><span>bar-chart</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--check"></i><span>check</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--clear"></i><span>clear</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--close"></i><span>close</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--cog"></i><span>cog</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--contact"></i><span>contact</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--drag"></i><span>drag</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--error"></i><span>error</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--eye"></i><span>eye</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--help"></i><span>help</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--history"></i><span>history</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--info"></i><span>info</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--info-circle"></i><span>info-circle</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--line-chart"></i><span>line-chart</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--link"></i><span>link</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--lock"></i><span>lock</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--menu"></i><span>menu</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--minus"></i><span>minus</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--more"></i><span>more</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--open-circle"></i><span>open-circle</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--pencil"></i><span>pencil</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--play"></i><span>play</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--pointer"></i><span>pointer</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--redo"></i><span>redo</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--search"></i><span>search</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--spinner"></i><span>spinner</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--success"></i><span>success</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--trash"></i><span>trash</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--triangle-down"></i><span>triangle-down</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--triangle-up"></i><span>triangle-up</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--undo"></i><span>undo</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--user"></i><span>user</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--users"></i><span>users</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--warning"></i><span>warning</span>
	</div>
</div>

Interactive Icons

Any of the icons can be made interactive (hovarable) by adding dc-icon--interactive modifier class to any icon.

add
link
pencil
trash
user 
<div class="dc-row dc-block-grid--small-3 dc-block-grid--medium-4 dc-block-grid--large-6">
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--add dc-icon--interactive"></i><span>add</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--link dc-icon--interactive"></i><span>link</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--pencil dc-icon--interactive"></i><span>pencil</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--trash dc-icon--interactive"></i><span>trash</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--user dc-icon--interactive"></i><span>user</span>
	</div>
</div>

Spinning Icons

You can add dc-icon--spin modifier class to any icon to spin (rotate) it in position.

add
cog
open-circle
spinner 
<div class="dc-row dc-block-grid--small-3 dc-block-grid--medium-4 dc-block-grid--large-6">
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--add dc-icon--spin"></i><span>add</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--cog dc-icon--spin"></i><span>cog</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--open-circle dc-icon--spin"></i><span>open-circle</span>
	</div>
	<div class="sg-icon dc-column">
		<i class="dc-icon dc-icon--spinner dc-icon--spin"></i><span>spinner</span>
	</div>
</div>

Changing The Font Location

Dress-code assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of two ways:

  • Change the $dc-font-path variable in the source SASS files.
  • Change the url() path in the compiled CSS.

Use whatever option best suits your specific development setup.

Svg Icons

Together with the icon font, Dress Code distribute also the corresponding svg files. Those svg files are used in some components.

Dress-code assumes that the svg files will be located in the ../img/svg-icons/ directory, relative to the compiled CSS files.

Moving or renaming the image folder means updating the CSS in one of two ways:

  • Change the $dc-image-path variable in the source SASS files.
  • Change the url() path in the compiled CSS.

Use whatever option best suits your specific development setup.

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

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>

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>

Tab

Use dc-tab to show content for different subjects.

dc-tab--vertical: Use this class with dc-tab to create vertical tab.

dc-tab__element: Use this class to create another tab.

dc-tab__element--header: to show a tab as header.

dc-tab__element--active: to show a tab as active.

dc-tab__element--disabled: to show a tab as disabled.

  • Header
  • Tab1
  • Tab2
  • Tab3
  • Tab4
  • Header
  • Tab1
  • Tab2
  • Tab3
  • Tab4
<ul class="dc-tab">
	<li class="dc-tab__element dc-tab__element--header">Header</li>
	<li class="dc-tab__element dc-tab__element--active">Tab1</li>
	<li class="dc-tab__element">Tab2</li>
	<li class="dc-tab__element dc-tab__element--disabled">Tab3</li>
	<li class="dc-tab__element">Tab4</li>
</ul>

<div class="dc-divider"></div>

<ul class="dc-tab dc-tab--vertical">
	<li class="dc-tab__element dc-tab__element--header">Header</li>
	<li class="dc-tab__element dc-tab__element--active">Tab1</li>
	<li class="dc-tab__element">Tab2</li>
	<li class="dc-tab__element dc-tab__element--disabled">Tab3</li>
	<li class="dc-tab__element">Tab4</li>
</ul>

Tables

Table Setup

To set up tables, add the relevant classes to each part of the table.

Use dc-table--responsive to activate the responsive view for tablet size and below. Each row becomes a card.

Use dc-table__tr--interactive to add a hover to table rows. This can be done independenty for each row.

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 Error 
<table class="dc-table dc-table--responsive">
	<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--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--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--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--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--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>

Sortable Headings

To indicate columns as sortable, add dc-table__th--sortable to your th, and add an empty element with dc-table__sorter inside the th. Use dc-table__sorter--ascending and dc-table__sorter--descending to indicate the sorting order.

Please note that due to design reasons the sorters are not shown on responsive tables for small screen sizes.

First Name Last Name Email Status
Austin Carpenter austin.carpenter87@example.com New
Eileen Holland eileen.holland42@example.com Active
Duane Holmes duane.holmes21@example.com Active
Kitty Murray kitty.murray88@example.com New
Toni Nichols toni.nichols83@example.com Error 
<table class="dc-table dc-table--responsive">
	<thead class="dc-table__thead">
		<tr class="dc-table__tr">
			<th class="dc-table__th dc-table__th--sortable" data-col="First Name">First Name<span class="dc-table__sorter dc-table__sorter--ascending"></th>
			<th class="dc-table__th dc-table__th--sortable" data-col="Name">Last Name<span class="dc-table__sorter dc-table__sorter--descending"></th>
			<th class="dc-table__th dc-table__th--sortable" data-col="Name">Email<span class="dc-table__sorter"></th>
			<th class="dc-table__th dc-table__th--sortable" data-col="Name">Status<span class="dc-table__sorter"></th>
		</tr>
	</thead>

	<tbody class="dc-table__tbody">
        <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">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">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>

Spacing Modifiers

The modifiers dc-table__tr--tight, dc-table__tr--comfortable and dc-table__tr--spacious modifiers to adjust spacing between rows.

First Name Last Name Email Status
Eileen Holland eileen.holland42@example.com Active
Kitty Murray kitty.murray88@example.com New
Duane Holmes duane.holmes21@example.com Active
Austin Carpenter austin.carpenter87@example.com New 
<table class="dc-table dc-table--responsive">
	<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">
			<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">
			<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">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">
			<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>

	</tbody>
</table>

Tooltip

Adding A Tooltip

Apply the class dc--has-tooltip class and a positioning class (ex. dc--has-tooltip--left) to any element show a tooltip when hovering.

The attribute data--dc-has-tooltip must be present and not empty: the value will be used as the content for the tooltip body.

The tooltip implementation is based significantly on hint.css.

<div class="sg-has-tooltip-section">
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--bottom-right" data-dc-has-tooltip="Hi. I'm a tooltip">
            bottom-right
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--bottom" data-dc-has-tooltip="Hi. I'm a tooltip">
            bottom
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--bottom-left" data-dc-has-tooltip="Hi. I'm a tooltip">
            bottom-left
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--right" data-dc-has-tooltip="Hi. I'm a tooltip">
            right
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn">
            .
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--left" data-dc-has-tooltip="Hi. I'm a tooltip">
            left
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--top-right" data-dc-has-tooltip="Hi. I'm a tooltip">
            top-right
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--top" data-dc-has-tooltip="Hi. I'm a tooltip">
            top
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--top-left" data-dc-has-tooltip="Hi. I'm a tooltip">
            top-left
        </button>
	</div>
</div>

Sizing

You can use a sizing modifier to define the width of a tooltip.

Available sizing modifiers are dc--has-tooltip--large, dc--has-tooltip--medium and dc--has-tooltip--small.

<div class="sg-has-tooltip-section">
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--top dc--has-tooltip--large" data-dc-has-tooltip="Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque semper ultrices sollicitudin. In hac habitasse platea dictumst. Nullam posuere condimentum cursus.">
            large
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--top dc--has-tooltip--medium" data-dc-has-tooltip="Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque semper ultrices sollicitudin. In hac habitasse platea dictumst. Nullam posuere condimentum cursus.">
            medium
        </button>
	</div>
	<div class="sg-has-tooltip-section__box">
		<button class="dc-btn dc--has-tooltip dc--has-tooltip--top dc--has-tooltip--small" data-dc-has-tooltip="Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Pellentesque semper ultrices sollicitudin. In hac habitasse platea dictumst.">
            small
        </button>
	</div>
</div>