An alert looks like...
<container> - has an alert and alert--$color class
<icon> - has an alert__icon class
<svg> - has an icon and icon--md class
<use xlink:href> - $icon-reference
<close> - has an alert__close alert--$color__close class
<svg> - has an icon and icon--md class
<use xlink:href> - $icon-reference
<text>
But all you need to do is copy the markup below, add some text and pick a color: warning, success, info
components/alerts/alerts.html
<div class="alert alert--warning shake-it">
<span class="alert__icon">
<svg class="icon icon--md"><use xlink:href="#ei-eye"></use></svg>
</span>
<span class="alert__close alert__close--warning">
<svg class="icon icon--md" tabindex="0" role="button" aria-label="close">
<use xlink:href="#ei-close"></use>
</svg>
</span>
<span>Danger Will Robinson, DANGER!</span>
</div>
<div class="alert alert--success">
<span class="alert__icon">
<svg class="icon icon--md"><use xlink:href="#ei-like"></use></svg>
</span>
<span class="alert__close alert__close--success">
<svg class="icon icon--md" tabindex="0" role="button" aria-label="close">
<use xlink:href="#ei-close"></use>
</svg>
</span>
<span>You did it!</span>
</div>
<div class="alert alert--info">
<span class="alert__icon">
<svg class="icon icon--md"><use xlink:href="#ei-exclamation"></use></svg>
</span>
<span class="alert__close alert__close--info">
<svg class="icon icon--md" tabindex="0" role="button" aria-label="close">
<use xlink:href="#ei-close"></use>
</svg>
</span>
<span>Leme tell you something...</span>
</div>
components/alerts/_alerts.scss, line 1
A card looks like...
<card>
<header>
<body>
<footer>
The header and footer are optional. Use the grid to display multiple cards.
Pure mathematics can not lie! Come on! Don't be lasagna.
They're screwdrivers! What are you going to do? Assemble a cabinet at them? Let's go in!
Planets come and go. Stars perish. Matter disperses, coalesces, forms into other patterns, other worlds.
components/cards/cards.html
<article class="card ">
<header class="card__head">I am the Doctor!</header>
<div class="card__body">
<p>Pure mathematics can not lie! Come on! Don't be lasagna.</p>
<p>
They're screwdrivers! What are you going to do?
Assemble a cabinet at them? Let's go in!
</p>
<p>
Planets come and go. Stars perish.
Matter disperses, coalesces, forms into other patterns, other worlds.
</p>
</div>
<footer class="card__foot">
<button class="button button--light">I'm on fire!</button>
</footer>
</article>
components/cards/cards.scss, line 1
Drawers need JavaScript to open and close, this functionality is not included.
Use a drawer when a page might need extra information. E.g.: Creating or updating a small set of information, hiding/showing advanced settings, easter eggs, etc...
components/drawers/drawers.html
<div class="drawer" id="drawer">
<form name="drawer-form" class="drawer__content" id="drawer__content">
<div class="drawer__head">
<span class="drawer__close" onclick="toggleDrawer()">
<svg
class="icon icon--md"
tabindex="0"
role="button"
aria-label="close"
><use xlink:href="#ei-close"></use></svg>
</span>
<h2>Super Powers Form</h2>
</div>
<div class="drawer__body">
<fieldset class="fieldset">
<label class="label">
Do you have super powers?
<select class="select select--inline">
<option value="">I dono</option>
<option value="">Darn tootin!</option>
<option value="">Nope</option>
<option value="">Do you play DND?</option>
<option value="">Tastes like burning</option>
</select>
</label>
</fieldset>
<fieldset class="fieldset">
<div class="fieldset__legend">Describe your powers.</div>
<label class="label label--inline" for="physical">
<input class="checkbox" type="checkbox" id="physical">
Physical
</label>
<label class="label label--inline" for="mental">
<input class="checkbox" type="checkbox" id="mental">
Mental
</label>
<label class="label label--inline" for="environmental">
<input class="checkbox" type="checkbox" id="environmental">
Environmental
</label>
<label class="label label--inline" for="magical">
<input class="checkbox" type="checkbox" id="magical">
Magical
</label>
<label class="label label--inline" for="can-fart-rainbows">
<input class="checkbox" type="checkbox" id="can-fart-rainbows">
Can Fart Rainbows
</label>
</fieldset>
<fieldset class="fieldset">
<label class="label" for="how-you-use-powers">
Describe how/why you've used your powers.
</label>
<textarea
class="textarea textarea--full-bleed"
type="textarea"
id="how-you-use-powers"
></textarea>
</fieldset>
<fieldset class="fieldset" style="text-align:center;">
<img
alt="Secretwars Image"
src="https://upload.wikimedia.org/wikipedia/en/thumb/0/08/Secretwars1.png/220px-Secretwars1.png"
width="220"
height="329"
/>
</fieldset>
</div>
<div class="drawer__foot">
<button class="button" onclick="toggleDrawer()">Cancel</button>
<button class="button button--primary" onclick="toggleDrawer()">Save</button>
</div>
</form>
</div>
<button
class="button button--primary"
id="open-drawer"
onclick="toggleDrawer()"
>Click at your own peril</button>
<script>
var drawer = document.getElementById("drawer");
function toggleDrawer() {
drawer.classList.toggle("drawer--open");
}
</script>
components/drawers/_drawers.scss, line 1
Use a paginator when content needs to be broken into multiple pages.
Paginators have a lot of pieces, check the markup for a full view.
components/paginators/paginators.html
<p>A paginator on the 1st page</p>
<div class="paginator">
<span class="paginator__range">Showing 1 - 10 of 57</span>
<ol class="paginator__list">
<li class="paginator__item">
<a
class="paginator__link paginator__link--active"
href="#"
aria-label="Page 1 of 57"
>1</a>
</li>
<li class="paginator__item">
<a class="paginator__link" href="#" aria-label="Page 2 of 57">2</a>
</li>
<li class="paginator__item">
<a class="paginator__link" href="#" aria-label="Page 3 of 57">3</a>
</li>
<li class="paginator__item">…</li>
<li class="paginator__item">
<a class="paginator__link" href="#" aria-label="Page 57 of 57">57</a>
</li>
<li class="paginator__item">
<a class="paginator__link" href="#" title="Next page">
<svg class="icon icon--md">
<use xlink:href="#ei-chevron-right"></use>
</svg>
</a>
</li>
</ol>
</div>
<p>An expanded paginator</p>
<div class="paginator">
<span class="paginator__range">Showing 20 - 22 of 42</span>
<ol class="paginator__list">
<li class="paginator__item">
<a class="paginator__link" href="#" title="Previous page">
<svg class="icon icon--md">
<use xlink:href="#ei-chevron-left"></use>
</svg>
</a>
</li>
<li class="paginator__item">
<a class="paginator__link" href="#" aria-label="Page 1 of 42">1</a>
</li>
<li class="paginator__item">…</li>
<li class="paginator__item"><a class="paginator__link" href="#" aria-label="Page 20 of 42">20</a></li>
<li class="paginator__item">
<a class="paginator__link paginator__link--active" href="#" aria-label="Page 21 of 42">21</a>
</li>
<li class="paginator__item"><a class="paginator__link" href="#" aria-label="Page 22 of 42">22</a></li>
<li class="paginator__item">…</li>
<li class="paginator__item"><a class="paginator__link" href="#" aria-label="Page 42 of 42">42</a></li>
<li class="paginator__item">
<a class="paginator__link" href="#" title="Next page">
<svg class="icon icon--md">
<use xlink:href="#ei-chevron-right"></use>
</svg>
</a>
</li>
</ol>
</div>
components/paginators/_paginators.scss, line 1
Progress bars look like...
<progress>
<bar>
components/progress-bars/progress-bars.html
<div class="progress">
<div
class="progress__bar [modifier class]"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
style="width: 75%;"
></div>
</div>
components/progress-bars/_progress-bars.scss, line 1
Tabs require specific markup and element arrtibutes to make them accessible. For more detail check the markup, aria-labelledby, aria-selected, aria-controls, tabindex
tabs/tabs.html
<div class="tabs">
<ul class="tabs__labels" role="tablist">
<li
class="tabs__label tabs__label--active"
title="Firestar Item"
role="presentation"
>
<a
class="tabs__link"
id="link-firestar"
href="javascript:void(0);"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="content-firestar"
>Firestar</a>
</li>
<li
class="tabs__label"
title="Wolverine Item"
role="presentation"
>
<a
class="tabs__link"
id="link-wolverine"
href="javascript:void(0);"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="content-wolverine"
>Wolverine</a>
</li>
<li
class="tabs__label"
title="Storm Item"
role="presentation"
>
<a
class="tabs__link"
id="link-storm"
href="javascript:void(0);"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="content-storm"
>Storm</a>
</li>
<li
class="tabs__label"
title="Spiderman Item"
role="presentation"
>
<a
class="tabs__link"
id="link-spiderman"
href="javascript:void(0);"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="content-spiderman"
>Spiderman</a>
</li>
<li
class="tabs__label"
title="Ms Marvel Item"
role="presentation"
>
<a
class="tabs__link"
id="link-ms-marvel"
href="javascript:void(0);"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="content-ms-marvel"
>Ms Marvel</a>
</li>
</ul>
<div
class="tabs__content tabs__content--active"
id="content-firestar"
role="tabpanel"
aria-labelledby="link-firestar"
>
<img
alt="Firestar (Marvel Comics)"
src="http://upload.wikimedia.org/wikipedia/en/6/60/Firestar_%28Marvel_Comics%29.png"
width="250"
height="390"
/>
<p>Okay, girl, don't let them see you sweat.</p>
</div>
<div
class="tabs__content"
id="content-wolverine"
role="tabpanel"
aria-labelledby="link-wolverine"
>Stuff about Wolverine!</div>
<div
class="tabs__content"
id="content-storm"
role="tabpanel"
aria-labelledby="link-storm"
>Stuff about Storm!</div>
<div
class="tabs__content"
id="content-spiderman"
role="tabpanel"
aria-labelledby="link-spiderman"
>Stuff about Spiderman!</div>
<div
class="tabs__content"
id="content-ms-marvel"
role="tabpanel"
aria-labelledby="link-ms-marvel"
>Stuff about Ms Marvel!</div>
</div>
tabs/_tabs.scss, line 1
Use a tooltip to add information as needed.
Tooltips require specific markup and element arrtibutes to make them accessible. For more detail check the markup, aria-labelledby and aria-describedby
Hover on the icon and the underlined word in the paragraph of each example to see the tooltip appear.
components/tooltips/tooltips.html
<div style="padding-left: 2rem; height: 11rem; margin-left: 22rem;">
<span
class="tooltip-container"
aria-labelledby="icon-title-[modifier class]"
aria-describedby="icon-content-[modifier class]"
>
<svg class="icon icon--md tooltip-sibling">
<use xlink:href="#ei-question"></use>
</svg>
<div class="tooltip [modifier class]" role="tooltip">
<span class="tooltip__title" id="icon-title-[modifier class]">
It's a fez. I wear a fez now.
</span>
<div class="tooltip__content" id="icon-content-[modifier class]">
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
</div>
</div>
</span>
</div>
<div>
You may be a doctor. But I'm the
<span
class="tooltip-container"
aria-labelledby="paragraph-title-[modifier class]"
aria-describedby="paragraph-content-[modifier class]"
>
<span class="tooltip-sibling" style="text-decoration: underline;">Doctor.</span>
<div class="tooltip [modifier class]" role="tooltip">
<span class="tooltip__title" id="paragraph-title-[modifier class]">
It's a fez. I wear a fez now.
</span>
<div class="tooltip__content" id="paragraph-content-[modifier class]">
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
</div>
</div>
</span>
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
</div>
components/tooltips/tooltips.scss, line 1