# Antwerp branding styleguide v3.2.2

A collection of building blocks for your next Antwerp-based application.

View the code on GitHub

Skip to table of contents

## Getting started

In this styleguide you'll find all the necessary info you will need in order to start building digital layouts or apps for the city of Antwerp.

### Basic implementation

In its simplest form you can just include the following line in the `<head>` section of your app.

    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/3.2.2/main.min.css">

You can even import it directly in your (S)CSS:

    @import url("https://cdn.antwerpen.be/core_branding_scss/3.2.2/main.min.css");

We adopt semantic versioning. If you want to use another version of the Core Branding you can do so by adjusting the version in the URL address. See the changelog for all available versions.

You can also install everything with npm:

    npm install @a-ui/core --save

Then, you can import everything in your Sass setup (`main.min.css` also available):

    @import '~@a-ui/core/dist/main.css';

In order to extend our style kit you can make use of our Sass variables. Import them like this:

    @import '~@a-ui/core/dist/assets/styles/_quarks';

### Advanced usage

Sometimes you want to add functionality which requires more styling as defined in our kit. In order to help with this we provide some simple tools and the ability to import all the kit's Sass variables. See the Quarks section for more info.

It's also possible to only load the Antwerp fonts. Just like you would implement a font from Google. These are the links you can use:

#### Antwerpen

Available in Small, Regular and Tall.

    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/3.2.2/antwerpen.min.css">

or

    @import url("https://cdn.antwerpen.be/core_branding_scss/3.2.2/antwerpen.min.css");

#### Sun Antwerpen

Available in Light, Regular, Bold and Extra Bold.

    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/3.2.2/sun-antwerpen.min.css">

or

    @import url("https://cdn.antwerpen.be/core_branding_scss/3.2.2/sun-antwerpen.min.css");

## Other resources

### Flexboxgrid

https://github.com/a-ui/core_flexboxgrid_scss

Grid optimized to follow the Antwerp styling guidelines.

### Sketch

https://github.com/a-ui/core_branding_sketch

Sketch source file of all core branding components.

### Favicons

https://github.com/a-ui/core_branding_favicons

Favicons for Antwerp apps.

## Table of contents

## Quarks

You can treat this part of the package as the API of our styling library. Include it on top of your custom stylesheet in order to have access to all defined variables, mixins and functions.

    @import 'quarks';

### Mixins

quarks/quarks.mixins

More mixins are available, but the following are the more important ones.

Force an element to self-clear its children

Note that you can also use the `.clearfix` class.

    .css {
      @include clearfix;
    }

Use FontAwesome as font

    .css {
      @include fontawesome;
    }

Responsive mixins

Note that working mobile first is encouraged, so try to limit the use of the `to` mixin.

    .css {
      @include at($screen) {
        /* Anything bigger than $screen */
      }

      @include to($screen-xs-max) {
        /* Anything smaller or equal than $screen */
      }
    }

### Functions

quarks/quarks.functions

More functions are available, but the following are the more important ones.

Convert pixels to rem

    .css {
      margin: rem(32px) / 16 * 1rem // margin: 2rem;
    }

Correctly handle z-indexes

For all options, see below in the variables section.

    .css {
      z-index: layer('base'); // z-index: 1;
    }

### Colors

quarks/quarks.colors

An overview of the complete color palette.

- `$monza`
  rgb(207, 0, 57)
- `$tangerine`
  rgb(241, 138, 0)
- `$corn`
  rgb(220, 198, 0)
- `$sun`
  rgb(249, 176, 30)
- `$porsche`
  rgb(236, 161, 84)
- `$korma`
  rgb(148, 69, 11)
- `$punch`
  rgb(224, 78, 57)
- `$alizarin-crimson`
  rgb(218, 41, 28)
- `$mandy`
  rgb(223, 70, 97)
- `$red-ribbon`
  rgb(228, 0, 70)
- `$deep-blush`
  rgb(229, 109, 177)
- `$cerise`
  rgb(227, 49, 138)
- `$rose-bud-cherry`
  rgb(132, 11, 85)
- `$east-side`
  rgb(181, 128, 209)
- `$seance`
  rgb(105, 31, 130)
- `$ship-cove`
  rgb(103, 135, 183)
- `$st-tropaz`
  rgb(44, 86, 151)
- `$congress-blue`
  rgb(0, 64, 136)
- `$cerulean`
  rgb(0, 145, 211)
- `$endeavour`
  rgb(0, 100, 180)
- `$light-cerulean`
  rgb(0, 160, 211)
- `$deep-cerulean`
  rgb(0, 127, 163)
- `$monte-carlo`
  rgb(127, 202, 211)
- `$blue-lagoon`
  rgb(0, 140, 149)
- `$persian-green`
  rgb(0, 152, 130)
- `$tropical-rain-forrest`
  rgb(0, 123, 95)
- `$mantis`
  rgb(108, 194, 74)
- `$apple`
  rgb(74, 163, 44)
- `$celery`
  rgb(170, 203, 87)
- `$limeade`
  rgb(122, 154, 1)
- `$asparagus`
  rgb(120, 157, 74)
- `$green-leaf`
  rgb(87, 115, 7)
- `$kabul`
  rgb(85, 71, 65)
- `$nepal`
  rgb(144, 171, 188)
- `$black-pearl`
  rgb(8, 31, 44)
- `$black`
  rgb(0, 0, 0)
- `$grey-dark`
  rgb(125, 125, 125)
- `$grey`
  rgb(176, 176, 176)
- `$grey-light`
  rgb(216, 216, 216)
- `$grey-lighter`
  rgb(243, 243, 243)
- `$white`
  rgb(255, 255, 255)
- `$twitter`
  rgb(0, 172, 237)
- `$linkedin`
  rgb(0, 119, 181)
- `$facebook`
  rgb(24, 119, 242)
- `$google`
  rgb(220, 78, 65)
- `$snapchat`
  rgb(255, 252, 0)
- `$instagram`
  inspect me

### Variables

quarks/quarks.variables

An overview of all variables and their default values. If you are using Sass, you can overwrite these values for creating your own flavor of the branding kit.

