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">
Undo<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">
Redo<i class="dc-icon dc-icon--redo dc-icon--btn dc-icon--btn--right"></i>
</button>
<br>
<button class="dc-btn dc-btn--small">
Redo <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">
Lock <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>Use "stacked inputs" when you need block form elements without breaking vertical rhythm and spacing.
<div class="dc-input-stack">
<label class="dc-label">Email</label>
<input type="email" class="dc-input dc-input--in-stack" placeholder="your@email.com" />
<div class="dc-input-stack__feedback">
We'll never share your email with anyone else.
</div>
</div>
<div class="dc-input-stack">
<label class="dc-label">Password</label>
<input type="password" class="dc-input dc-input--in-stack dc-input--is-error" />
<div class="dc-input-stack__feedback dc-input-stack__feedback--is-error">
Please, don't leave this empty.
</div>
</div>
<div class="dc-input-stack">
<label class="dc-label" for="priceInput">Investment</label>
<div class="dc-input-group dc-input-group--in-stack">
<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>
<div class="dc-input-stack__feedback">
How much money do you want to invest in bitcoins?
</div>
</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">
Suggestion 1
</li>
<li class="dc-suggest__item dc-link">
Suggestion 2
</li>
<li class="dc-suggest__item dc-link">
Suggestion 3
</li>
<li class="dc-suggest__item dc-link">
Suggestion 4
</li>
<li class="dc-suggest__item dc-link">
Suggestion 5
</li>
<li class="dc-suggest__item dc-link">
Suggestion 6
</li>
<li class="dc-suggest__item dc-link">
Suggestion 7
</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 id="searchwithImagesIcon" class="dc-icon dc-icon--search dc-icon--interactive"></i>
</button>
<ul class="dc-list dc-suggest">
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/100/100/">
</div>
<span class="dc-suggest__item__label">Suggestion 1</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/50/100/">
</div>
<span class="dc-suggest__item__label">Suggestion 2</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/100/50/">
</div>
<span class="dc-suggest__item__label">Suggestion 3</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/100/25/">
</div>
<span class="dc-suggest__item__label">Suggestion 4</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/25/100/">
</div>
<span class="dc-suggest__item__label">Suggestion 5</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/100/10/">
</div>
<span class="dc-suggest__item__label">Suggestion 6</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
<li class="dc-suggest__item">
<div class="dc-suggest__item__img-frame">
<img class="dc-suggest__item__img" src="http://lorempixel.com/10/100/">
</div>
<span class="dc-suggest__item__label">Suggestion 7</span>
<span class="dc-suggest__item__action"><a class="dc-link" href="#">Item Action</a></span>
</li>
</ul>
</div>
<label for="searchWithDate" class="dc-label">Search box using date field</label>
<div class="dc-search-form">
<input class="dc-input dc-search-form__input" id="searchWithDate" type="date" placeholder="Search...">
<button class="dc-btn dc-search-form__btn">
<i id="searchWithDate" class="dc-icon dc-icon--search dc-icon--interactive"></i>
</button>
</div>This is the content area. Content goes here. Actions (buttons, most of the times) should go in the bottom part.
<div class="demo-wrapper">
<div class="dc-overlay"></div>
<div class="dc-dialog">
<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>
</div>Side revealers are used to give you the ability to have main content and sub content in the side, and there are two styles of the revealers
.dc-side-revealer__content__scroll| First Name | Last Name | Status |
|---|---|---|
| Austin | Carpenter | New |
| Eileen | Holland | Active |
| Duane | Holmes | Active |
| Kitty | Murray | New |
| Toni | Nichols | Error |
.dc-side-revealer__content| First Name | Last Name | Status |
|---|---|---|
| Austin | Carpenter | New |
| Eileen | Holland | Active |
| Duane | Holmes | Active |
| Kitty | Murray | New |
| Toni | Nichols | Error |
<div class="dc-side-revealer">
<h3>1. The sub content is added inside a card <code>.dc-side-revealer__content__scroll</code></h3>
<div>
<strong>The main content is here.</strong> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and
the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32
and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
<input class="dc-side-revealer__toggle dc-icon" type="checkbox" />
<div class="dc-side-revealer__content dc-card">
<div class="dc-side-revealer__content__card dc-card">
<table class="dc-table">
<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">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="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="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="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="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="Status"><span class="dc-status dc-status--error">Error</span></td>
</tr>
</tbody>
</table>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary
to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by
English versions from the 1914 translation by H. Rackham.
</div>
</div>
</div>
</div>
<br>
<hr class="dc-divider">
<div class="dc-side-revealer">
<h3>2. The sub content is added directly into the revealer <code>.dc-side-revealer__content</code></h3>
<div>
<strong>The main content is here.</strong> What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page
editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and
the like). Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32
and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original
form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
<input class="dc-side-revealer__toggle dc-icon" type="checkbox" />
<div class="dc-side-revealer__content dc-card">
<table class="dc-table">
<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">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="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="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="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="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="Status"><span class="dc-status dc-status--error">Error</span></td>
</tr>
</tbody>
</table>
<div>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where does it come from? Contrary
to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of
the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
versions from the 1914 translation by H. Rackham.
</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. Messages 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"></i>
</div>
<div class="dc-msg__bd">
<h1 class="dc-msg__title">Info message</h1>
<p class="dc-msg__text">
Some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Here's a link.</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">
Some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Here's a link.</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">
Some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Here's a link.</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">
Some more information about what happened. <a href class="dc-link dc-msg__bd__link" title="tooltip">Here's a link.</a>
</p>
</div>
<div class="dc-msg__close">
<i class="dc-icon dc-icon--close dc-msg__close__icon"></i>
</div>
</div>
</div>Use accordions to separate content into logical sections.
dc-accordion__item is logically separated into two sections dc-accordion__header and dc-accordion__content
<div class="dc-accordion">
<div class="dc-accordion__item">
<header class="dc-accordion__header">
Accordion 1
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
<div class="dc-accordion__item">
<header class="dc-accordion__header">
Accordion 2
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
<div class="dc-accordion__item">
<header for="accordion-3" class="dc-accordion__header">
Accordion 3
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
<div class="dc-accordion__item">
<header class="dc-accordion__header">
Accordion 4
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
</div>dc-accordion__item--is-open: To show dc-accordion__content
dc-accordion__item--is-active: To show outline around dc-accordion__item
<div class="dc-accordion">
<div class="dc-accordion__item dc-accordion__item--is-open">
<header class="dc-accordion__header">
Accordion 1
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
<div class="dc-accordion__item">
<header class="dc-accordion__header">
Accordion 2
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
<div class="dc-accordion__item">
<header for="accordion-3" class="dc-accordion__header">
Accordion 3
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</div>
</div>
<div class="dc-accordion__item dc-accordion__item--is-open dc-accordion__item--is-active">
<header class="dc-accordion__header">
Accordion 4
</header>
<div class="dc-accordion__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</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>Use dc-pagination as container, each button should have dc-pagination-btn class applied.
Active button can be highlighted with dc-pagination-btn--active modifier class.
Buttons can be disabled by adding dc-pagination-btn--disabled modifier class.
As shown below, optionally, you can add an icon button in-between to have hidden page range in the navigation.
<div class="dc-pagination">
<button class="dc-btn dc-pagination-btn">
<icon class="dc-icon dc-icon--btn dc-icon--arrow-left"></icon>
</button>
<button class="dc-btn dc-pagination-btn">
1
</button>
<button class="dc-btn dc-pagination-btn dc-pagination-btn--active">
2
</button>
<button class="dc-btn dc-pagination-btn">
3
</button>
<button class="dc-btn dc-pagination-btn">
4
</button>
<button class="dc-btn dc-pagination-btn dc-pagination-btn--disabled">
<icon class="dc-icon dc-icon--more"></icon>
</button>
<button class="dc-btn dc-pagination-btn">
10
</button>
<button class="dc-btn dc-pagination-btn">
<icon class="dc-icon dc-icon--btn dc-icon--arrow-right"></icon>
</button>
</div>
<div class="dc-pagination">
<button class="dc-btn dc-pagination-btn">
<icon class="dc-icon dc-icon--btn dc-icon--arrow-left"></icon>
</button>
<button class="dc-btn dc-pagination-btn">
1
</button>
<button class="dc-btn dc-pagination-btn dc-pagination-btn--disabled">
<icon class="dc-icon dc-icon--more"></icon>
</button>
<button class="dc-btn dc-pagination-btn">
5
</button>
<button class="dc-btn dc-pagination-btn dc-pagination-btn--active">
6
</button>
<button class="dc-btn dc-pagination-btn">
7
</button>
<button class="dc-btn dc-pagination-btn dc-pagination-btn--disabled">
<icon class="dc-icon dc-icon--more"></icon>
</button>
<button class="dc-btn dc-pagination-btn">
10
</button>
<button class="dc-btn dc-pagination-btn">
<icon class="dc-icon dc-icon--btn dc-icon--arrow-right"></icon>
</button>
</div>