Addresses

The Simpsons, 742 Evergreen Terrace,
Springfield,
80085,
USA

<address class="a-address">
    <span class="a-address__heading">The Simpsons,</span>
    742 Evergreen Terrace,<br>
    Springfield,<br>
    80085,<br>
    USA
</address>

Avatars

Avatars are useful for quotations, profile pictures and account photos.

<div class="a-avatar  a-avatar--super">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar  a-avatar--xlarge">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar  a-avatar--large">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar  a-avatar--small">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar  a-avatar--xsmall">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>

Initials

If no picture is available, use data-text to add initials.

<div class="a-avatar" data-text="MR"></div>

Corners

If no picture is available, use data-text to add initials.

<div class="a-avatar  a-avatar--square">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar  a-avatar--radius">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>
<div class="a-avatar  a-avatar--round">
  <img class="a-avatar__img" src="https://source.unsplash.com/random/200x200">
</div>

Badges

Badges are useful when you want to show additional info like status or category.

Typically badges will use a <span> element.

Badge

<span class="a-badge">Badge</span>

Brand

<span class="a-badge  a-badge--brand">Brand</span>

Square

<span class="a-badge  a-badge--square">Square</span>

Round

<span class="a-badge  a-badge--round">Round</span>

Blockquotes

A blockquote is a section that is quoted from another source.

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

World Wildlife Fund

<blockquote class="a-blockquote" cite="http://www.worldwildlife.org/about">
    <div class="a-blockquote__body">
        For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    </div>
    <footer class="a-blockquote__footer">
        <cite class="a-cite">World Wildlife Fund</cite>
    </footer>
</blockquote>

This is a blockquote with emphasis. These are used for important quotes that demand attention.

Mike Rockwood

<blockquote class="a-blockquote  a-blockquote--emphasis">
    <div class="a-blockquote__body">
        <p>This is a blockquote with emphasis. These are used for important quotes that demand attention.</p>
    </div>
    <footer class="a-blockquote__footer">
        <cite class="a-cite">Mike Rockwood</cite>
    </footer>
</blockquote>

Buttons

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element:

If your button is actually a link to another page, please use the <a> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <button> element.

<button class="a-button">Button</button>

Button Colors

Brand

<a class="a-button  a-button--brand" href="#">Brand</a>

Brand-Fill

<a class="a-button  a-button--brand-fill" href="#">Brand-Fill</a>

Button Sizes

xsmall

<a class="a-button  a-button--xsmall" href="#">xsmall</a>

small

<a class="a-button  a-button--small" href="#">small</a>

medium

<a class="a-button  a-button--medium" href="#">medium</a>

large

<a class="a-button  a-button--large" href="#">large</a>

xlarge

<a class="a-button  a-button--xlarge" href="#">xlarge</a>

super

<a class="a-button  a-button--super" href="#">super</a>

Button Corners

square

<a class="a-button  a-button--square" href="#">square</a>

round

<a class="a-button  a-button--round" href="#">round</a>

Full-Width Buttons

expand

<a class="a-button  a-button--expand" href="#">expand</a>

Disabled Buttons

disabled

<a class="a-button  a-button--disabled" href="#">disabled</a>

Code

It is unlikely you will need to use code elements outside of the styleguide.


    Hello World!

<code class="a-code">
    Hello World!
</code>

Figures

Figures are intended to be used in conjunction with the captions to mark up diagrams, illustrations, photos, and code examples (among other things).

Note: notice the img elements have a data-original attribute instead of a src. This is for lazy loading. These images will not load until they are in the viewport. This saves bandwidth for us and the user. If you do not wish to lazy load images, use src.

<figure class="a-figure">
    <img class="a-figure__image" data-original="http://placehold.it/600x300" alt="placeholder image">
    <figcaption class="a-figure__caption">This is a caption</figcaption>
</figure>

Figure Alignment

<figure class="a-figure  a-figure--left">
    <img class="a-figure__image" data-original="http://placehold.it/200x200" alt="placeholder image">
    <figcaption class="a-figure__caption">This is a left-aligned figure</figcaption>