- `$brand-primary`: $endeavour
- `$brand-secondary`: $monza
- `$state-success`: $apple
- `$state-info`: $endeavour
- `$state-warning`: $sun
- `$state-danger`: $alizarin-crimson
- `$state-disabled`: $grey-light
- `$text-color`: $black-pearl
- `$text-color-light`: $grey-dark
- `$text-color-xlight`: $white
- `$background-color`: $grey-light
- `$background-color-light`: $grey-lighter
- `$border-color`: $grey
- `$border-color-light`: $grey-light
- `$overlay-color`: rgba($black, .75)
- `$selection-color`: mix($brand-primary, $white, 20%)
- `$spacer`: 1.5rem
- `$spacer-xx`: $spacer * 4
- `$spacer-xl`: $spacer * 2.5
- `$spacer-lg`: $spacer * 2
- `$spacer-md`: $spacer * 1.5
- `$spacer-sm`: $spacer * .75
- `$spacer-xs`: $spacer * .5
- `$screen-xs`: 30rem
- `$screen-sm`: 45rem
- `$screen-md`: 62rem
- `$screen-lg`: 75rem
- `$screen-xl`: $screen-lg + $spacer-xx * 2 + $spacer * 2
- `$screen-xs-max`: 44.9375rem
- `$screen-sm-max`: 61.9375rem
- `$screen-md-max`: 74.9375rem
- `$screen-lg-max`: 89.9375rem
- `$font-family-base`: 'Sun Antwerpen'
- `$font-family-headings`: 'Antwerpen Regular'
- `$font-family-monospace`: Menlo, Monaco, Consolas, 'Courier New', monospace
- `$font-size-ti`: 12px
- `$font-size-xs`: 13px
- `$font-size-sm`: 14px
- `$font-size-base`: 16px
- `$font-size-lg`: 18px
- `$font-size-ratio`: 1.2
- `$font-size-h1`: $font-size-base * power($font-size-ratio, 6)
- `$font-size-h2`: $font-size-base * power($font-size-ratio, 5)
- `$font-size-h3`: $font-size-base * power($font-size-ratio, 4)
- `$font-size-h4`: $font-size-base * power($font-size-ratio, 3)
- `$font-size-h5`: $font-size-base * power($font-size-ratio, 2)
- `$font-size-h6`: $font-size-base * power($font-size-ratio, 1)
- `$line-height-base`: 1
- `$line-height-paragraph`: 1.3
- `$line-height-headings`: 1.1
- `$light`: 300
- `$normal`: 500
- `$bold`: 700
- `$extra-bold`: 800
- `$font-weight-h1`: $normal
- `$font-weight-h2`: $normal
- `$font-weight-h3`: $normal
- `$font-weight-h4`: $normal
- `$font-weight-h5`: $normal
- `$font-weight-h6`: $normal
- `$readable-content-width`: 45rem
- `$animation-duration`: 250ms
- `$animation-easing`: ease-in-out
- `$animation-normal`: $animation-duration $animation-easing
- `$icon-size-ti`: 12px
- `$icon-size-sm`: 16px
- `$icon-size-base`: 22px
- `$icon-size-lg`: 28px
- `$box-shadow`: $spacer / 2 $spacer / 2 0 rgba($black, .1)
- `$box-shadow-reverse`: $spacer / 2 $spacer / -2 0 rgba($black, .1)
- `$link-color`: $brand-primary
- `$link-background-color`: mix($brand-primary, $white, 10%)
- `$link-hover-color`: mix($link-color, $black, 85%)
- `$list-padding-left`: $spacer
- `$list-item-padding-top`: $spacer / 3
- `$list-item-padding-bottom`: $spacer / 3
- `$pre-color`: $text-color
- `$pre-bg`: rgba($black, .05)
- `$pre-font-size`: 1rem
- `$pre-padding`: $spacer-xs
- `$code-color`: $pre-color
- `$code-bg`: $pre-bg
- `$code-font-size`: .875rem
- `$code-padding`: $spacer-xs / 6 $spacer-xs / 2
- `$kbd-color`: $white
- `$kbd-bg`: $grey
- `$kbd-font-size`: .875rem
- `$kbd-padding`: $code-padding
- `$mark-color`: $white
- `$mark-bg`: $brand-primary
- `$cite-color`: $brand-secondary
- `$figcaption-padding`: $spacer-xs
- `$table-bg`: $white
- `$table-border`: $border-color
- `$table-head-bg`: $background-color-light
- `$table-primary-head-color`: $white
- `$table-primary-head-bg`: $brand-primary
- `$table-secondary-head-color`: $white
- `$table-secondary-head-bg`: $brand-secondary
- `$table-striped-bg`: $background-color-light
- `$table-padding`: $spacer-xs
- `$btn-font-weight`: $bold
- `$btn-font-size-ti`: $font-size-xs
- `$btn-font-size-sm`: $font-size-sm
- `$btn-font-size`: $font-size-base
- `$btn-font-size-lg`: $font-size-lg
- `$btn-padding`: ($spacer * 7 / 12) $spacer
- `$btn-icon-size-ti`: $icon-size-ti
- `$btn-icon-size-sm`: $icon-size-sm
- `$btn-icon-size`: $icon-size-base
- `$btn-icon-size-lg`: $icon-size-lg
- `$btn-default-color`: $white
- `$btn-default-bg`: $grey
- `$btn-primary-color`: $btn-default-color
- `$btn-primary-bg`: $brand-primary
- `$btn-secondary-color`: $btn-default-color
- `$btn-secondary-bg`: $brand-secondary
- `$btn-success-color`: $btn-default-color
- `$btn-success-bg`: $state-success
- `$btn-warning-color`: $btn-default-color
- `$btn-warning-bg`: $state-warning
- `$btn-danger-color`: $btn-default-color
- `$btn-danger-bg`: $state-danger
- `$btn-disabled-color`: $grey-dark
- `$btn-disabled-bg`: $state-disabled
- `$btn-transparent-color`: $brand-primary
- `$btn-transparent-bg`: transparent
- `$btn-official-color`: $white
- `$btn-official-bg`: $monza
- `$input-color`: $text-color
- `$input-bg`: $white
- `$input-border`: $border-color
- `$input-border-focus`: rgb(192, 223, 254)
- `$input-disabled`: $state-disabled
- `$input-placeholder`: rgb(118, 118, 118)
- `$input-icon`: $grey-dark
- `$input-icon-hover`: $black-pearl
- `$input-required`: $state-danger
- `$input-success-border`: $state-success
- `$input-success-border-focus`: mix($input-success-border, $white, 25%)
- `$input-success-icon`: $state-success
- `$input-warning-border`: $state-warning
- `$input-warning-border-focus`: mix($input-warning-border, $white, 25%)
- `$input-warning-icon`: $state-warning
- `$input-danger-border`: $state-danger
- `$input-danger-border-focus`: mix($input-danger-border, $white, 25%)
- `$input-danger-icon`: $state-danger
- `$input-height`: $spacer-lg
- `$input-padding`: 0 $spacer
- `$select-height`: $input-height
- `$select-padding`: $spacer-xs $spacer
- `$textarea-height`: 12rem
- `$textarea-padding`: $spacer-sm $spacer
- `$input-height-sm`: $spacer-md
- `$input-padding-sm`: 0 $spacer-xs
- `$select-height-sm`: $input-height-sm
- `$select-padding-sm`: 0 $spacer-xs
- `$textarea-height-sm`: 8rem
- `$textarea-padding-sm`: $spacer-xs / 3 * 2 $spacer-xs
- `$input-height-lg`: $spacer-xl
- `$input-padding-lg`: 0 $spacer
- `$select-height-lg`: $input-height-lg
- `$select-padding-lg`: $spacer-sm $spacer
- `$textarea-height-lg`: 16rem
- `$textarea-padding-lg`: $spacer / 6 * 5 $spacer
- `$radio-checkbox-color`: $white
- `$radio-checkbox-bg`: $brand-primary
- `$switch-width`: $spacer-lg
- `$switch-height`: $switch-width / 2 + .25rem
- `$switch-bg`: $input-bg
- `$switch-border`: $input-border
- `$switch-disabled`: $state-disabled
- `$switch-handle-width`: ($switch-width - .5rem) / 2
- `$switch-handle-bg`: $grey
- `$switch-handle-bg-active`: $brand-primary
- `$fieldset-padding`: $spacer-lg 0
- `$legend-padding`: $spacer / 6 $spacer / 3
- `$tooltip-max-width`: $spacer * 12
- `$tooltip-min-height`: $spacer-md
- `$tooltip-default-color`: $text-color
- `$tooltip-default-bg`: $background-color
- `$tooltip-primary-color`: $white
- `$tooltip-primary-bg`: $brand-primary
- `$tooltip-secondary-color`: $tooltip-primary-color
- `$tooltip-secondary-bg`: $brand-secondary
- `$tooltip-padding`: $spacer / 3 $spacer-xs
- `$tooltip-arrow-height`: $spacer / 4
- `$progress-height`: $switch-height
- `$progress-bar-padding`: $spacer / 6
- `$progress-tooltip-offset`: .625rem
- `$progress-bg`: $input-bg
- `$progress-border`: $input-border
- `$progress-bar-bg`: $brand-primary
- `$range-slider-height`: $switch-height
- `$range-slider-padding`: $spacer / 6
- `$range-slider-offset`: $progress-tooltip-offset
- `$range-slider-bg`: $input-bg
- `$range-slider-border`: $input-border
- `$range-slider-bar-bg`: $background-color
- `$range-slider-handle-bg`: $brand-primary
- `$link-list-item-padding`: $spacer / 3 * 2 $spacer
- `$link-list-hover`: $grey-lighter
- `$datepicker-border`: $border-color
- `$datepicker-bg`: $white
- `$datepicker-bg-hover`: mix($brand-primary, $white, 20%)
- `$datepicker-today-color`: $brand-primary
- `$datepicker-today-bg`: mix($datepicker-today-color, $white, 20%)
- `$datepicker-today-border`: $datepicker-today-color
- `$datepicker-today-font-weight`: $extra-bold
- `$datepicker-selected-color`: $white
- `$datepicker-selected-bg`: $datepicker-today-color
- `$datepicker-selected-font-weight`: $datepicker-today-font-weight
- `$datepicker-faded-color`: $grey-dark
- `$datepicker-faded-bg`: $background-color-light
- `$datepicker-faded-bg-hover`: $background-color
- `$datepicker-unavailable-color`: $state-disabled
- `$datepicker-unavailable-bg`: $datepicker-bg
- `$accordion-border`: $border-color
- `$accordion-header-bg`: $white
- `$accordion-header-bg-hover`: $background-color-light
- `$accordion-content-bg`: $accordion-header-bg
- `$accordion-icon-color`: $brand-primary
- `$accordion-icon-size`: $font-size-lg
- `$accordion-header-padding`: $spacer-xs $spacer-lg $spacer-xs $spacer-xs
- `$accordion-content-padding`: $spacer
- `$alert-default`: $brand-primary
- `$alert-success`: $state-success
- `$alert-warning`: $state-warning
- `$alert-danger`: $state-danger
- `$alert-padding`: $spacer
- `$avatar-bg`: $grey
- `$avatar-color`: $white
- `$avatar-sm`: $spacer * 1.5
- `$avatar`: $spacer * 2
- `$avatar-md`: $spacer * 3
- `$avatar-lg`: $spacer * 4
- `$badge-font-size`: $font-size-ti
- `$badge-font-weight`: $bold
- `$badge-height`: $spacer-sm
- `$badge-line-height`: $badge-height
- `$badge-padding`: 0 $spacer / 4
- `$badge-default-color`: $black-pearl
- `$badge-default-bg`: $grey-light
- `$badge-primary-color`: $white
- `$badge-primary-bg`: $brand-primary
- `$badge-secondary-color`: $badge-primary-color
- `$badge-secondary-bg`: $brand-secondary
- `$badge-success-color`: $badge-primary-color
- `$badge-success-bg`: $state-success
- `$badge-warning-color`: $badge-primary-color
- `$badge-warning-bg`: $state-warning
- `$badge-danger-color`: $badge-primary-color
- `$badge-danger-bg`: $state-danger
- `$badge-disabled-color`: $badge-primary-color
- `$badge-disabled-bg`: $grey
- `$breadcrumb-arrow-color`: $grey
- `$card-header-padding`: $spacer-xs
- `$card-content-padding`: $spacer
- `$copyright-color`: $white
- `$copyright-bg`: $overlay-color
- `$copyright-height`: $spacer-md
- `$copyright-font-size`: $font-size-sm
- `$label-font-size`: $font-size-ti
- `$label-font-weight`: $bold
- `$label-height`: $spacer-sm
- `$label-line-height`: $label-height
- `$label-default-color`: $black-pearl
- `$label-default-border`: $grey
- `$label-primary-color`: $brand-primary
- `$label-primary-border`: $label-primary-color
- `$label-secondary-color`: $brand-secondary
- `$label-secondary-border`: $label-secondary-color
- `$label-success-color`: $state-success
- `$label-success-border`: $label-success-color
- `$label-warning-color`: $state-warning
- `$label-warning-border`: $label-warning-color
- `$label-danger-color`: $state-danger
- `$label-danger-border`: $label-danger-color
- `$label-padding`: 0 $spacer / 4
- `$tag-color`: $text-color
- `$tag-bg`: $background-color-light
- `$tag-border`: $border-color
- `$tag-border-focus`: $input-border-focus
- `$tag-placeholder`: $grey
- `$tag-height`: $spacer-md
- `$flyout-bg`: $white
- `$flyout-border`: $border-color
- `$flyout-max-width-sm`: $spacer * 10
- `$flyout-max-width-md`: $spacer * 20
- `$flyout-max-width-lg`: $spacer * 30
- `$flyout-max-height`: $spacer * 9
- `$footer-bg`: $black
- `$footer-color`: $white
- `$footer-height`: $spacer-lg
- `$footer-font-size-sm`: $font-size-ti
- `$footer-font-size-lg`: $font-size-sm
- `$footer-line-height`: $line-height-paragraph
- `$header-height`: $spacer-lg
- `$header-bg`: $white
- `$header-border`: $border-color
- `$spinner-color`: $grey
- `$spinner-size`: $icon-size-lg
- `$spinner-size-sm`: $icon-size-base
- `$spinner-size-lg`: $spinner-size * 2
- `$spinner-animation-name`: fa-spin
- `$spinner-animation-speed`: 1200ms
- `$spinner-animation-timing`: linear
- `$icon-list-color`: $black
- `$icon-list-negative-color`: $white
- `$icon-list-hover-color`: $brand-secondary
- `$icon-list-icon-size`: $icon-size-base
- `$overlay-bg`: $overlay-color
- `$overlay-button-size`: $icon-size-lg
- `$overlay-button-color`: $white
- `$overlay-button-color-hover`: $grey-light
- `$modal-bg`: $white
- `$modal-border`: $border-color
- `$modal-width`: $spacer * 17
- `$modal-width-large`: $spacer * 25
- `$modal-padding`: $spacer
- `$nav-font-weight`: $bold
- `$nav-icon-size`: 1.25rem
- `$nav-border`: $border-color
- `$nav-border-hover`: $brand-primary
- `$nav-color`: $text-color
- `$nav-color-hover`: $brand-primary
- `$nav-color-active`: $nav-color-hover
- `$nav-bg`: transparent
- `$nav-bg-hover`: $grey-lighter
- `$nav-bg-active`: $nav-bg
- `$nav-padding`: $spacer / 3 * 2 $spacer
- `$nav-bg-disabled`: $state-disabled
- `$nav-color-disabled`: $btn-official-color
- `$nav-tab-color-disabled`: $nav-bg-disabled
- `$pagination-font-size`: $btn-font-size
- `$pagination-size`: $spacer-lg
- `$pagination-color`: $btn-primary-color
- `$pagination-color-disabled`: $btn-disabled-color
- `$pagination-bg`: $btn-primary-bg
- `$pagination-bg-disabled`: $btn-disabled-bg
- `$pagination-bg-hover`: mix($pagination-bg, $black, 85%)
- `$pagination-outline-color`: $pagination-bg
- `$pagination-outline-bg`: $btn-transparent-bg
- `$pagination-outline-bg-hover`: mix($pagination-outline-color, $white, 15%)
- `$pagination-outline-border`: $pagination-outline-color
- `$pagination-outline-border-hover`: mix($pagination-outline-border, $black, 85%)
- `$pagination-size-sm`: $spacer-md
- `$pagination-size-lg`: $spacer-xl
- `$step-indicator-color`: $text-color
- `$step-indicator-bg`: $background-color
- `$step-indicator-border`: $border-color
- `$step-indicator-label-color`: $step-indicator-color
- `$step-indicator-color-active`: $text-color
- `$step-indicator-bg-active`: $white
- `$step-indicator-border-active`: $step-indicator-border
- `$step-indicator-label-color-active`: $step-indicator-color-active
- `$step-indicator-color-success`: $white
- `$step-indicator-bg-success`: $state-success
- `$step-indicator-border-success`: $step-indicator-bg-success
- `$step-indicator-label-color-success`: $step-indicator-bg-success
- `$step-indicator-square-size`: $spacer-md
- `$upload-height`: $spacer * 5
- `$upload-padding`: $spacer-md $spacer
- `$upload-color`: $text-color
- `$upload-bg`: $white
- `$upload-bg-hover`: mix($brand-primary, $white, 20%)
- `$upload-border`: $brand-primary
- `$upload-file-color`: $text-color
- `$upload-file-bg`: $background-color-light
- `$upload-file-bg-danger`: mix($state-danger, $white, 10%)
- `$upload-file-color-danger`: $state-danger
- `$gallery-gutter-col`: $spacer
- `$gallery-gutter-row`: $gallery-gutter-col
- `$gallery-item-size`: 100% / 3
- `$slideshow-max-height`: 37.5rem
- `$slideshow-bg`: $black
- `$slideshow-footer-color`: $text-color
- `$slideshow-footer-color-light`: $white
- `$slideshow-arrow-color`: $white

## Base

### Fonts

base/base.fonts

Antwerpen Small

    .css {
      font-family: 'Antwerpen Small';
    }

Antwerpen Regular

    .css {
      font-family: 'Antwerpen Regular';
    }

Antwerpen Tall

    .css {
      font-family: 'Antwerpen Tall';
    }

Sun Antwerpen 100, 200, 300
Sun Antwerpen 100, 200, 300

Sun Antwerpen 400, 500
Sun Antwerpen 400, 500

Sun Antwerpen 600, 700
Sun Antwerpen 600, 700

Sun Antwerpen 800, 900
Sun Antwerpen 800, 900

    .css {
      font-family: 'Sun Antwerpen';
      font-weight: …
    }

    <p>Sun Antwerpen …</p>
    <p><em>Sun Antwerpen …</em></p>

### Antwerpen icons

base/base.antwerpen-icons

- `<i class="icon-a-card"></i>`
- `<i class="icon-akaart-outline"></i>`
- `<i class="icon-akaart-zuilen"></i>`
- `<i class="icon-antwerp"></i>`
- `<i class="icon-calendar"></i>`
- `<i class="icon-career"></i>`
- `<i class="icon-channels"></i>`
- `<i class="icon-communication"></i>`
- `<i class="icon-contact"></i>`
- `<i class="icon-contactbook"></i>`
- `<i class="icon-culture"></i>`
- `<i class="icon-digital-work"></i>`
- `<i class="icon-districts"></i>`
- `<i class="icon-diversity"></i>`
- `<i class="icon-education"></i>`
- `<i class="icon-ewindow-small"></i>`
- `<i class="icon-ewindow"></i>`
- `<i class="icon-finance"></i>`
- `<i class="icon-folder"></i>`
- `<i class="icon-helpcenter"></i>`
- `<i class="icon-ict"></i>`
- `<i class="icon-jobs"></i>`
- `<i class="icon-leisure"></i>`
- `<i class="icon-link"></i>`
- `<i class="icon-map-small"></i>`
- `<i class="icon-map"></i>`
- `<i class="icon-media"></i>`
- `<i class="icon-mobility"></i>`
- `<i class="icon-my-time"></i>`
- `<i class="icon-news-small"></i>`
- `<i class="icon-news"></i>`
- `<i class="icon-ocmw-intranet"></i>`
- `<i class="icon-ocmw-medewerkers"></i>`
- `<i class="icon-personal-news"></i>`
- `<i class="icon-play"></i>`
- `<i class="icon-report"></i>`
- `<i class="icon-reside"></i>`
- `<i class="icon-sanitation"></i>`
- `<i class="icon-search-standard"></i>`
- `<i class="icon-so-intranet"></i>`
- `<i class="icon-social-affairs"></i>`
- `<i class="icon-sports"></i>`
- `<i class="icon-staff"></i>`
- `<i class="icon-time"></i>`
- `<i class="icon-traffic"></i>`
- `<i class="icon-uit-vlieg"></i>`
- `<i class="icon-uit"></i>`
- `<i class="icon-webmail"></i>`
- `<i class="icon-welfare"></i>`
- `<i class="icon-wiki"></i>`
- `<i class="icon-yammer"></i>`

