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
.
Each action button must have the modifier class .dc-btn--grouped
Wrap several groups in a .dc-btn-group-row
to keep them in one line. Each one must have the modifier class .dc-btn-group--in-row
Please do not use the button group as tabs.
<div class="dc-btn-group">
<button class="dc-btn dc-btn--in-btn-group dc-btn--large">1</button>
<button class="dc-btn dc-btn--in-btn-group 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--in-btn-group dc-btn--large">2</button>
<button class="dc-btn dc-btn--in-btn-group 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 dc-btn-group--in-row">
<a href class="dc-btn dc-btn--in-btn-group dc-btn--primary">Primary</a>
<button class="dc-btn dc-btn--in-btn-group">Two</button>
</div>
<div class="dc-btn-group dc-btn-group--in-row">
<button class="dc-btn dc-btn--in-btn-group">Three</button>
<button class="dc-btn dc-btn--in-btn-group 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 with the class .dc-input--in-input-group
, addons with the class .dc-input-addon
and buttons with the class dc-btn--grouped
.
<label class="dc-label" for="priceInput">Addon - Appended</label>
<div class="dc-input-group">
<input class="dc-input dc-input--in-input-group 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 dc-input--in-input-group" 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 dc-input--in-input-group" type="text" id="urlInput2" placeholder="e. g. brands.zalando.com" />
<button class="dc-btn dc-btn--in-input-group 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">
<span class="dc-input-addon">User 1</span>
<input class="dc-input dc-input--in-input-group" type="text" id="userInput" placeholder="Full name" />
<a class="dc-btn dc-btn--in-input-group dc-btn--primary">Add</a>
</div>
<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-frame">
<img class="dc-suggest__item__img" src="/dress-code/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-frame">
<img class="dc-suggest__item__img" src="/dress-code/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-frame">
<img class="dc-suggest__item__img" src="/dress-code/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-frame">
<img class="dc-suggest__item__img" src="/dress-code/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-frame">
<img class="dc-suggest__item__img" src="/dress-code/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-frame">
<img class="dc-suggest__item__img" src="/dress-code/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-frame">
<img class="dc-suggest__item__img" src="/dress-code/assets/img/logo.svg">
</div>
<span class="dc-suggest__item__label">Armani Jeans</span>
</li>
</ul>
</div>
Apply the base dc--has-tooltip
class and a positioning class (ex. dc--has-tooltip--left
) to show a nice tooltip when "hovering" the element.
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>
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>
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 dc-dialog__close__icon"></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 dc-dialog__actions__link">Action</a>
<button class="dc-btn dc-btn--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.
Toasts have no default position, you must choose between top or bottom using:
.dc-toast-container--top
plus .dc-toast--top
to make it appear from the top
.dc-toast-container--bottom
plus .dc-toast--bottom
to make it appear from the bottom
Note: the animation duration is not defined by the dress code and must be passed by you.
<div class="dc-toast-container dc-toast-container--top">
<div class="dc-toast dc-toast--top">
<div class="dc-toast__content dc-toast__content--info">
Info toast. Be quick, this message will disappear!
</div>
</div>
<div class="dc-toast dc-toast--top">
<div class="dc-toast__content dc-toast__content--success">
Success toast. Be quick, this message will disappear!
</div>
</div>
<div class="dc-toast dc-toast--top">
<div class="dc-toast__content dc-toast__content--warning">
Error toast. Be quick, this message will disappear!
</div>
</div>
<div class="dc-toast dc-toast--top">
<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-frame">
<i class="dc-icon dc-msg__icon dc-icon--info-large"></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 dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
</p>
</div>
<div class="dc-msg__close">
<i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
</div>
</div>
</div>
<div class="dc-msg dc-msg--success">
<div class="dc-msg__inner">
<div class="dc-msg__icon-frame">
<i class="dc-icon dc-msg__icon dc-icon--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 dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
</p>
</div>
<div class="dc-msg__close">
<i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
</div>
</div>
</div>
<div class="dc-msg dc-msg--warning">
<div class="dc-msg__inner">
<div class="dc-msg__icon-frame">
<i class="dc-icon dc-msg__icon dc-icon--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 dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
</p>
</div>
<div class="dc-msg__close">
<i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
</div>
</div>
</div>
<div class="dc-msg dc-msg--error">
<div class="dc-msg__inner">
<div class="dc-msg__icon-frame">
<i class="dc-icon dc-msg__icon dc-icon--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 dc-msg__bd__link" title="tooltip">Also, here's a link. Boo!</a>
</p>
</div>
<div class="dc-msg__close">
<i class="dc-icon dc-icon--close dc-msg__close__icon"></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>