</figure>

<figure class="a-figure  a-figure--center">
    <img class="a-figure__image" data-original="http://placehold.it/200x200" alt="placeholder image">
    <figcaption class="a-figure__caption">This is a right-aligned figure</figcaption>
</figure>

<figure class="a-figure  a-figure--right">
    <img class="a-figure__image" data-original="http://placehold.it/200x200" alt="placeholder image">
    <figcaption class="a-figure__caption">This is a right-aligned figure</figcaption>
</figure>

Headings

These are the heading sizes that you can use site wide.

h1 40px

h2 28px

h3 22px

h4 19px

h5 16px

<h1 class="a-h1">h1 40px</h1>
<h2 class="a-h2">h2 28px</h2>
<h3 class="a-h3">h3 22px</h3>
<h4 class="a-h4">h4 19px</h4>
<h5 class="a-h5">h5 16px</h5>

Horizontal Rules

Horizontal rules are used to separate content or define a change in an HTML page.

<hr class="a-hr">

<hr class="a-hr  a-hr--block">

<hr class="a-hr  a-hr--type">

Icons

Icons are served via an SVG sprite system. For a full list of available icons, check out the Icon Library.

Sizes

Size modifiers change the size of icons.

<svg class="a-icon  a-icon--xsmall">
    <use xlink:href="#search-icon"></use>
</svg>
<svg class="a-icon  a-icon--small">
    <use xlink:href="#search-icon"></use>
</svg>
<svg class="a-icon  a-icon--medium">
    <use xlink:href="#search-icon"></use>
</svg>
<svg class="a-icon  a-icon--large">
    <use xlink:href="#search-icon"></use>
</svg>
<svg class="a-icon  a-icon--xlarge">
    <use xlink:href="#search-icon"></use>
</svg>
<svg class="a-icon  a-icon--super">
    <use xlink:href="#search-icon"></use>
</svg>

Social Media

Social media modifiers can be used to fill icons with each network's brand color.

<svg class="a-icon  a-icon--facebook">
    <use xlink:href="#facebook"></use>
</svg>
<svg class="a-icon  a-icon--twitter">
    <use xlink:href="#twitter"></use>
</svg>

Images

No classes necessary for images. They will behave responsively by default.

<img alt="placeholder" data-original="https://placehold.it/200x200"/>

Inputs

Inputs are tricky because some are atoms and some are molecules. Keep an eye on the namespacing. For more form element examples, see molecules.

Text Inputs

<input class="a-field" type="text">

<select class="a-field">
    <option>Choose me...</option>
</select>

<textarea class="a-field"></textarea>

Colors

<input class="a-field  a-field--success" type="text" placeholder=".a-field--success">

<input class="a-field  a-field--error" type="text" placeholder=".a-field--error">

<input class="a-field" disabled type="text" placeholder="disabled">

Icons

Technically, input elements with icons are molecules, not atoms. Therefore, they are prefixed with m- instead of a-.

<div class="m-field  m-field--icon-left">
    <svg class="a-icon">
        <use xlink:href="#search-icon"></use>
    </svg>
    <input class="a-field" type="text">
</div>

Sizes

To change the size of input elements we will use utility classes.

<input class="a-field  u-xsmall" type="text" placeholder=".u-xsmall">

<input class="a-field  u-small" type="text" placeholder=".u-small">

<input class="a-field  u-medium" type="text" placeholder=".u-medium">

<input class="a-field  u-large" type="text" placeholder=".u-large">

<input class="a-field  u-xlarge" type="text" placeholder=".u-xlarge">

<input class="a-field  u-super" type="text" placeholder=".u-super">

Checkboxes and Radios

Place your checkboxes and radios within labels and append the .a-field--choice modifier class.

Tick the box Yes No

<label class="a-field  a-field--choice">
    <input type="checkbox"> Tick the box
</label>
<label class="a-field  a-field--choice">
    <input name="radios" type="radio" checked> Yes
</label>
<label class="a-field  a-field--choice">
    <input name="radios" type="radio"> No