### Layout

base/base.layout
This file contains mostly basic layout-related styling resets, like box model behaviour and such. No need to worry about its contents!

### Media

base/base.media
This file contains mostly basic media-related styling resets, like default behaviour of video and images. No need to worry about its contents!

### Typography

base/base.typography

# Heading 1

    <h1>Heading 1</h1>

    <div class="h1">Heading 1</div>

## Heading 2

    <h2>Heading 2</h2>

    <div class="h2">Heading 2</div>

### Heading 3

    <h3>Heading 3</h3>

    <div class="h3">Heading 3</div>

#### Heading 4

    <h4>Heading 4</h4>

    <div class="h4">Heading 4</div>

##### Heading 5

    <h5>Heading 5</h5>

    <div class="h5">Heading 5</div>

###### Heading 6

    <h6>Heading 6</h6>

    <div class="h6">Heading 6</div>

In some cases, it might be necessary to use the base font as font family for the headings. In that case, add the class `has-base-font` to your heading.

    <h1 class="has-base-font">Heading 1</h1>

    <h2 class="has-base-font">Heading 2</h2>

    <h3 class="has-base-font">Heading 3</h3>

    <h4 class="has-base-font">Heading 4</h4>

    <h5 class="has-base-font">Heading 5</h5>

    <h6 class="has-base-font">Heading 6</h6>

Paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <p>Paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</p>

> Blockquote: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae. Publius Vergilius Maro

    <blockquote>
        <p>Blockquote: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.</p>
        <p>Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</p>
        <cite>Publius Vergilius Maro</cite>
    </blockquote>

Small paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <p><small>Small paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</small></p>

    <p class="small">Small paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</p>

Mark

    <mark>Mark</mark>

    <hr>

This is how a link looks like (hover me)

    <a href="#">This is how a link looks like (hover me)</a>

## Utilities

### Background

utilities/utilities.background

Classes that allow you to quickly change the background color of an element.

`.u-bg`

    <div class="u-bg">.u-bg</div>

`.u-bg-black`

    <div class="u-bg-black">.u-bg-black</div>

`.u-bg-danger`

    <div class="u-bg-danger">.u-bg-danger</div>

`.u-bg-light`

    <div class="u-bg-light">.u-bg-light</div>

`.u-bg-primary`

    <div class="u-bg-primary">.u-bg-primary</div>

`.u-bg-secondary`

    <div class="u-bg-secondary">.u-bg-secondary</div>

`.u-bg-success`

    <div class="u-bg-success">.u-bg-success</div>

`.u-bg-warning`

    <div class="u-bg-warning">.u-bg-warning</div>

`.u-bg-white`

    <div class="u-bg-white">.u-bg-white</div>

### Layout

utilities/utilities.layout

The `.u-wrapper` class makes sure that all content can flow next to the "Antwerp" logo (above 30rem). It does not provide extra padding for smaller screens.

    <div class="u-wrapper">
      ...
    </div>

The `.u-container` class makes sure that all content stays centered. It provides extra padding for smaller screens so that your content doesn't stick to the boundaries of your screen.

    <div class="u-container">
      ...
    </div>

Note that `.u-wrapper` and `.u-container` can work perfectly together as illustrated in the example.

    <div class="u-wrapper">
      <div class="u-container">
        ...
      </div>
    </div>

The `.u-no-scroll` class will clip content when an element's content is too big to fit in the given area.

    <div class="u-no-scroll">
      ...
    </div>

The `.u-horizontal-scroll` class makes sure your content box will only scroll horizontally.

    <div class="u-horizontal-scroll">
      ...
    </div>

The `.u-vertical-scroll` class makes sure your content box will only scroll vertically.

    <div class="u-vertical-scroll">
      ...
    </div>

The `.u-viewport-vertical` class makes sure your content box will be as high as the viewport (height).

    <div class="u-viewport-vertical">
      ...
    </div>

The `.u-clearfix` class will force an element to self-clear its children.

Note that you can also use the `clearfix` mixin.

    <div class="u-clearfix">
      ...
    </div>

    .css {
      @include clearfix;
    }

`.u-screen-reader-only` is an accessiblity class and can be used to hide information intended only for screen readers.

Note that we offer this also as a Sass placeholder, so you can `@extend` it in your own class.

    <div class="u-screen-reader-only">
      ...
    </div>

    .css {
      @extend %u-screen-reader-only;
    }

### Spacing

utilities/utilities.spacing

Helper classes for adding or removing space between elements.

`.u-margin`

    <div class="u-margin">.u-margin</div>

`.u-margin-bottom`

    <div class="u-margin-bottom">.u-margin-bottom</div>

`.u-margin-bottom-lg`

    <div class="u-margin-bottom-lg">.u-margin-bottom-lg</div>

`.u-margin-bottom-xs`

    <div class="u-margin-bottom-xs">.u-margin-bottom-xs</div>

`.u-margin-bottom-xx`

    <div class="u-margin-bottom-xx">.u-margin-bottom-xx</div>

`.u-margin-left`

    <div class="u-margin-left">.u-margin-left</div>

`.u-margin-left-lg`

    <div class="u-margin-left-lg">.u-margin-left-lg</div>

`.u-margin-left-xs`

    <div class="u-margin-left-xs">.u-margin-left-xs</div>

`.u-margin-left-xx`

    <div class="u-margin-left-xx">.u-margin-left-xx</div>

`.u-margin-lg`

    <div class="u-margin-lg">.u-margin-lg</div>

`.u-margin-right`

    <div class="u-margin-right">.u-margin-right</div>

`.u-margin-right-lg`

    <div class="u-margin-right-lg">.u-margin-right-lg</div>

`.u-margin-right-xs`

    <div class="u-margin-right-xs">.u-margin-right-xs</div>

`.u-margin-right-xx`

    <div class="u-margin-right-xx">.u-margin-right-xx</div>

`.u-margin-top`

    <div class="u-margin-top">.u-margin-top</div>

`.u-margin-top-lg`

    <div class="u-margin-top-lg">.u-margin-top-lg</div>

`.u-margin-top-xs`

    <div class="u-margin-top-xs">.u-margin-top-xs</div>

`.u-margin-top-xx`

    <div class="u-margin-top-xx">.u-margin-top-xx</div>

`.u-margin-xs`

    <div class="u-margin-xs">.u-margin-xs</div>

`.u-margin-xx`

    <div class="u-margin-xx">.u-margin-xx</div>

`.u-no-margin`

    <div class="u-no-margin">.u-no-margin</div>

`.u-no-margin-bottom`

    <div class="u-no-margin-bottom">.u-no-margin-bottom</div>

`.u-no-margin-left`

    <div class="u-no-margin-left">.u-no-margin-left</div>

`.u-no-margin-right`

    <div class="u-no-margin-right">.u-no-margin-right</div>

`.u-no-margin-top`

    <div class="u-no-margin-top">.u-no-margin-top</div>

### Text

utilities/utilities.text

Helper classes for changing the appearance of text.

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-bold">.u-text-bold</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-capitalize">.u-text-capitalize</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-center">.u-text-center</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-danger">.u-text-danger</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-italic">.u-text-italic</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-justify">.u-text-justify</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-left">.u-text-left</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-light">.u-text-light</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-lowercase">.u-text-lowercase</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-primary">.u-text-primary</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-readable">.u-text-readable</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-right">.u-text-right</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-secondary">.u-text-secondary</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-success">.u-text-success</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

Note that we offer this also as a Sass placeholder, so you can `@extend` it in your own class.

    <p class="u-text-truncate">.u-text-truncate</p>

    .css {
      @extend %u-text-truncate;
    }

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-underline">.u-text-underline</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-uppercase">.u-text-uppercase</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <p class="u-text-warning">.u-text-warning</p>

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

Note that the grey background color is for displaying purposes only.

    <p class="u-text-xlight">.u-text-xlight</p>

## Atoms

### Addon

atoms/atoms.addon
Addons are small pieces that can be added before or after an input field. Check out code examples of how to implement them in your design in the input section.

### Avatar

atoms/atoms.avatar
T

    <div class="a-avatar">
      <img src="..." alt="..." />
    </div>

    <a href="#">
      <span class="a-avatar">
        <img src="..." alt="..." />
      </span>
    </a>

    <div class="a-avatar">
      <span class="a-avatar__icon">
        <i class="fa fa-user"></i>
      </span>
    </div>

    <div class="a-avatar">
      <span class="a-avatar__letter">T</span>
    </div>

    <div class="a-avatar a-avatar--small">
      <img src="..." alt="..." />
    </div>

    <a href="#">
      <span class="a-avatar a-avatar--small">
        <img src="..." alt="..." />
      </span>
    </a>

    <div class="a-avatar a-avatar--medium">
      <img src="..." alt="..." />
    </div>

    <a href="#">
      <span class="a-avatar a-avatar--medium">
        <img src="..." alt="..." />
      </span>
    </a>

    <div class="a-avatar a-avatar--large">
      <img src="..." alt="..." />
    </div>

    <a href="#">
      <span class="a-avatar a-avatar--large">
        <img src="..." alt="..." />
      </span>
    </a>

### Badge

atoms/atoms.badge
10

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

11

    <span class="a-badge a-badge--primary">11</span>

12

    <span class="a-badge a-badge--secondary">12</span>

13

    <span class="a-badge a-badge--success">13</span>

14

    <span class="a-badge a-badge--warning">14</span>

15

    <span class="a-badge a-badge--danger">15</span>

### Button

atoms/atoms.button

#### Regular buttons

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

    <button class="a-button" disabled>Secondary button</button>

    <button class="a-button a-button--secondary">Secondary button</button>

    <button class="a-button a-button--success">Success button</button>

    <button class="a-button a-button--warning">Warning button</button>

    <button class="a-button a-button--danger">Danger button</button>

    <button class="a-button a-button--transparent">Transparent button</button>

#### Negative buttons

    <button class="a-button-negative">Primary button</button>

    <button class="a-button-negative" disabled>Secondary button</button>

    <button class="a-button-negative a-button--secondary">Secondary button</button>

    <button class="a-button-negative a-button--success">Success button</button>

    <button class="a-button-negative a-button--warning">Warning button</button>

    <button class="a-button-negative a-button--danger">Danger button</button>

#### Outline buttons

    <button class="a-button-outline">Primary button</button>

    <button class="a-button-outline" disabled>Secondary button</button>

    <button class="a-button-outline a-button--secondary">Secondary button</button>

    <button class="a-button-outline a-button--success">Success button</button>

    <button class="a-button-outline a-button--warning">Warning button</button>

    <button class="a-button-outline a-button--danger">Danger button</button>

#### Button sizes

    <button class="a-button a-button--large">Large button</button>

    <button class="a-button a-button--small">Small button</button>

    <button class="a-button a-button--tiny">Tiny button</button>

#### Full width buttons

    <button class="a-button a-button--block">Block button</button>

#### Icon buttons

Note that the button sizes are omitted in the code examples. Just add the `.a-button--large`, `.a-button--small` or `.a-button--tiny` class to achieve the wanted result.

    <button class="a-button has-icon-left">
      <i class="fa fa-arrow-left"></i>
      Icon left
    </button>

    <button class="a-button-negative has-icon-left">
      <i class="fa fa-arrow-left"></i>
      Icon left
    </button>

    <button class="a-button-outline has-icon-left">
      <i class="fa fa-arrow-left"></i>
      Icon left
    </button>

    <button class="a-button has-icon-right">
      <i class="fa fa-arrow-right"></i>
      Icon right
    </button>

    <button class="a-button-negative has-icon-right">
      <i class="fa fa-arrow-right"></i>
      Icon right
    </button>

    <button class="a-button-outline has-icon-right">
      <i class="fa fa-arrow-right"></i>
      Icon right
    </button>

    <button class="a-button has-icon">
      <i class="fa fa-download"></i>
    </button>

    <button class="a-button-negative has-icon">
      <i class="fa fa-download"></i>
    </button>

    <button class="a-button-outline has-icon">
      <i class="fa fa-download"></i>
    </button>

    <button class="a-button has-icon-right">
      <i class="fa fa-circle-o-notch fa-spin"></i>
      Loading
    </button>

    <button class="a-button a-button--default has-icon">
      <i class="fa fa-download"></i>
    </button>

    <button class="a-button-transparent a-button--default has-icon">
      <i class="fa fa-close"></i>
    </button>

    <button class="a-button-transparent has-icon">
      <i class="fa fa-close"></i>
    </button>

    <button class="a-button-transparent a-button--success has-icon">
      <i class="fa fa-close"></i>
    </button>

    <button class="a-button-transparent a-button--warning has-icon">
      <i class="fa fa-close"></i>
    </button>

    <button class="a-button-transparent a-button--danger has-icon">
      <i class="fa fa-close"></i>
    </button>

