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 class="dc-btn dc-btn--link dc-btn--link-destroy dc-btn--large">
<span>Back to previous</span> <i class="dc-icon dc-icon--arrow-left dc-icon--btn dc-icon--btn-large dc-icon--btn--left"></i>
</button>
<button class="dc-btn dc-btn--link dc-btn--large">
<span>Go To next</span> <i class="dc-icon dc-icon--arrow-right dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
</button>
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.
<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>
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>
Create input groups by using .dc-input-group
to wrap inputs, addons with the class .dc-input-addon
and button
.
<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">€</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>
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>
<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>
This is the content area. Content goes here. Actions (buttons, most of the times) should go in the bottom part.
<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>
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.
<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>
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.
<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>
<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>