</label>

Links

To get consistent styles for hyper-links or to make text look like a hyper-link add the .a-link class.

hyper-link

<a class="a-link">hyper-link</a>

Lists

Un-ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel

<ul class="a-list">
    <li class="a-list__item">Lorem ipsum dolor sit amet</li>
    <li class="a-list__item">Consectetur adipiscing elit</li>
    <li class="a-list__item">Nulla volutpat aliquam velit
        <ul class="a-list">
            <li class="a-list__item">Phasellus iaculis neque</li>
            <li class="a-list__item">Purus sodales ultricies</li>
            <li class="a-list__item">Vestibulum laoreet porttitor sem</li>
            <li class="a-list__item">Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li class="a-list__item">Faucibus porta lacus fringilla vel</li>
</ul>

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Nulla volutpat aliquam velit
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel

<ol class="a-list">
    <li class="a-list__item">Lorem ipsum dolor sit amet</li>
    <li class="a-list__item">Consectetur adipiscing elit</li>
    <li class="a-list__item">Nulla volutpat aliquam velit
        <ol class="a-list">
            <li class="a-list__item">Phasellus iaculis neque</li>
            <li class="a-list__item">Purus sodales ultricies</li>
            <li class="a-list__item">Vestibulum laoreet porttitor sem</li>
            <li class="a-list__item">Ac tristique libero volutpat at</li>
        </ol>
    </li>
    <li class="a-list__item">Faucibus porta lacus fringilla vel</li>
</ol>

Divider

Add lines between list items.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Faucibus porta lacus fringilla vel

<ul class="a-list  a-list--divider">
    <li class="a-list__item">Lorem ipsum dolor sit amet</li>
    <li class="a-list__item">Consectetur adipiscing elit</li>
    <li class="a-list__item">Faucibus porta lacus fringilla vel</li>
</ul>

Un-styled

Applying .a-list--unstyled to a list will remove the bullet points.

You can remove bullet points on individual items by adding the .a-list__item--unstyled modifier.

I'm an unstyled list
Consectetur adipiscing elit
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- I'm an unstyled item
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel

<ul class="a-list  a-list--unstyled">
    <li class="a-list__item"><strong>I'm an unstyled list</strong></li>
    <li class="a-list__item">Consectetur adipiscing elit</li>
    <li class="a-list__item">Nulla volutpat aliquam velit
        <ul class="a-list"> <!-- Has bullet points-->
            <li class="a-list__item">Phasellus iaculis neque</li>
            <li class="a-list__item">Purus sodales ultricies</li>
            <li class="a-list__item  a-list__item--unstyled"><strong>I'm an unstyled item</strong></li>
            <li class="a-list__item">Ac tristique libero volutpat at</li>
        </ul>
    </li>
    <li class="a-list__item">Faucibus porta lacus fringilla vel</li>
</ul>

Inline

To make your list items flow left to right apply the .a-list--inline modifier.

Lorem
ipsum
dolor

<ul class="a-list  a-list--inline">
    <li class="a-list__item">Lorem</li>
    <li class="a-list__item">ipsum</li>
    <li class="a-list__item">dolor</li>
</ul>

Overlays

Overlays are used to blackout the background context of the page. To contain an overlay within an element set the parent element CSS to position: relative;

<div class="u-bg-black  u-padding--medium" style="position:relative;">
    <div class="a-overlay"></div>
</div>

Dismissable

Dismissable overlays change the mouse cursor to a hand on mouseover.

<div class="u-bg-black  u-padding--medium" style="position:relative;">
    <div class="a-overlay  a-overlay--dismissable"></div>
</div>

Transparent

Overlays don't necessarily need to be visible, they can appear transparent to provide functionality but no visual cues. If so use the a-overlay--transparent modifier.

<div class="u-bg-black  u-padding--medium" style="position:relative;">
    <div class="a-overlay  a-overlay--transparent"></div>
</div>

White

The a-overlay--white class will make the overlay a transparent white color.