#### Official button

    <button class="a-button-official">
      Log in with A-profile
    </button>

#### Social buttons

    <a href="#" class="a-button a-button--facebook has-icon">
      <i class="fa fa-facebook"></i>
    </a>

    <a href="#" class="a-button a-button--twitter has-icon">
      <i class="fa fa-twitter"></i>
    </a>

    <a href="#" class="a-button a-button--linkedin has-icon">
      <i class="fa fa-linkedin"></i>
    </a>

    <a href="#" class="a-button a-button--instagram has-icon">
      <i class="fa fa-instagram"></i>
    </a>

    <a href="#" class="a-button a-button--google has-icon">
      <i class="fa fa-google-plus"></i>
    </a>

    <a href="#" class="a-button a-button--snapchat has-icon">
      <i class="fa fa-snapchat-ghost"></i>
    </a>

### Code

atoms/atoms.code

Type `npm install` in your command line.

    Type <code>npm install</code> in your command line.

To copy-paste, first type `CMD-C` and then `CMD-V`.

    To copy-paste, first type <kbd>CMD-C</kbd> and then <kbd>CMD-V</kbd>.

The error message simply said: `An error has occurred`.

    The error message simply said: <samp>An error has occurred</samp>.

                               ''~``
                              ( o o )
    +--------------------.oooO--(_)--Oooo.--------------------+
    |                                                         |
    |                      .oooO                              |
    |                      (   )   Oooo.                      |
    +-----------------------\ (----(   )----------------------+
                             \_)    ) /
                                   (_/

    <pre class="a-pre a-pre--scrollable">
      ...
    </pre>

    var add = (function () {
      var counter = 0;
      return function () {
        return counter += 1;
      }
    })();

    <pre class="a-pre a-pre--scrollable">
      <code>
        var add = (function () {
          var counter = 0;
          return function () {
            return counter += 1;
          }
        })();
      </code>
    </pre>

Note that removing the `.a-pre--scrollable` class will enable wrapping.

### Copyright

atoms/atoms.copyright
Jasper Van Proeyen

    <div class="a-copyright">
      <div class="a-copyright__sign">
        <span class="fa fa-copyright"></span>
      </div>
      <span class="a-copyright__label">Jasper Van Proeyen</span>
    </div>

### Form

atoms/atoms.form
Use the `.a-form` class as a wrapper around `.a-input` classes to automatically create spacing between your form elements.

    <form class="a-form">
      <div class="a-input">...</div>
      <div class="a-input">...</div>
      ...
    </form>

Optional legend Your form here

    <fieldset>
      <legend>Optional legend</legend>
      ...
    </fieldset>

### Input

atoms/atoms.input

#### Standard input fields

Text field Input description

    <div class="a-input">
      <label class="a-input__label" for="text-field">Text field</label>
      <input type="text" name="text-field" id="text-field" placeholder="Placeholder" />
      <small>Input description</small>
    </div>

Note that all input types are supported and it is encouraged to use them appropriately: `text`, `password`, `datetime,` `datetime-local`, `date`, `month`, `time`, `week`, `number`, `email`, `url`, `search`, `tel` and `color`.

Required text field

    <div class="a-input is-required">
      <label class="a-input__label" for="required-text-field">Required text field</label>
      <input type="text" name="required-text-field" id="required-text-field" placeholder="Placeholder" />
    </div>

Inline text field

    <div class="a-input a-input--inline">
      <label class="a-input__label a-input__label--inline" for="inline-text-field">Inline text field</label>
      <input type="text" name="inline-text-field" id="inline-text-field" placeholder="Placeholder" />
    </div>

Input checkbox
Option one
Option two contains a bit more text, so we can test its behaviour on smaller devices.
Option three is disabled
Option four is checked and disabled

    <div class="a-input">
      <label class="a-input__label" for="input-text">Input checkbox</label>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox1" name="input-checkbox" checked="">
        <label for="checkbox1">Option one</label>
      </div>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox2" name="input-checkbox">
        <label for="checkbox2">Option two contains a bit more text, so we can test its behaviour on smaller devices.</label>
      </div>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox3" name="input-checkbox" disabled="">
        <label for="checkbox3">Option three is disabled</label>
      </div>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox4" name="input-checkbox" checked="" disabled="">
        <label for="checkbox4">Option four is checked and disabled</label>
      </div>
    </div>

Input radio button
Option one
Option two contains a bit more text, so we can test its behaviour on smaller devices.
Option three is disabled
Separate radio button that is checked and disabled

    <div class="a-input">
      <label class="a-input__label" for="input-text">Input radio button</label>
      <div class="a-input__radio">
        <input type="radio" id="radio1" name="input-radio" checked="">
        <label for="radio1">Option one</label>
      </div>
      <div class="a-input__radio">
        <input type="radio" id="radio2" name="input-radio">
        <label for="radio2">Option two contains a bit more text, so we can test its behaviour on smaller devices.</label>
      </div>
      <div class="a-input__radio">
        <input type="radio" id="radio3" name="input-radio" disabled="">
        <label for="radio3">Option three is disabled</label>
      </div>
      <div class="a-input__radio">
        <input type="radio" id="radio4" name="input-radio2" checked="" disabled="">
        <label for="radio4">Separate radio button that is checked and disabled</label>
      </div>
    </div>

Text area

    <div class="a-input">
      <label class="a-input__label" for="input-textarea">Text area</label>
      <textarea name="input-textarea" id="input-textarea" placeholder="Placeholder"></textarea>
    </div>

Select with options

    <div class="a-input has-icon-right">
      <label class="a-input__label" for="input-select">Select with options</label>
      <div class="a-input__wrapper">
        <select name="input-select" id="input-select">
          <option disabled selected>Make your choice...</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4" disabled>Option 4 disabled</option>
          <option value="5">Option 5</option>
        </select>
        <span class="fa fa-angle-down"></span>
      </div>
    </div>

Inline select with options

    <div class="a-input has-icon-right a-input--inline">
      <label class="a-input__label a-input__label--inline" for="inline-text-field">Inline select input</label>
      <div class="a-input__wrapper a-input__wrapper--inline">
        <select name="input-select" id="input-select">
          <option disabled selected>Make your choice...</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
          <option value="4" disabled>Option 4 disabled</option>
          <option value="5">Option 5</option>
        </select>
        <span class="fa fa-angle-down"></span>
      </div>
    </div>

#### Input field sizes

Small text field
Small select with options
Small text area

    <div class="a-input a-input--small">
      <label class="a-input__label" for="text-field">Text field</label>
      <input type="text" name="text-field" id="text-field" placeholder="Placeholder" />
    </div>

    <div class="a-input a-input--small has-icon-right">
      <label class="a-input__label" for="input-select">Select with options</label>
      <div class="a-input__wrapper">
        <select name="input-select" id="input-select">
          ...
        </select>
        <span class="fa fa-angle-down"></span>
      </div>
    </div>

    <div class="a-input a-input--small">
      <label class="a-input__label" for="input-textarea">Text area</label>
      <textarea name="input-textarea" id="input-textarea" placeholder="Placeholder"></textarea>
    </div>

Large text field
Large select with options
Large text area

    <div class="a-input a-input--large">
      <label class="a-input__label" for="text-field">Text field</label>
      <input type="text" name="text-field" id="text-field" placeholder="Placeholder" />
    </div>

    <div class="a-input a-input--large has-icon-right">
      <label class="a-input__label" for="input-select">Select with options</label>
      <div class="a-input__wrapper">
        <select name="input-select" id="input-select">
          ...
        </select>
        <span class="fa fa-angle-down"></span>
      </div>
    </div>

    <div class="a-input a-input--large">
      <label class="a-input__label" for="input-textarea">Text area</label>
      <textarea name="input-textarea" id="input-textarea" placeholder="Placeholder"></textarea>
    </div>

#### Input icons and addons

Text field with left icon

    <div class="a-input has-icon-left">
      <label class="a-input__label" for="text-field-icon-left">Text field with left icon</label>
      <div class="a-input__wrapper">
        <span class="fa fa-user"></span>
        <input type="text" name="text-field-icon-left" id="text-field-icon-left" placeholder="Placeholder" />
      </div>
    </div>

Text field with right icon

    <div class="a-input has-icon-right">
      <label class="a-input__label" for="text-field-icon-right">Text field with right icon</label>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-icon-right" id="text-field-icon-right" placeholder="Placeholder" />
        <span class="fa fa-eye"></span>
      </div>
    </div>

Text field with left addon
€

    <div class="a-input has-addon">
      <label class="a-input__label" for="text-field-addon-left">Text field with left addon</label>
      <div class="a-input__wrapper">
        <div class="a-input__addon">&euro;</div>
        <input type="text" name="text-field-addon-left" id="text-field-addon-left" placeholder="Placeholder" />
      </div>
    </div>

Text field with right addon
km

    <div class="a-input has-addon">
      <label class="a-input__label" for="text-field-addon-right">Text field with right addon</label>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-addon-right" id="text-field-addon-right" placeholder="Placeholder" />
        <div class="a-input__addon">km</div>
      </div>
    </div>

#### Input states

Success text field

    <div class="a-input has-success">
      <label class="a-input__label" for="text-field-success">Success text field</label>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-success" id="text-field-success" placeholder="Placeholder" />
      </div>
    </div>

Warning text field

    <div class="a-input has-warning">
      <label class="a-input__label" for="text-field-warning">Warning text field</label>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-warning" id="text-field-warning" placeholder="Placeholder" />
      </div>
    </div>

Error text field

    <div class="a-input has-error">
      <label class="a-input__label" for="text-field-error">Error text field</label>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-error" id="text-field-error" placeholder="Placeholder" />
      </div>
    </div>

### Label

atoms/atoms.label
Default label

    <span class="a-label">Default label</span>

Primary label

    <span class="a-label a-label--primary">Primary label</span>

Secondary label

    <span class="a-label a-label--secondary">Secondary label</span>

Success label

    <span class="a-label a-label--success">Success label</span>

Warning label

    <span class="a-label a-label--warning">Warning label</span>

Danger label

    <span class="a-label a-label--danger">Danger label</span>

### Link

atoms/atoms.link

This is a nice link

    <a href="#">
      This is a nice link
    </a>

This is a nice link with an icon to the left

    <a href="#" class="has-icon-left">
      <i class="fa fa-angle-left"></i>This is a nice link with an icon to the left
    </a>

This is a nice link with an icon to the right

    <a href="#" class="has-icon-right">
      This is a nice link with an icon to the right<i class="fa fa-external-link"></i>
    </a>

### List

atoms/atoms.list

#### Standard lists

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

1. First item
2. Second item
   1. First subitem
   2. Second subitem
3. Third item
4. Fourth item

    <ul class="a-list">
      <li>First item</li>
      <li>Second item
        <ul class="a-list">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ul>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>

    <ol class="a-list">
      <li>First item</li>
      <li>Second item
        <ol class="a-list">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ol>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ol>

    .css {
      @extend %a-list;
    }

#### List variations

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list a-list--reset">
      <li>First item</li>
      <li>Second item
        <ul class="a-list">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ul>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>

    .css {
      @extend %a-list--reset;
    }

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list a-list--unstyled">
      <li>First item</li>
      <li>Second item
        <ul class="a-list">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ul>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>

    .css {
      @extend %a-list--unstyled;
    }

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list a-list--flattened">
      <li>First item</li>
      <li>Second item
        <ul class="a-list">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ul>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>

    .css {
      @extend %a-list--flattened;
    }

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list a-list--primary">
      <li>First item</li>
      <li>Second item
        <ul class="a-list">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ul>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>

    .css {
      @extend %a-list--primary;
    }

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list a-list--lined">
      <li>First item</li>
      <li>Second item
        <ul class="a-list a-list--lined">
          <li>First subitem</li>
          <li>Second subitem</li>
        </ul>
      </li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>

    .css {
      @extend %a-list--lined;
    }

#### Icon lists

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list has-icon-left">
      <li><i class="fa fa-angle-left"></i>First item</li>
      <li><i class="fa fa-angle-left"></i>Second item
        <ul class="a-list">
          <li><i class="fa fa-angle-left"></i>First subitem</li>
          <li><i class="fa fa-angle-left"></i>Second subitem</li>
        </ul>
      </li>
      <li><i class="fa fa-angle-left"></i>Third item</li>
      <li><i class="fa fa-angle-left"></i>Fourth item</li>
    </ul>

    <ul class="a-list has-icon-right">
      <li>First item<i class="fa fa-angle-right"></i></li>
      <li>Second item<i class="fa fa-angle-right"></i>
        <ul class="a-list">
          <li>First subitem<i class="fa fa-angle-right"></i></li>
          <li>Second subitem<i class="fa fa-angle-right"></i></li>
        </ul>
      </li>
      <li>Third item<i class="fa fa-angle-right"></i></li>
      <li>Fourth item<i class="fa fa-angle-right"></i></li>
    </ul>

#### List combinations

- First item
- Second item
  - First subitem
  - Second subitem
- Third item
- Fourth item

    <ul class="a-list a-list--lined has-icon-left">
      <li><i class="fa fa-angle-left">First item</li>
      <li><i class="fa fa-angle-left">Second item
        <ul class="a-list a-list--lined has-icon-left">
          <li><i class="fa fa-angle-left">First subitem</li>
          <li><i class="fa fa-angle-left">Second subitem</li>
        </ul>
      </li>
      <li><i class="fa fa-angle-left">Third item</li>
      <li><i class="fa fa-angle-left">Fourth item</li>
    </ul>

    .css {
      @extend %a-list--lined has-icon-left;
    }

#### Definition list

Name:
  Sander
Surname:
  Geenen
Address:
  [Private]

    <dl class="a-definition-list">
      <dt>Name:</dt>
        <dd>Sander</dd>
      <dt>Surname:</dt>
        <dd>Geenen</dd>
      <dt>Address:</dt>
        <dd>[Private]</dd>
    </dl>

### Radio button / checkbox

atoms/atoms.radio-checkbox
As these are two types of input fields, you can check out code examples there, in the input section.

### Spinner

atoms/atoms.spinner

    <div class="a-spinner"></div>

    <div class="a-spinner a-spinner--sm"></div>

Note that the large spinner can be used only once per page and only for indicating that the complete page is loading.

    <div class="a-spinner a-spinner--lg"></div>

### Switch

atoms/atoms.switch
Switch
Off
On

    <div class="a-input">
      <label class="a-input__label">Switch</label>
      <div class="a-switch">
        <label class="a-switch__label">Off</label>
        <div class="a-switch__toggle">
          <input type="checkbox" name="switch1" id="switch1">
          <label for="switch1"></label>
        </div>
        <label class="a-switch__label">On</label>
      </div>
    </div>

Disabled switch
On
Off

    <div class="a-input">
      <label class="a-input__label">Disabled switch</label>
      <div class="a-switch">
        <label class="a-switch__label">On</label>
        <div class="a-switch__toggle">
          <input type="checkbox" name="switch2" id="switch2" disabled>
          <label for="switch2"></label>
        </div>
        <label class="a-switch__label">Off</label>
      </div>
    </div>

### Table

atoms/atoms.table

#### Standard tables

Standard table | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table">
      <thead>
        <tr>
          <th>Standard table</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

More compact table | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table a-table--small">
      <thead>
        <tr>
          <th>More compact table</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

#### Table schemes

Primary table | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table a-table--primary">
      <thead>
        <tr>
          <th>Primary table</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

Secondary table | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table a-table--secondary">
      <thead>
        <tr>
          <th>Secondary table</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

Striped table | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table a-table--striped">
      <thead>
        <tr>
          <th>Striped table</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>

#### Table cell options

Condensed table cells | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table">
      <thead>
        <tr>
          <th class="is-condensed">Condensed table cells</th>
          <th class="is-condensed">...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="is-condensed">...</td>
          <td class="is-condensed">...</td>
        </tr>
        <tr>
          <td class="is-condensed">...</td>
          <td class="is-condensed">...</td>
        </tr>
        <tr>
          <td class="is-condensed">...</td>
          <td class="is-condensed">...</td>
        </tr>
      </tbody>
    </table>

Table cells without padding | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <table class="a-table">
      <thead>
        <tr>
          <th class="has-no-padding">Table cells without padding</th>
          <th class="has-no-padding">...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="has-no-padding">...</td>
          <td class="has-no-padding">...</td>
        </tr>
        <tr>
          <td class="has-no-padding">...</td>
          <td class="has-no-padding">...</td>
        </tr>
        <tr>
          <td class="has-no-padding">...</td>
          <td class="has-no-padding">...</td>
        </tr>
      </tbody>
    </table>

#### Responsive wrapper for tables

Responsive table | Publius Vergilius Maro
--- | ---
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. | Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

    <div class="a-table__wrapper-responsive">
      <table class="a-table">
        <thead>
          <tr>
            <th>Responsive table</th>
            <th>...</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>...</td>
            <td>...</td>
          </tr>
          <tr>
            <td>...</td>
            <td>...</td>
          </tr>
          <tr>
            <td>...</td>
            <td>...</td>
          </tr>
        </tbody>
      </table>
    </div>

### Timepicker

atoms/atoms.timepicker
Hours
:
Minutes

    <div class="a-timepicker">
      <div class="a-input has-icon-right">
        <label class="a-input__label" for="input-hours">Hours</label>
        <div class="a-input__wrapper">
          <select name="input-hours" id="input-houres">
            <option value="" disabled selected>hh</option>
            <option value="...">...</option>
          </select>
          <span class="fa fa-angle-down"></span>
        </div>
      </div>
      <span class="a-timepicker__separator">:</span>
      <div class="a-input has-icon-right">
        <label class="a-input__label" for="input-minutes">Minutes</label>
        <div class="a-input__wrapper">
          <select name="input-minutes" id="input-minutes">
            <option value="" disabled selected>mm</option>
            <option value="...">...</option>
          </select>
          <span class="fa fa-angle-down"></span>
        </div>
      </div>
    </div>

### Toggle

atoms/atoms.toggle

    <div class="a-toggle has-icon">
      <input class="a-toggle__checkbox" id="icon-toggle" type="checkbox">
      <div class="a-toggle__labels">
        <label for="icon-toggle" class="a-toggle__on a-button has-icon">
          <i class="fa fa-bars"></i>
        </label>
        <label for="icon-toggle" class="a-toggle__off a-button a-button--danger has-icon">
          <i class="fa fa-close"></i>
        </label>
      </div>
    </div>

    <div class="a-toggle a-toggle--large has-icon">
      <input class="a-toggle__checkbox" id="icon-toggle-large" type="checkbox">
      <div class="a-toggle__labels">
        <label for="icon-toggle-large" class="a-toggle__on a-button a-button--large has-icon">
          <i class="fa fa-bars"></i>
        </label>
        <label for="icon-toggle-large" class="a-toggle__off a-button a-button--danger a-button--large has-icon">
          <i class="fa fa-close"></i>
        </label>
      </div>
    </div>

    <div class="a-toggle a-toggle--small has-icon">
      <input class="a-toggle__checkbox" id="icon-toggle-small" type="checkbox">
      <div class="a-toggle__labels">
        <label for="icon-toggle-small" class="a-toggle__on a-button a-button--small has-icon">
          <i class="fa fa-bars"></i>
        </label>
        <label for="icon-toggle-small" class="a-toggle__off a-button a-button--danger a-button--small has-icon">
          <i class="fa fa-close"></i>
        </label>
      </div>
    </div>

    <div class="a-toggle a-toggle--tiny has-icon">
      <input class="a-toggle__checkbox" id="icon-toggle-tiny" type="checkbox">
      <div class="a-toggle__labels">
        <label for="icon-toggle-tiny" class="a-toggle__on a-button a-button--tiny has-icon">
          <i class="fa fa-bars"></i>
        </label>
        <label for="icon-toggle-tiny" class="a-toggle__off a-button a-button--danger a-button--tiny has-icon">
          <i class="fa fa-close"></i>
        </label>
      </div>
    </div>

Open Close

    <div class="a-toggle">
      <input class="a-toggle__checkbox" id="toggle-normal" type="checkbox">
      <div class="a-toggle__labels">
        <label for="toggle-normal" class="a-toggle__on a-button has-icon-left">
          <i class="fa fa-bars"></i>
          Open
        </label>
        <label for="toggle-normal" class="a-toggle__off a-button a-button--danger has-icon-left">
          <i class="fa fa-close"></i>
          Close
        </label>
      </div>
    </div>

### Tooltip

atoms/atoms.tooltip
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.

    <div class="a-tooltip a-tooltip--top-right">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--primary a-tooltip--top">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--secondary a-tooltip--top-left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.

    <div class="a-tooltip a-tooltip--bottom-right">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--primary a-tooltip--bottom">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--secondary a-tooltip--bottom-left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.

    <div class="a-tooltip a-tooltip--left-bottom">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip  a-tooltip--primary a-tooltip--left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--secondary a-tooltip--left-top">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum nihil perspiciatis molestias mollitia.

    <div class="a-tooltip a-tooltip--right-bottom">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--primary a-tooltip--right">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

    <div class="a-tooltip a-tooltip--secondary a-tooltip--right-top">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eum <a href="#">nihil perspiciatis</a> molestias mollitia.
    </div>

## Molecules

### Accordion

molecules/molecules.accordion
Aeneis

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

De Bello Gallico
...
Odes
...

    <div class="m-accordion">
      <div class="m-accordion__tab is-open">
        <div class="m-accordion__header">
          Aeneis
        </div>
        <div class="m-accordion__content">
          <div class="u-margin">
            ...
          </div>
        </div>
      </div>
      <div class="m-accordion__tab">
        <div class="m-accordion__header">
          De Bello Gallico
        </div>
        <div class="m-accordion__content">
          ...
        </div>
      </div>
      <div class="m-accordion__tab">
        <div class="m-accordion__header">
          Odes
        </div>
        <div class="m-accordion__content">
          ...
        </div>
      </div>
    </div>

### Alert

molecules/molecules.alert

##### Alert

Some explanation.

    <div class="m-alert">
      <button class="a-button-transparent has-icon m-alert__close"><i class="fa fa-close"></i></button>
      <h5 class="u-margin-bottom-xs">Alert</h5>
      <p class="u-margin-bottom">Some explanation.</p>
      <div class="m-alert__actions">
        <button class="a-button-outline a-button--small">Cancel</button>
        <button class="a-button a-button--small">Got it</button>
      </div>
    </div>

##### Success alert

Some explanation.

    <div class="m-alert m-alert--success">
      <button class="a-button-transparent a-button--success has-icon m-alert__close"><i class="fa fa-close"></i></button>
      <h5 class="u-margin-bottom-xs">Success alert</h5>
      <p class="u-margin-bottom">Some explanation.</p>
      <div class="m-alert__actions">
        <button class="a-button-outline a-button--success a-button--small">Cancel</button>
        <button class="a-button a-button--success a-button--small">Got it</button>
      </div>
    </div>

##### Warning alert

Some explanation.

    <div class="m-alert m-alert--warning">
      <button class="a-button-transparent a-button--warning has-icon m-alert__close"><i class="fa fa-close"></i></button>
      <h5 class="u-margin-bottom-xs">Warning alert</h5>
      <p class="u-margin-bottom">Some explanation.</p>
      <div class="m-alert__actions">
        <button class="a-button-outline a-button--warning a-button--small">Cancel</button>
        <button class="a-button a-button--warning a-button--small">Got it</button>
      </div>
    </div>

##### Danger alert

Some explanation.

    <div class="m-alert m-alert--danger">
      <button class="a-button-transparent a-button--danger has-icon m-alert__close"><i class="fa fa-close"></i></button>
      <h5 class="u-margin-bottom-xs">Danger alert</h5>
      <p class="u-margin-bottom">Some explanation.</p>
      <div class="m-alert__actions">
        <button class="a-button-outline a-button--danger a-button--small">Cancel</button>
        <button class="a-button a-button--danger a-button--small">Got it</button>
      </div>
    </div>

### Breadcrumb

molecules/molecules.breadcrumb

    <ul class="m-breadcrumbs">
      <li><a href="#">Home</a></li>
      <li><a href="#">Styleguide</a></li>
      <li><a href="#">Molecules</a></li>
      <li>Breadcrumb</li>
    </ul>

### Button group

molecules/molecules.button-group

Note that all button variations are possible in button groups. Go to the buttons section to check out all possibilities.

    <div class="m-button-group">
      <button class="a-button">Primary</button>
      <button class="a-button">Button</button>
      <button class="a-button">Group</button>
    </div>

    <div class="m-button-group">
      <button class="a-button-negative">Primary</button>
      <button class="a-button-negative">Button</button>
      <button class="a-button-negative">Group</button>
    </div>

    <div class="m-button-group">
      <button class="a-button-outline">Primary</button>
      <button class="a-button-outline">Button</button>
      <button class="a-button-outline">Group</button>
    </div>

    <div class="m-button-group m-button-group--vertical">
      <button class="a-button">Primary</button>
      <button class="a-button">Button</button>
      <button class="a-button">Group</button>
    </div>

    <div class="m-button-group m-button-group--vertical">
      <button class="a-button-negative">Primary</button>
      <button class="a-button-negative">Button</button>
      <button class="a-button-negative">Group</button>
    </div>

    <div class="m-button-group m-button-group--vertical">
      <button class="a-button-outline">Primary</button>
      <button class="a-button-outline">Button</button>
      <button class="a-button-outline">Group</button>
    </div>

### Button list

molecules/molecules.button-list

    <ul class="m-button-list">
      <li><a href="#" class="a-button a-button--facebook has-icon"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="a-button a-button--twitter has-icon"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="a-button a-button--linkedin has-icon"><i class="fa fa-linkedin"></i></a></li>
      <li><a href="#" class="a-button a-button--instagram has-icon"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#" class="a-button a-button--google has-icon"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="a-button a-button--snapchat has-icon"><i class="fa fa-snapchat-ghost"></i></a></li>
    </ul>

    <ul class="m-button-list m-button-list--horizontal">
      <li><a href="#" class="a-button a-button--facebook has-icon"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#" class="a-button a-button--twitter has-icon"><i class="fa fa-twitter"></i></a></li>
      <li><a href="#" class="a-button a-button--linkedin has-icon"><i class="fa fa-linkedin"></i></a></li>
      <li><a href="#" class="a-button a-button--instagram has-icon"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#" class="a-button a-button--google has-icon"><i class="fa fa-google-plus"></i></a></li>
      <li><a href="#" class="a-button a-button--snapchat has-icon"><i class="fa fa-snapchat-ghost"></i></a></li>
    </ul>

### Card

molecules/molecules.card

Publius Vergilius Maro

##### Aeneis

May 4th 2017, 12:34

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

Read more

    <div class="m-card">
      <div class="m-card__header">
        <div class="m-contact">
          <div class="a-avatar a-avatar--small">
            <img src="https://api.adorable.io/avatars/285/vergilius@adorable.png" alt="avatar image" />
          </div>
          <div class="m-contact__info">
            <p class="u-text-bold">Publius Vergilius Maro</p>
          </div>
        </div>
      </div>
      <div class="m-card__image">
        <img src="https://placeimg.com/1000/500/tech" alt="card image">
      </div>
      <div class="m-card__body">
        <h5 class="u-margin-bottom-xs">Aeneis</h5>
        <p class="small u-text-bold u-margin-bottom-xs">May 4th 2017, 12:34</p>
        <p class="u-margin-bottom">...</p>
        <p class="u-text-right">
          <a href="#" class="has-icon-right">
            Read more<i class="fa fa-angle-right"></i>
          </a>
        </p>
      </div>
    </div>

### Collapsible list

molecules/molecules.collapsible-list

- First item
- Second collapsible item
  - First collapsible subitem
    - First active subsubitem
  - Second collapsed subitem
    - Second hidden subsubitem

    <ul class="m-collapsible-list">
      <li class="m-collapsible-list__item">
        <a href="#">
          <span>First item</span>
        </a>
      </li>
      <li class="m-collapsible-list__item">
        <a href="#">
          <span class="fa fa-fw fa-angle-down"></span>
          <span>Second collapsible item</span>
        </a>
        <ul>
          <li class="m-collapsible-list__item">
            <a href="#">
              <span class="fa fa-fw fa-angle-down"></span>
              <span>First collapsible subitem</span>
            </a>
            <ul>
              <li class="m-collapsible-list__item is-active">
                <a href="#">
                  <span>First active subsubitem</span>
                </a>
              </li>
            </ul>
          </li>
          <li class="m-collapsible-list__item">
            <a href="#">
              <span class="fa fa-fw fa-angle-right"></span>
              <span>Second collapsed subitem</span>
            </a>
            <ul class="is-collapsed">
              <li class="m-collapsible-list__item">
                <a href="#">
                  <span>Second hidden subsubitem</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

### Contact

molecules/molecules.contact

Jasper Van Proeyen

Sander Geenen

1 min ago

    <div class="m-contact">
      <div class="a-avatar a-avatar--small">
        <img src="https://api.adorable.io/avatars/285/jasper@adorable.png" alt="avatar image" />
      </div>
      <div class="m-contact__info">
        <p class="u-text-bold">Jasper Van Proeyen</p>
      </div>
    </div>

    <div class="m-contact">
      <div class="a-avatar a-avatar--small">
        <img src="https://api.adorable.io/avatars/285/sander@adorable.png" alt="avatar image" />
      </div>
      <div class="m-contact__info">
        <p class="u-text-bold">Sander Geenen</p>
        <p class="small">1 min ago</p>
      </div>
    </div>

Jasper Van Proeyen

Sander Geenen

1 min ago

    <div class="m-contact">
      <div class="a-avatar">
        <img src="https://api.adorable.io/avatars/285/jasper@adorable.png" alt="avatar image" />
      </div>
      <div class="m-contact__info">
        <p class="u-text-bold">Jasper Van Proeyen</p>
      </div>
    </div>

    <div class="m-contact">
      <div class="a-avatar">
        <img src="https://api.adorable.io/avatars/285/sander@adorable.png" alt="avatar image" />
      </div>
      <div class="m-contact__info">
        <p class="u-text-bold">Sander Geenen</p>
        <p class="small">1 min ago</p>
      </div>
    </div>

### Datepicker

molecules/molecules.datepicker

#### Datepicker views

Mo | Tu | We | Th | Fr | Sa | Su
--- | --- | --- | --- | --- | --- | ---

    <div role="datepicker" class="m-datepicker is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button tabindex="-1" type="button" aria-label="previous month" class="a-button has-icon"><i class="fa fa-angle-left"></i></button>
        <button tabindex="0" type="button" class="m-datepicker__title a-button">May 2017</button>
        <button tabindex="0" type="button" aria-label="next month" class="a-button has-icon"><i class="fa fa-angle-right"></i></button>
      </div>
      <table>
        <thead>
          <tr class="m-datepicker__days">
            <th>Mo</th>
            <th>Tu</th>
            <th>We</th>
            <th>Th</th>
            <th>Fr</th>
            <th>Sa</th>
            <th>Su</th>
          </tr>
        </thead>
        <tbody class="m-datepicker__calendar">
          <tr>
            <td><button tabindex="0" type="button" class="is-faded">27</button></td>
            <td><button tabindex="0" type="button" class="is-faded">28</button></td>
            <td><button tabindex="0" type="button">1</button></td>
            <td><button tabindex="0" type="button">2</button></td>
            <td><button tabindex="0" type="button">3</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">4</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">5</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">6</button></td>
            <td><button tabindex="0" type="button">7</button></td>
            <td><button tabindex="0" type="button">8</button></td>
            <td><button tabindex="0" type="button" class="is-selected">9</button></td>
            <td><button tabindex="0" type="button">10</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">11</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">12</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">13</button></td>
            <td><button tabindex="0" type="button">14</button></td>
            <td><button tabindex="0" type="button">15</button></td>
            <td><button tabindex="0" type="button">16</button></td>
            <td><button tabindex="0" type="button">17</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">18</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">19</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">20</button></td>
            <td><button tabindex="0" type="button" class="is-current">21</button></td>
            <td><button tabindex="0" type="button">22</button></td>
            <td><button tabindex="0" type="button">23</button></td>
            <td><button tabindex="0" type="button">24</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">25</button></td>
            <td><button tabindex="0" type="button" class="is-unavailable">26</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">27</button></td>
            <td><button tabindex="0" type="button">28</button></td>
            <td><button tabindex="0" type="button">29</button></td>
            <td><button tabindex="0" type="button">30</button></td>
            <td><button tabindex="0" type="button">31</button></td>
            <td><button tabindex="0" type="button" class="is-faded">1</button></td>
            <td><button tabindex="0" type="button" class="is-faded">2</button></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div role="datepicker" class="m-datepicker is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button tabindex="-1" type="button" aria-label="previous month" class="a-button has-icon"><i class="fa fa-angle-left"></i></button>
        <button tabindex="0" type="button" class="m-datepicker__title a-button">2017</button>
        <button tabindex="0" type="button" aria-label="next month" class="a-button has-icon"><i class="fa fa-angle-right"></i></button>
      </div>
      <table>
        <tbody class="m-datepicker__calendar">
          <tr>
            <td><button tabindex="0" type="button">Jan</button></td>
            <td><button tabindex="0" type="button">Feb</button></td>
            <td><button tabindex="0" type="button">Mar</button></td>
            <td><button tabindex="0" type="button">Apr</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">May</button></td>
            <td><button tabindex="0" type="button">Jun</button></td>
            <td><button tabindex="0" type="button">Jul</button></td>
            <td><button tabindex="0" type="button">Aug</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">Sep</button></td>
            <td><button tabindex="0" type="button">Oct</button></td>
            <td><button tabindex="0" type="button">Nov</button></td>
            <td><button tabindex="0" type="button">Dec</button></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div role="datepicker" class="m-datepicker is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button tabindex="-1" type="button" aria-label="previous years" class="a-button has-icon"><i class="fa fa-angle-left"></i></button>
        <button tabindex="0" type="button" class="m-datepicker__title a-button">2007 - 2018</button>
        <button tabindex="0" type="button" aria-label="next years" class="a-button has-icon"><i class="fa fa-angle-right"></i></button>
      </div>
      <table>
        <tbody class="m-datepicker__calendar">
          <tr>
            <td><button tabindex="0" type="button">2007</button></td>
            <td><button tabindex="0" type="button">2008</button></td>
            <td><button tabindex="0" type="button">2009</button></td>
            <td><button tabindex="0" type="button">2010</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">2011</button></td>
            <td><button tabindex="0" type="button">2012</button></td>
            <td><button tabindex="0" type="button">2013</button></td>
            <td><button tabindex="0" type="button">2014</button></td>
          </tr>
          <tr>
            <td><button tabindex="0" type="button">2015</button></td>
            <td><button tabindex="0" type="button">2016</button></td>
            <td><button tabindex="0" type="button">2017</button></td>
            <td><button tabindex="0" type="button">2018</button></td>
          </tr>
        </tbody>
      </table>
    </div>

#### Datepicker attached to an input field

Text field label

Mo | Tu | We | Th | Fr | Sa | Su
--- | --- | --- | --- | --- | --- | ---

In order to make the datepicker visible, just add the `.is-open` class, as demonstrated in the example.

In the rare case that you want your datepicker to open on the left side of the input field, just add the `.m-datepicker--left` class.

    <div class="a-input has-icon-right">
      <label class="a-input__label" for="input-datepicker">Text field label</label>
      <div class="a-input__wrapper">
        <input type="text" name="input-datepicker" id="input-datepicker" placeholder="Placeholder" />
        <span class="fa fa-calendar is-clickable"></span>
        <div role="datepicker" class="m-datepicker is-open m-datepicker--fixed" aria-hidden="false">
          <div class="m-datepicker__nav">
            <button tabindex="-1" type="button" aria-label="previous month" class="a-button has-icon">
              <i class="fa fa-angle-left"></i>
            </button>
            <button tabindex="0" type="button" class="m-datepicker__title a-button">May 2017</button>
            <button tabindex="0" type="button" aria-label="next month" class="a-button has-icon"><i class="fa fa-angle-right"></i></button>
          </div>
          <table>
            <thead>
              <tr class="m-datepicker__days">
                <th>Mo</th>
                <th>Tu</th>
                <th>We</th>
                <th>Th</th>
                <th>Fr</th>
                <th>Sa</th>
                <th>Su</th>
              </tr>
            </thead>
            <tbody class="m-datepicker__calendar">
              <tr>
                <td><button tabindex="0" type="button" class="is-faded">27</button></td>
                <td><button tabindex="0" type="button" class="is-faded">28</button></td>
                <td><button tabindex="0" type="button">1</button></td>
                <td><button tabindex="0" type="button">2</button></td>
                <td><button tabindex="0" type="button">3</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">4</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">5</button></td>
              </tr>
              <tr>
                <td><button tabindex="0" type="button">6</button></td>
                <td><button tabindex="0" type="button">7</button></td>
                <td><button tabindex="0" type="button">8</button></td>
                <td><button tabindex="0" type="button" class="is-selected">9</button></td>
                <td><button tabindex="0" type="button">10</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">11</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">12</button></td>
              </tr>
              <tr>
                <td><button tabindex="0" type="button">13</button></td>
                <td><button tabindex="0" type="button">14</button></td>
                <td><button tabindex="0" type="button">15</button></td>
                <td><button tabindex="0" type="button">16</button></td>
                <td><button tabindex="0" type="button">17</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">18</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">19</button></td>
              </tr>
              <tr>
                <td><button tabindex="0" type="button">20</button></td>
                <td><button tabindex="0" type="button" class="is-current">21</button></td>
                <td><button tabindex="0" type="button">22</button></td>
                <td><button tabindex="0" type="button">23</button></td>
                <td><button tabindex="0" type="button">24</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">25</button></td>
                <td><button tabindex="0" type="button" class="is-unavailable">26</button></td>
              </tr>
              <tr>
                <td><button tabindex="0" type="button">27</button></td>
                <td><button tabindex="0" type="button">28</button></td>
                <td><button tabindex="0" type="button">29</button></td>
                <td><button tabindex="0" type="button">30</button></td>
                <td><button tabindex="0" type="button">31</button></td>
                <td><button tabindex="0" type="button" class="is-faded">1</button></td>
                <td><button tabindex="0" type="button" class="is-faded">2</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    // To open your datepicker on the left side of your input field
    ...
    <div role="datepicker" class="m-datepicker m-datepicker--left is-open m-datepicker--fixed" aria-hidden="false">
    ...

### Flyout

atoms/atoms.flyout

#### Default flyout

The default flyout will never be bigger than the element that triggers it.

    <div class="m-flyout is-open">
      <button class="a-button">Default flyout</button>
      <div class="m-flyout__content has-padding">
        <p>The default flyout will never be bigger than the element that triggers it.</p>
      </div>
    </div>

#### Flyout sizes

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

… the element that triggers it.

    <div class="m-flyout m-flyout--sm is-open">
      ...
    </div>

    <div class="m-flyout m-flyout--md is-open">
      ...
    </div>

    <div class="m-flyout m-flyout--lg is-open">
      ...
    </div>

    <div class="m-flyout m-flyout--full is-open">
      ...
    </div>

#### Flyout options

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <div class="m-flyout m-flyout--right m-flyout--md is-open">
      ...
    </div>

No padding here.

    <div class="m-flyout m-flyout--sm is-open d-flyout--md">
      <button class="a-button">Flyout without padding</button>
      <div class="m-flyout__content">
        <p>No padding here.</p>
      </div>
    </div>

Flyout as an autocomplete

- Take
- A
- Look
- At
- The
- Behaviour
- Of
- The
- Scrollable
- List

    <div class="m-flyout m-flyout--full m-flyout--scrollable is-open">
      <label class="a-input__label" for="input-autocomplete">Flyout as an autocomplete</label>
      <div class="a-input">
        <input type="text" name="input-autocomplete" id="input-autocomplete" placeholder="Placeholder" />
      </div>
      <div class="m-flyout__content">
        <ul class="m-selectable-list m-selectable-list--no-border">
          <li>...</li>
        </ul>
      </div>
    </div>

Sometimes you might want to programmatically open the flyout above your clicked element (e.g. when you're at the end of the page and there is no free space below enough). To fix the dropshadow when doing this, add the `.opens-above` class to your flyout.

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <div class="m-flyout is-open opens-above">
      ...
    </div>

### Gallery

molecules/molecules.gallery

    <ul class="m-gallery">
      <li class="m-gallery__item m-gallery__item--preview">
        <a rel="gallery" href="https://placeimg.com/1000/600/tech" title="Item 1">
          <img src="https://placeimg.com/1000/600/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 2">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 3">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 4">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 5">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 6">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 7">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 8">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 9">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
      <li class="m-gallery__item">
        <a rel="gallery" href="https://placeimg.com/320/320/tech" title="Item 10">
          <img src="https://placeimg.com/320/320/tech" alt="gallery image">
        </a>
      </li>
    </ul>

### Icon list

molecules/molecules.icon-list

    <ul class="m-icon-list">
        <li><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
        <li><a href="#"><span class="fa fa-instagram"></span></a></li>
        <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li><a href="#"><span class="fa fa-snapchat-ghost"></span></a></li>
    </ul>

Note that the grey background color is for displaying purposes only.

    <ul class="m-icon-list m-icon-list--negative">
        <li><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
        <li><a href="#"><span class="fa fa-instagram"></span></a></li>
        <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li><a href="#"><span class="fa fa-snapchat-ghost"></span></a></li>
    </ul>

    <ul class="m-icon-list m-icon-list--horizontal">
        <li><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
        <li><a href="#"><span class="fa fa-instagram"></span></a></li>
        <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li><a href="#"><span class="fa fa-snapchat-ghost"></span></a></li>
    </ul>

Note that the grey background color is for displaying purposes only.

    <ul class="m-icon-list m-icon-list--horizontal m-icon-list--negative">
        <li><a href="#"><span class="fa fa-facebook"></span></a></li>
        <li><a href="#"><span class="fa fa-twitter"></span></a></li>
        <li><a href="#"><span class="fa fa-linkedin"></span></a></li>
        <li><a href="#"><span class="fa fa-instagram"></span></a></li>
        <li><a href="#"><span class="fa fa-google-plus"></span></a></li>
        <li><a href="#"><span class="fa fa-snapchat-ghost"></span></a></li>
    </ul>

### Image

molecules/molecules.image

    <figure class="m-image">
      <img src="https://placeimg.com/1000/500/tech" alt="figure image">
    </figure>

Lorem Pixel

    <figure class="m-image">
      <img src="https://placeimg.com/1000/500/tech" alt="figure image">
      <a href="#" class="m-image__copyright a-copyright" aria-haspopup="true">
        <div class="a-copyright__sign">
          <span class="fa fa-copyright"></span>
        </div>
        <span class="a-copyright__label">Lorem Pixel</span>
      </a>
    </figure>

Lorem Pixel
Some fancy caption about this photo

    <figure>
      <div class="m-image">
        <img src="https://placeimg.com/1000/500/tech" alt="figure image">
        <div class="m-image__copyright a-copyright" aria-haspopup="true">
          <div class="a-copyright__sign">
            <span class="fa fa-copyright"></span>
          </div>
          <span class="a-copyright__label">Lorem Pixel</span>
        </div>
      </div>
      <figcaption>Some fancy caption about this photo</figcaption>
    </figure>

### Modal

molecules/molecules.modal

###### Aeneis

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <div class="m-modal">
      <div class="m-modal__content">
        <div class="m-modal__header u-margin-bottom-xs">
          <button class="m-modal__close a-button-transparent a-button--default has-icon"><i class="fa fa-close"></i></button>
          <h6>Aeneis</h6>
        </div>
        <div class="u-margin-bottom">
          <p>...</p>
        </div>
        <div class="m-modal__footer">
          <button class="a-button">Got it</button>
          <button class="a-button-outline">Cancel</button>
        </div>
      </div>
    </div>

###### Aeneis

Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.

    <div class="m-modal m-modal--large">
      <div class="m-modal__content">
        <div class="m-modal__header u-margin-bottom-xs">
          <button class="m-modal__close a-button-transparent a-button--default has-icon"><i class="fa fa-close"></i></button>
          <h6>Aeneis</h6>
        </div>
        <div class="u-margin-bottom">
          <p>...</p>
        </div>
        <div class="m-modal__footer">
          <button class="a-button">Got it</button>
          <button class="a-button-outline">Cancel</button>
        </div>
      </div>
    </div>

### Navigation

molecules/molecules.navigation

#### List navigation

    <ul class="m-nav-list">
      <li><a href="#"><span class="fa fa-lightbulb-o"></span>Thomas Edison</a></li>
      <li><a class="is-active" href="#">Leonardo da Vinci <span class="a-badge">67</span></a></li>
      <li><a class="is-disabled">Albert Einstein</a></li>
    </ul>

    <ul class="m-nav-list m-nav-list--left">
      <li><a href="#"><span class="fa fa-lightbulb-o"></span>Thomas Edison</a></li>
      <li><a class="is-active" href="#">Leonardo da Vinci <span class="a-badge">67</span></a></li>
      <li><a class="is-disabled">Albert Einstein</a></li>
    </ul>

In order to maintain correct semantics, you also can use buttons inside a `nav-list`. Use this option when working with click events, instead of linking to another page.

    <ul class="m-nav-list">
      <li><button><span class="fa fa-lightbulb-o"></span>Thomas Edison</button></li>
      <li><button class="is-active">Leonardo da Vinci <span class="a-badge">67</span></button></li>
      <li><button class="is-disabled">Albert Einstein</button></li>
    </ul>

    <ul class="m-nav-list m-nav-list--left">
      <li><button><span class="fa fa-lightbulb-o"></span>Thomas Edison</button></li>
      <li><button class="is-active">Leonardo da Vinci <span class="a-badge">67</span></button></li>
      <li><button class="is-disabled">Albert Einstein</button></li>
    </ul>

#### Tab navigation

    <ul class="m-nav-tabs">
      <li><a href="#"><span class="fa fa-lightbulb-o"></span>Thomas Edison</a></li>
      <li><a class="is-active" href="#">Leonardo da Vinci <span class="a-badge">67</span></a></li>
      <li><a class="is-disabled">Albert Einstein</a></li>
    </ul>

    <ul class="m-nav-tabs m-nav-tabs--left">
      <li><a href="#"><span class="fa fa-lightbulb-o"></span>Thomas Edison</a></li>
      <li><a class="is-active" href="#">Leonardo da Vinci <span class="a-badge">67</span></a></li>
      <li><a class="is-disabled">Albert Einstein</a></li>
    </ul>

    <ul class="m-nav-tabs m-nav-tabs--right">
      <li><a href="#"><span class="fa fa-lightbulb-o"></span>Thomas Edison</a></li>
      <li><a class="is-active" href="#">Leonardo da Vinci <span class="a-badge">67</span></a></li>
      <li><a class="is-disabled">Albert Einstein</a></li>
    </ul>

    <ul class="m-nav-tabs m-nav-tabs--left">
      <li><button><span class="fa fa-lightbulb-o"></span>Thomas Edison</a></li>
      <li><button class="is-active">Leonardo da Vinci <span class="a-badge">67</span></button></li>
      <li><button class="is-disabled">Albert Einstein</button></li>
    </ul>

Note that on mobile devices `.m-nav-tabs` has the exact same appearance as `.m-nav-list`.

### Overlay

molecules/molecules.overlay
Hide overlay

This simple modal is just one example of what can be put inside an overlay.

Show overlay

In order to make the overlay visible, just add the `.is-active` class, as demonstrated in the example.

    <div class="m-overlay">
      <div class="m-overlay__inner">
        ...
      </div>
    </div>

    <div class="m-overlay is-active">
      ...
    </div>

### Pagination

molecules/molecules.pagination

#### Regular pagination

- 1 van de 6

- ...
- 3
- 4
- 5
- 6

    <ul class="m-pagination">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li class="m-pagination__next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination">
      <li class="m-pagination__prev"><a class="is-disabled"><i class="fa fa-angle-left"></i></a></li>
      <li class="m-pagination__label">1 van de 6</li>
      <li class="m-pagination__next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li>...</li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a class="is-active" href="#">6</a></li>
      <li class="m-pagination__next"><a class="is-disabled"><i class="fa fa-angle-right"></i></a></li>
    </ul>

#### Outline pagination

- 1 van de 6

- ...
- 3
- 4
- 5
- 6

    <ul class="m-pagination m-pagination--outline">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li class="m-pagination__next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination m-pagination--outline">
      <li class="m-pagination__prev"><a class="is-disabled"><i class="fa fa-angle-left"></i></a></li>
      <li class="m-pagination__label">1 van de 6</li>
      <li class="m-pagination__next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination m-pagination--outline">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li>...</li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a class="is-active" href="#">6</a></li>
      <li class="m-pagination__next"><a class="is-disabled"><i class="fa fa-angle-right"></i></a></li>
    </ul>

#### Pagination sizes

- 1 van de 6

- ...
- 3
- 4
- 5
- 6

- ...
- 3
- 4
- 5
- 6

    <ul class="m-pagination m-pagination--small">
      <li class="m-pagination__prev"><a class="is-disabled"><i class="fa fa-angle-left"></i></a></li>
      <li class="m-pagination__label">1 van de 6</li>
      <li class="m-pagination__next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination m-pagination--large">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li>...</li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a class="is-active" href="#">6</a></li>
      <li class="m-pagination__next"><a class="is-disabled"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination m-pagination--outline m-pagination--large">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li class="m-pagination__next"><a href="#"><i class="fa fa-angle-right"></i></a></li>
    </ul>

    <ul class="m-pagination m-pagination--outline m-pagination--small">
      <li class="m-pagination__prev"><a href="#"><i class="fa fa-angle-left"></i></a></li>
      <li>...</li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a class="is-active" href="#">6</a></li>
      <li class="m-pagination__next"><a class="is-disabled"><i class="fa fa-angle-right"></i></a></li>
    </ul>

### Progress

molecules/molecules.progress
Stap 1 van 5

    <div class="m-progress">
      <label class="m-progress__label">Stap 1 van 5</label>
      <div class="m-progress__inner">
        <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
      </div>
    </div>

20%

    <div class="m-progress m-progress--inline">
      <div class="m-progress__inner">
        <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
      </div>
      <label class="m-progress__label">20%</label>
    </div>

20%

    <div class="m-progress m-progress--inline">
      <label class="m-progress__label">20%</label>
      <div class="m-progress__inner">
        <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
      </div>
    </div>

20%

    <div class="m-progress">
      <div class="m-progress__inner">
        <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
          <div class="a-tooltip a-tooltip--primary a-tooltip--top">
            <p>20%</p>
          </div>
        </div>
      </div>
    </div>

### Range slider

molecules/molecules.range-slider

50%

    <div class="m-range-slider">
      <div class="m-range-slider__inner">
        <div class="m-range-slider__bar" style="width: 50%"></div>
        <span class="m-range-slider__handle" style="left: 50%;">
          <div class="m-range-slider__tooltip a-tooltip a-tooltip--primary a-tooltip--top">
            <p>50%</p>
          </div>
        </span>
      </div>
    </div>

20%

80%

    <div class="m-range-slider">
      <div class="m-range-slider__inner">
        <div class="m-range-slider__bar" style="left: 20%; width: 60%"></div>
        <span class="m-range-slider__handle" style="left: 20%;">
          <div class="m-range-slider__tooltip a-tooltip a-tooltip--primary a-tooltip--top">
            <p>20%</p>
          </div>
        </span>
        <span class="m-range-slider__handle" style="left: 80%;">
          <div class="m-range-slider__tooltip a-tooltip a-tooltip--primary a-tooltip--top">
            <p>80%</p>
          </div>
        </span>
      </div>
    </div>

50%

    <div class="m-range-slider">
      <div class="m-range-slider__inner">
        <div class="m-range-slider__bar" style="width: 50%"></div>
        <span class="m-range-slider__handle" style="left: 50%;">
          <span class="m-range-slider__value">50%</span>
        </span>
      </div>
    </div>

20% 80%

    <div class="m-range-slider">
      <div class="m-range-slider__inner">
        <div class="m-range-slider__bar" style="left: 20%; width: 60%"></div>
        <span class="m-range-slider__handle" style="left: 20%;">
          <span class="m-range-slider__value">20%</span>
        </span>
        <span class="m-range-slider__handle" style="left: 80%;">
          <span class="m-range-slider__value">80%</span>
        </span>
      </div>
    </div>

### Selectable list

molecules/molecules.selectable-list

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <div>
      <ul class="m-selectable-list">
        <li><a href="#" class="m-selectable-list__item">Thomas Edison</a></li>
        <li><a href="#" class="m-selectable-list__item m-selectable-list__item--active">Leonardo da Vinci</a></li>
        <li><a href="#" class="m-selectable-list__item">Albert Einstein</a></li>
      </ul>
    </div>

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <div>
      <ul class="m-selectable-list m-selectable-list--no-border">
        <li><a href="#" class="m-selectable-list__item">Thomas Edison</a></li>
        <li><a href="#" class="m-selectable-list__item m-selectable-list__item--active">Leonardo da Vinci</a></li>
        <li><a href="#" class="m-selectable-list__item">Albert Einstein</a></li>
      </ul>
    </div>

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <div>
      <ul class="m-selectable-list>
        <li class="m-selectable-list__item">Thomas Edison</li>
        <li class="m-selectable-list__item m-selectable-list__item--active">Leonardo da Vinci</li>
        <li class="m-selectable-list__item">Albert Einstein</li>
      </ul>
    </div>

### Step indicator

molecules/molecules.step-indicator

1. Step 1
2. Step 2
3. Step 3
4. Step 4

    <ol class="m-step-indicator">
      <li class="is-completed"><span class="m-step-indicator__label">Step 1</span></li>
      <li class="is-completed"><span class="m-step-indicator__label">Step 2</span></li>
      <li class="is-active"><span class="m-step-indicator__label">Step 3</span></li>
      <li><span class="m-step-indicator__label">Step 4</span></li>
    </ol>

### Tag

molecules/molecules.tag
My fancy tag

    <div class="m-tag d-tag">
      <span class="m-tag__label">My fancy tag</span>
    </div>

    <div class="m-tag d-tag">
      <input class="m-tag__input" type="text" placeholder="My new tag" />
    </div>

My tag with delete button

    <div class="m-tag d-tag">
      <span class="m-tag__label">My tag with delete button</span>
      <button class="a-button-transparent a-button--small a-button--danger has-icon"><i class="fa fa-close"></i></button>
    </div>

My tag with icon
My other tag with icon

    <div class="m-tag d-tag">
      <button class="a-button a-button--default a-button--small has-icon"><i class="fa fa-check"></i></button>
      <span class="m-tag__label">My tag with icon</span>
     </div>

    <div class="m-tag d-tag">
      <button class="a-button a-button--small a-button--success has-icon"><i class="fa fa-check"></i></button>
      <span class="m-tag__label">My other tag with icon</span>
    </div>

### Upload

molecules/molecules.upload

Drag a file here or click to browse

Maximum file size: 4MB

    <div class="m-upload">
      <div class="m-upload__inner">
        <div class="m-upload__dropzone">
          <input type="file" multiple="multiple" class="m-upload__input">
          <div class="m-upload__content">
            <p class="m-upload__message">Drag a file here or click to browse</p>
          </div>
        </div>
      </div>
      <small class="m-upload__description">Maximum file size: 4MB</small>
    </div>

Drag a file here or click to browse

Maximum file size: 4MB

    <div class="m-upload is-disabled">
      <div class="m-upload__inner">
        <div class="m-upload__dropzone">
          <input type="file" multiple="multiple" class="m-upload__input" disabled>
          <div class="m-upload__content">
            <p class="m-upload__message">Drag a file here or click to browse</p>
          </div>
        </div>
      </div>
      <small class="m-upload__description">Maximum file size: 4MB</small>
    </div>

Drag a file here or click to browse

my-doc.pdf and my-pic.jpg

Maximum file size: 4MB

- my-doc.pdf
- my-pic.jpg
- my-unallowed-file.xml This file format is not allowed.

    <div class="m-upload">
      <div class="m-upload__inner">
        <div class="m-upload__dropzone">
          <input type="file" multiple="multiple" class="m-upload__input">
          <div class="m-upload__content">
            <p class="m-upload__message u-margin-bottom">Drag a file here or click to browse</p>
            <p class="m-upload__uploads u-text-bold u-margin-bottom-xs">my-doc.pdf and my-pic.jpg</p>
            <div class="m-upload__progress m-progress">
              <div class="m-progress__inner">
                <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <small class="m-upload__description">Maximum file size: 4MB</small>
      <ul class="m-upload__files">
        <li>
          <span class="fa fa-file-o"></span>
          <span class="m-upload__filename">my-doc.pdf</span>
          <button class="m-upload__delete a-button-transparent a-button--default a-button--small has-icon"><i class="fa fa-close"></i></button>
        </li>
        <li>
          <span class="fa fa-file-o"></span>
          <span class="m-upload__filename">my-pic.jpg</span>
          <button class="m-upload__delete a-button-transparent a-button--default a-button--small has-icon"><i class="fa fa-close"></i></button>
        </li>
        <li class="is-error">
          <span class="fa fa-warning"></span>
          <span class="m-upload__filename">my-unallowed-file.xml</span>
          <span class="m-upload__error">This file format is not allowed.</span>
          <button class="m-upload__delete a-button-transparent a-button--danger a-button--small has-icon"><i class="fa fa-close"></i></button>
        </li>
      </ul>
    </div>

## Organisms

### Footer

organisms/organisms.footer

For a visible example of the footer, take a look at the very bottom of this page.

    <footer class="o-footer">
      <span class="o-footer__label">© 2017 Stad Antwerpen</span>
      <a href="#" class="o-footer__button a-button a-button--secondary has-icon">
        <i class="fa fa-arrow-up"></i>
      </a>
    </footer>

### Header

organisms/organisms.header

For a visible example of the header, take a look at the very top of this page.

In order to make the header stay on top, just add the `.has-header` class to the `body` tag and the `o-header--fixed` class to the header, as demonstrated in the example.

    <header class="o-header">
      <a href="#" class="o-header__logo">
        <img src="images/a-logo.svg" alt="Official logo Antwerpen">
      </a>
    </header>

    <body class="has-header">

    <header class="o-header o-header--fixed">
      ...
    </header>

### Slideshow

#### Regular slideshow

organisms/organisms.slideshow
Lorem Pixel
Lorem Pixel
Lorem Pixel
1 | 3 Some fancy caption about this photo

    <div class="o-slideshow">
      <div class="o-slideshow__inner">
        <div class="o-slideshow__prev"></div>
        <div class="o-slideshow__slides">
          <figure class="o-slideshow__slide is-active">
            <div class="o-slideshow__image">
              <div class="m-image">
                <img src="https://placeimg.com/1000/500/tech" alt="slideshow image 1">
                <div class="m-image__copyright a-copyright" aria-haspopup="true">
                  <div class="a-copyright__sign"><span class="fa fa-copyright"></span></div>
                  <span class="a-copyright__label">Lorem Pixel</span>
                </div>
              </div>
            </div>
          </figure>
          <figure class="o-slideshow__slide">
            <div class="o-slideshow__image">
              <div class="m-image">
                <img src="https://placeimg.com/1000/500/tech" alt="slideshow image 2">
                <div class="m-image__copyright a-copyright" aria-haspopup="true">
                  <div class="a-copyright__sign"><span class="fa fa-copyright"></span></div>
                  <span class="a-copyright__label">Lorem Pixel</span>
                </div>
              </div>
            </div>
          </figure>
          <figure class="o-slideshow__slide">
            <div class="o-slideshow__image">
              <div class="m-image">
                <img src="https://placeimg.com/1000/500/tech" alt="slideshow image 3">
                <div class="m-image__copyright a-copyright" aria-haspopup="true">
                  <div class="a-copyright__sign"><span class="fa fa-copyright"></span></div>
                  <span class="a-copyright__label">Lorem Pixel</span>
                </div>
              </div>
            </div>
          </figure>
        </div>
        <div class="o-slideshow__next"></div>
      </div>
      <figcaption class="o-slideshow__footer">
        <span class="o-slideshow__counter">1 | 3</span>
        Some fancy caption about this photo
      </figcaption>
    </div>

#### Slideshow overlay

Hide slideshow overlay
Lorem Pixel
Lorem Pixel
Lorem Pixel
1 | 3 Some fancy caption about this photo. Click the "X" in the top right corner to close the slideshow.
Show slideshow overlay

    <div class="m-overlay">
      <button class="m-overlay__button">
        <span class="fa fa-close"></span>
      </button>
      <div class="m-overlay__slideshow o-slideshow o-slideshow--transparent">
        <div class="o-slideshow__inner">
          <div class="o-slideshow__prev o-slideshow__prev--outside"></div>
          <div class="o-slideshow__slides">
            <figure class="o-slideshow__slide is-active">
              <div class="o-slideshow__image">
                <div class="m-image">
                  <img src="https://placeimg.com/1000/500/tech" alt="slideshow image 1">
                  <div class="m-image__copyright a-copyright" aria-haspopup="true">
                    <div class="a-copyright__sign"><span class="fa fa-copyright"></span></div>
                    <span class="a-copyright__label">Lorem Pixel</span>
                  </div>
                </div>
              </div>
            </figure>
            <figure class="o-slideshow__slide">
              <div class="o-slideshow__image">
                <div class="m-image">
                  <img src="https://placeimg.com/1000/500/tech" alt="slideshow image 2">
                  <div class="m-image__copyright a-copyright" aria-haspopup="true">
                    <div class="a-copyright__sign"><span class="fa fa-copyright"></span></div>
                    <span class="a-copyright__label">Lorem Pixel</span>
                  </div>
                </div>
              </div>
            </figure>
            <figure class="o-slideshow__slide">
              <div class="o-slideshow__image">
                <div class="m-image">
                  <img src="https://placeimg.com/1000/500/tech" alt="slideshow image 3">
                  <div class="m-image__copyright a-copyright" aria-haspopup="true">
                    <div class="a-copyright__sign"><span class="fa fa-copyright"></span></div>
                    <span class="a-copyright__label">Lorem Pixel</span>
                  </div>
                </div>
              </div>
            </figure>
          </div>
          <div class="o-slideshow__next o-slideshow__next--outside"></div>
        </div>
        <figcaption class="o-slideshow__footer">
          <span class="o-slideshow__counter">1 | 3</span>
          Some fancy caption about this photo
        </figcaption>
      </div>
    </div>

### Tag list

organisms/organisms.tag-list

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <ul class="o-tag-list">
      <li class="m-tag"><span class="m-tag__label">Thomas Edison</span></li>
      <li class="m-tag"><span class="m-tag__label">Leonardo da Vinci</span></li>
      <li class="m-tag"><span class="m-tag__label">Albert Einstein</span></li>
    </ul>
    <ul class="o-tag-list">
      <li class="m-tag"><span class="m-tag__label">Thomas Edison</span></li>
      <li class="m-tag"><span class="m-tag__label">Leonardo da Vinci</span></li>
      <li class="m-tag"><span class="m-tag__label">Albert Einstein</span></li>
    </ul>

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <ul class="o-tag-list">
      <li class="m-tag">
        <span class="m-tag__label">Thomas Edison</span>
        <button class="a-button-transparent a-button--small a-button--danger has-icon"><i class="fa fa-close"></i></button>
      </li>
      <li class="m-tag">
        <span class="m-tag__label">Leonardo da Vinci</span>
        <button class="a-button-transparent a-button--small a-button--danger has-icon"><i class="fa fa-close"></i></button>
      </li>
      <li class="m-tag">
        <span class="m-tag__label">Albert Einstein</span>
        <button class="a-button-transparent a-button--small a-button--danger has-icon"><i class="fa fa-close"></i></button>
      </li>
    </ul>

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <ul class="o-tag-list">
      <li class="m-tag">
        <button class="a-button a-button--default a-button--small has-icon"><i class="fa fa-check"></i></button>
        <span class="m-tag__label">Thomas Edison</span>
      </li>
      <li class="m-tag">
        <button class="a-button a-button--success a-button--small has-icon"><i class="fa fa-check"></i></button>
        <span class="m-tag__label">Leonardo da Vinci</span>
      </li>
      <li class="m-tag">
        <button class="a-button a-button a-button--small has-icon"><i class="fa fa-arrows"></i></button>
        <span class="m-tag__label">Albert Einstein</span>
      </li>
    </ul>