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.

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.

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

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 with the class .dc-input--in-input-group, addons with the class .dc-input-addon and buttons with the class dc-btn--grouped.

http://
User 1 Add
<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">&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 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>

Search Form

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

Tooltip

Has Tooltip

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>

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>

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

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.

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.

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

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

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>