<div class="u-bg-black  u-padding--medium" style="position:relative;">
    <div class="a-overlay  a-overlay--white"></div>
</div>

Full Page

You can make overlays cover the entire page by adding the a-overlay--fullpage modifier. The overlay will remain in a fixed position behind the content you want to promote.

Progress

<div class="a-progress">
    <div class="a-progress__bar" style="width:15%;"></div>
</div>

Rounded

<div class="a-progress  a-progress--rounded">
    <div class="a-progress__bar" style="width:15%;"></div>
</div>

Colors

<div class="a-progress">
    <div class="a-progress__bar  a-progress__bar--brand" style="width:15%;"></div>
</div>

Sizes

15%

20%

25%

45%

65%

<div class="a-progress  u-xsmall">
    <div class="a-progress__bar" style="width:5%;">5%</div>
</div><br>
<div class="a-progress  u-small">
    <div class="a-progress__bar" style="width:15%;">15%</div>
</div><br>
<div class="a-progress  u-medium">
    <div class="a-progress__bar" style="width:20%;">20%</div>
</div><br>
<div class="a-progress  u-large">
    <div class="a-progress__bar" style="width:25%;">25%</div>
</div><br>
<div class="a-progress  u-xlarge">
    <div class="a-progress__bar" style="width:45%;">45%</div>
</div><br>
<div class="a-progress  u-super">
    <div class="a-progress__bar" style="width:65%;">65%</div>
</div>

Social Share Kit

Social Share Kit is a library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, share count, floating/sticky button bar and popups. For more information, visit http://socialsharekit.com/.

In order for the buttons to work, these CSS and JS files must be included on the page.

<link href="https://cdnjs.cloudflare.com/ajax/libs/social-share-kit/1.0.13/css/social-share-kit.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/social-share-kit/1.0.13/js/social-share-kit.min.js"></script>
<script type="text/javascript">
SocialShareKit.init();
</script>

Then the following code can be used to have social buttons.

<div class="ssk-group ssk-xs a-ssk">
    <a href="" class="ssk ssk-facebook"></a>
    <a href="" class="ssk ssk-twitter"></a>
    <a href="" class="ssk ssk-google-plus"></a>
    <a href="" class="ssk ssk-pinterest"></a>
</div>

Alignment

Button alignments can be changed with the following modifiers: a-ssk--center, a-ssk--left, a-ssk--right.

<div class="ssk-group  ssk-xs  a-ssk  a-ssk--center">
    <a href="" class="ssk ssk-facebook"></a>
    <a href="" class="ssk ssk-twitter"></a>
</div>

<div class="ssk-group  ssk-xs  a-ssk  a-ssk--right">
    <a href="" class="ssk ssk-facebook"></a>
    <a href="" class="ssk ssk-twitter"></a>
</div>

Tables

Tables; bad for layout, great for displaying tabular data.

Basic table
First name	Last name	Username
Jim	Kirk	@captaink
Mr.	Spock	@science101
Nyota	Uhura	@comms

<table class="a-table">
    <caption class="a-table__caption">Basic table</caption>
    <thead class="a-table__head">
        <tr class="a-table__row a-table__row--heading">
            <th class="a-table__cell">First name</th>
            <th class="a-table__cell">Last name</th>
            <th class="a-table__cell">Username</th>
        </tr>
    </thead>
    <tbody class="a-table__body">
        <tr class="a-table__row">
            <td class="a-table__cell">Jim</td>
            <td class="a-table__cell">Kirk</td>
            <td class="a-table__cell">@captaink</td>
        </tr>
        <tr class="a-table__row">
            <td class="a-table__cell">Mr.</td>
            <td class="a-table__cell">Spock</td>
            <td class="a-table__cell">@science101</td>
        </tr>
        <tr class="a-table__row">
            <td class="a-table__cell">Nyota</td>
            <td class="a-table__cell">Uhura</td>
            <td class="a-table__cell">@comms</td>
        </tr>
    </tbody>
</table>

Striped

Striped rows
First name	Last name	Username
Jim	Kirk	@captaink
Mr.	Spock	@science101
Nyota	Uhura	@comms

