Breakpoints
Github

Molecules

Button Icon

Button Icon

Use icon buttons with caution. Their meanings are sometimes difficult to understand.

For buttons with icon and text, use the modifiers dc-icon--btn--left and dc-icon--btn--right to set the position of the icon.


<button class="dc-btn">
    <i class="dc-icon dc-icon--history dc-icon--btn"></i>
</button>
<button class="dc-btn dc-btn--primary">
    <i class="dc-icon dc-icon--pencil dc-icon--btn"></i>
</button>
<button class="dc-btn">
    <a>Undo</a><i class="dc-icon dc-icon--undo dc-icon--btn dc-icon--btn--left"></i>
</button>
<button class="dc-btn dc-btn--destroy">
    <i class="dc-icon dc-icon--trash dc-icon--btn"></i>
</button>



<button class="dc-btn dc-btn--disabled">
    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn--right"></i>
</button>


<br>

<button class="dc-btn dc-btn--small">
    <span>Redo</span> <i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn-small dc-icon--btn--left"></i>
</button>

<button class="dc-btn dc-btn--destroy dc-btn--large">
    <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
</button>

Button Groups

Actions that logically belong together might be grouped by wrapping them in a container with .dc-btn-group.

Wrap several groups in a .dc-btn-group-row to keep them in one line.

Please do not use the button group as tabs.

Primary
<div class="dc-btn-group">
	<button class="dc-btn dc-btn--large">1</button>
	<button class="dc-btn dc-btn--large">
    <i class="dc-icon dc-icon--check dc-icon--btn dc-icon--btn-large"></i>
  </button>
	<button class="dc-btn dc-btn--large">2</button>
	<button class="dc-btn dc-btn--large dc-btn--destroy">
    <i class="dc-icon dc-icon--trash dc-icon--btn dc-icon--btn-large"></i>
  </button>
</div>

<div class="dc-btn-group-row">
	<div class="dc-btn-group">
		<a href class="dc-btn dc-btn--primary">Primary</a>
		<button class="dc-btn">Two</button>
	</div>
	<div class="dc-btn-group">
		<button class="dc-btn">Three</button>
		<button class="dc-btn dc-btn--destroy">
      <i class="dc-icon dc-icon--trash dc-icon--btn"></i>
    </button>
	</div>
</div>

Dropdown

Wrap buttons and a list with dc-btn-dropdown to make dropdown that come from buttons.

<div class="dc-btn-dropdown">
	<button class="dc-btn dc-btn--primary" id="dropdown-example">
        Dropdown
        <span class="dc-btn-dropdown__arrow dc-btn-dropdown__arrow--down"></span>
    </button>
	<ul class="dc-btn-dropdown__list dc-btn-dropdown__list--down" id="dropdown-example-list">
		<li class="dc-btn-dropdown__item">The first option</li>
		<li class="dc-btn-dropdown__item">The second option</li>
		<li class="dc-btn-dropdown__item dc-btn-dropdown__item--disabled">Disabled option</li>
	</ul>
</div>

<div class="dc-btn-dropdown">
	<button class="dc-btn dc-btn--primary" id="dropup-example">
      Dropup
      <span class="dc-btn-dropdown__arrow dc-btn-dropdown__arrow--up"></span>
    </button>
	<ul class="dc-btn-dropdown__list dc-btn-dropdown__list--up" id="dropup-example-list">
		<li class="dc-btn-dropdown__item">
			<a href="#" class="dc-link">The first option</a>
		</li>
		<li class="dc-btn-dropdown__item">
			<a href="#" class="dc-link">The second option</a>
		</li>
		<li class="dc-btn-dropdown__item dc-btn-dropdown__item--disabled">
			<a href="#" class="dc-link">Disabled option</a>
		</li>
		<li class="dc-btn-dropdown__divider"></li>
		<li class="dc-btn-dropdown__item">
			<a href="#" class="dc-link">Separated option</a>
		</li>
	</ul>
</div>

Input Groups

Create input groups by using .dc-input-group to wrap inputs, addons with the class .dc-input-addon and button.

http://
User 1
Add

BEM way (controversial)

<label class="dc-label" for="priceInput">Addon - Appended</label>
<div class="dc-input-group">
	<input class="dc-input dc-input--text-right" type="text" id="priceInput" placeholder="e. g. 100" />
	<div class="dc-input-addon">&euro;</div>
</div>

<label class="dc-label" for="urlInput1">Addon - Prepended</label>
<div class="dc-input-group">
	<span class="dc-input-addon">http://</span>
	<input class="dc-input" type="text" id="urlInput1" placeholder="e. g. brands.zalando.com" />
</div>

<label class="dc-label" for="urlInput2">Button - Appended</label>
<div class="dc-input-group">
	<input class="dc-input" type="text" id="urlInput2" placeholder="e. g. brands.zalando.com" />
	<button class="dc-btn dc-btn--primary"><i class="dc-icon dc-icon--search dc-icon--btn"></i></button>
</div>

<label class="dc-label" for="userInput">Addon - Prepended & Button - Appended</label>
<div class="dc-input-group">
	<div class="dc-input-addon">User 1</div>
	<input class="dc-input" type="text" id="userInput" placeholder="Full name" />
	<a class="dc-btn dc-btn--primary">Add</a>
</div>

<h4>BEM way (controversial)</h4>

<!-- BEM way -->
<label class="dc-label" for="urlInput3">Button - Appended</label>
<div class="dc-input-group">
	<input class="dc-input-group__input dc-input" type="text" id="urlInput3" placeholder="e. g. brands.zalando.com" />
	<button class="dc-input-group__btn dc-btn dc-btn--primary">
        <i class="dc-icon dc-icon--search dc-icon--btn"></i>
    </button>
</div>

Search Form

These are notes associated with this search-form component.

<label for="searchOnlyText" class="dc-label">Search box showing text results</label>

<div class="dc-search-form">
	<input class="dc-input dc-search-form__input" id="searchOnlyText" type="search" placeholder="Search...">
	<button class="dc-btn dc-search-form__btn">
      <i class="dc-icon dc-icon--search dc-icon--interactive"></i>
  </button>
	<ul class="dc-list dc-suggest">
		<li class="dc-suggest__item dc-link">
			Esprit
		</li>
		<li class="dc-suggest__item dc-link">
			Hugo Boss
		</li>
		<li class="dc-suggest__item dc-link">
			Michael Kors
		</li>
		<li class="dc-suggest__item dc-link">
			adidas
		</li>
		<li class="dc-suggest__item dc-link">
			Tommy Hilfiger
		</li>
		<li class="dc-suggest__item dc-link">
			Diesel
		</li>
		<li class="dc-suggest__item dc-link">
			Armani Jeans
		</li>
	</ul>
</div>

<label for="searchWithImages" class="dc-label">Search box showing results with images</label>

<div class="dc-search-form">
	<input class="dc-input dc-search-form__input" id="searchWithImages" type="search" placeholder="Search...">
	<button class="dc-btn dc-search-form__btn">
        <i class="dc-icon dc-icon--search dc-icon--interactive"></i>
    </button>
	<ul class="dc-list dc-suggest">
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">Esprit</span>
		</li>
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">Hugo Boss</span>
		</li>
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">Michael Kors</span>
		</li>
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">adidas</span>
		</li>
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">Tommy Hilfiger</span>
		</li>
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">Diesel</span>
		</li>
		<li class="dc-suggest__item dc-link">
			<div class="dc-suggest__item__img">
				<img src="assets/img/logo.svg">
			</div>
			<span class="dc-suggest__item__label">Armani Jeans</span>
		</li>
	</ul>
</div>

Tooltip

Hi. I'm a tooltip.


HAS TOOLTIP

<div class="dc-tooltip">
	Hi. I'm a tooltip.
	<div class="dc-tooltip__triangle dc-tooltip__triangle--lb"></div>
</div>

<br><br>
<h4 class="dc-h4">HAS TOOLTIP</h4>
<button class="dc-btn dc-has-tooltip" data-dc-has-tooltip="Hi. I'm a tooltip.">Has tooltip</button>

Dialog

This is a dialog

Subtitle or step

This is the content area. Content goes here. Actions (buttons, most of the times) should go in the bottom part.