<table class="a-table a-table--striped">
    <caption class="a-table__caption">Striped rows</caption>
    <thead class="a-table__head">
        <tr class="a-table__row a-table__row--heading">
            <th class="a-table__cell">First name</th>
            <th class="a-table__cell">Last name</th>
            <th class="a-table__cell">Username</th>
        </tr>
    </thead>
    <tbody class="a-table__body">
        <tr class="a-table__row">
            <td class="a-table__cell">Jim</td>
            <td class="a-table__cell">Kirk</td>
            <td class="a-table__cell">@captaink</td>
        </tr>
        <tr class="a-table__row">
            <td class="a-table__cell">Mr.</td>
            <td class="a-table__cell">Spock</td>
            <td class="a-table__cell">@science101</td>
        </tr>
        <tr class="a-table__row">
            <td class="a-table__cell">Nyota</td>
            <td class="a-table__cell">Uhura</td>
            <td class="a-table__cell">@comms</td>
        </tr>
    </tbody>
</table>

Condensed

Small table and text
First name	Last name	Username
Jim	Kirk	@captaink
Mr.	Spock	@science101
Nyota	Uhura	@comms

<table class="a-table a-table--condensed">
    <caption class="a-table__caption">Small table and text</caption>
    <thead class="a-table__head">
        <tr class="a-table__row a-table__row--heading">
            <th class="a-table__cell">First name</th>
            <th class="a-table__cell">Last name</th>
            <th class="a-table__cell">Username</th>
        </tr>
    </thead>
    <tbody class="a-table__body">
        <tr class="a-table__row">
            <td class="a-table__cell">Jim</td>
            <td class="a-table__cell">Kirk</td>
            <td class="a-table__cell">@captaink</td>
        </tr>
        <tr class="a-table__row">
            <td class="a-table__cell">Mr.</td>
            <td class="a-table__cell">Spock</td>
            <td class="a-table__cell">@science101</td>
        </tr>
        <tr class="a-table__row">
            <td class="a-table__cell">Nyota</td>
            <td class="a-table__cell">Uhura</td>
            <td class="a-table__cell">@comms</td>
        </tr>
    </tbody>
</table>

Tooltips

Lets you add tooltips to elements without JavaScript.

Hint

The hint modifier gives text an dotted underline and question mark cursor on hover.

<span class="a-tooltip  a-tooltip--top  a-tooltip--hint" aria-label="This is a tooltip">Hover over me...</span>

Position

Top

<span class="a-tooltip  a-tooltip--top" aria-label="This is a tooltip">Hover over me...</span>

Right

<span class="a-tooltip  a-tooltip--right  a-tooltip--hint" aria-label="This is a tooltip">Hover over me...</span>

Bottom

<span class="a-tooltip  a-tooltip--bottom" aria-label="This is a tooltip">Hover over me...</span>

Left

<span class="a-tooltip  a-tooltip--left" aria-label="This is a tooltip">Hover over me...</span>

Size

Small

<span class="a-tooltip  a-tooltip--top  a-tooltip--small" aria-label="Hi.">I'm a small tooltip</span>

Medium

<span class="a-tooltip  a-tooltip--top  a-tooltip--medium" aria-label="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done.">I'm a medium tooltip</span>

Large

<span class="a-tooltip  a-tooltip--top  a-tooltip--large" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!">I'm a large tooltip</span>

Xlarge

<span class="a-tooltip  a-tooltip--top  a-tooltip--xlarge" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!">I'm a xlarge tooltip</span>

Fit

<span class="a-tooltip  a-tooltip--top  a-tooltip--fit" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!">This tooltip's width will fit the element</span>

Typography

Here is an example paragraph containing most of the basic typographic tags.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas². Vestibulum tortor quam, feugiat vitae abbr, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas<sup>2</sup>. Vestibulum tortor quam, feugiat vitae <abbr title="Abbreviation">abbr</abbr>, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, <mark>sagittis tempus</mark> lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. <small>Ut felis.</small></p>