Action
<div class="dc-dialog">
	<div class="dc-dialog__overlay"> </div>
	<div class="dc-dialog__content">
		<div class="dc-dialog__body">
			<div class="dc-dialog__close"><i class="dc-icon dc-icon--close dc-icon--interactive"></i></div>
			<h3 class="dc-dialog__title">This is a dialog</h3>
			<h4 class="dc-dialog__subtitle">Subtitle or step</h4>
			<p>This is the content area. Content goes here. Actions (buttons, most of the times) should go in the bottom part.</p>
		</div>
		<div class="dc-dialog__actions">
			<a href="#" class="dc-link">Action</a>
			<button class="dc-btn dc-btn--primary dc-dialog__primary">Action</button>
		</div>
	</div>
</div>

Toast

Toasts are used to give feedback about user action, but they are simpler than messages in that they have less information and no interaction.

A toast's default position is fixed to the top of the screen. Default is top. Use .dc-toast-container--bottom to make it appear from the bottom.

Success toast. Be quick, this message will disappear!
Error toast. Be quick, this message will disappear!
Warning toast. Be quick, this message will disappear!
<div class="dc-toast-container">
	<div class="dc-toast">
		<div class="dc-toast__content dc-toast__content--info">
			Info toast. Be quick, this message will disappear!
		</div>
	</div>

	<div class="dc-toast">
		<div class="dc-toast__content dc-toast__content--success">
			Success toast. Be quick, this message will disappear!
		</div>
	</div>

	<div class="dc-toast">
		<div class="dc-toast__content dc-toast__content--warning">
			Error toast. Be quick, this message will disappear!
		</div>
	</div>

	<div class="dc-toast">
		<div class="dc-toast__content dc-toast__content--error">
			Warning toast. Be quick, this message will disappear!
		</div>
	</div>
</div>

Messages

Use messages for giving feedback to the user about the system or an action that was performed. Message have to be dismissed by the user.

Info message

Give some more information about what happened. Also, here's a link. Boo!

Success message

Give some more information about what happened. Also, here's a link. Boo!

Warning message

Give some more information about what happened. Also, here's a link. Boo!

Error message

Give some more information about what happened. Also, here's a link. Boo!

<div class="dc-msg dc-msg--info">
	<div class="dc-msg__inner">

		<div class="dc-msg__icon">
			<i class="dc-icon dc-icon--msg-info"></i>
		</div>

		<div class="dc-msg__bd">

			<h1 class="dc-msg__title">Info message</h1>

			<p class="dc-msg__text">
				Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
			</p>

		</div>

		<div class="dc-msg__close">
			<i class="dc-icon dc-icon--close"></i>
		</div>
	</div>
</div>

<div class="dc-msg dc-msg--success">
	<div class="dc-msg__inner">

		<div class="dc-msg__icon">
			<i class="dc-icon dc-icon--msg-success"></i>
		</div>

		<div class="dc-msg__bd">

			<h1 class="dc-msg__title">Success message</h1>

			<p class="dc-msg__text">
				Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
			</p>

		</div>

		<div class="dc-msg__close">
			<i class="dc-icon dc-icon--close"></i>
		</div>
	</div>
</div>

<div class="dc-msg dc-msg--warning">
	<div class="dc-msg__inner">

		<div class="dc-msg__icon">
			<i class="dc-icon dc-icon--msg-warning"></i>
		</div>

		<div class="dc-msg__bd">

			<h1 class="dc-msg__title">Warning message</h1>

			<p class="dc-msg__text">
				Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
			</p>

		</div>

		<div class="dc-msg__close">
			<i class="dc-icon dc-icon--close"></i>
		</div>
	</div>
</div>


<div class="dc-msg dc-msg--error">
	<div class="dc-msg__inner">

		<div class="dc-msg__icon">
			<i class="dc-icon dc-icon--msg-error"></i>
		</div>

		<div class="dc-msg__bd">

			<h1 class="dc-msg__title">Error message</h1>

			<p class="dc-msg__text">
				Give some more information about what happened. <a href class="dc-link" title="tooltip">Also, here's a link. Boo!</a>
			</p>

		</div>

		<div class="dc-msg__close">
			<i class="dc-icon dc-icon--close"></i>
		</div>
	</div>
</div>

Breadcrumb

<ul class="dc-breadcrumb">
	<li class="dc-breadcrumb__item"><a href="#" class="dc-link">Previous</a></li>
	<li class="dc-breadcrumb__item"><a href="#" class="dc-link">Previous</a></li>
	<li class="dc-breadcrumb__item"><a href="#" class="dc-link">Previous</a></li>
	<li class="dc-breadcrumb__item">Current</li>
</ul>