# Antwerp branding styleguide v7.0.0-beta.7

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

#### We've moved!

This page only contains code examples. For a complete overview of components, UX patterns and accessibility guidelines, please visit our digital branding guidelines portal
(external).

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 - and prefered - 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/7.0.0-beta.7/main.min.css">

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

    @import url("https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/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/7.0.0-beta.7/antwerpen.min.css">

or

    @import url("https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/antwerpen.min.css");

#### Sun Antwerpen

Available in Light, Regular, Bold and Extra Bold.

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

or

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

## Accessibility

Web Content Accessibility Guidelines (WCAG) 2.1
(external) cover a wide range of recommendations for making web content more accessible.

Some parts of the Antwerp branding may need special actions on the subject of WCAG 2.1 AA, specific guidelines that are required by European law. When this is the case you will see this icon
accessibility note which will warn you about any incompatibilities and actions that may have to be taken from your behalf.

## Other resources

### Flexboxgrid

https://github.com/a-ui/core_flexboxgrid_scss
(external)

Grid optimized to follow the Antwerp styling guidelines.

### Sketch

https://github.com/a-ui/core_branding_sketch
(external)

Sketch source file of all core branding components.

### Favicons

https://github.com/a-ui/core_branding_favicons
(external)

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

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

All z-index options: 'overlay': 10, 'header': 9, 'statusbar': 8, 'pane': 7, 'pane-overlay': 6, 'tooltip': 5, 'flyout': 4, 'datepicker': 3, 'top': 2, 'base': 1, 'auto': 0, 'cellar': -1.

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

### Colors

quarks/quarks.colors

An overview of the complete color palette.

### Custom properties

quarks/quarks.properties

Starting with core branding v6 we make use of CSS custom properties. There's an important difference between using them in your stylesheet and overriding them, e.g. for your own custom theme:

#### Overriding core branding values

Here's an overview of all available `:root` CSS custom properties for creating a custom theme based on core branding.

    @use '@a-ui/core/src/styles/quarks' as *;
    @use 'sass:color';

    :root {
        --brand-1: #{$endeavour-600};
        --brand-1-tint: #{$endeavour-700};
        --brand-1-contrast: #{$white};
        --brand-1-alt: #{$white};
        --brand-1-alt-tint: #{$endeavour-100};
        --brand-1-alt-contrast: #{$black};

        --brand-2: #{$monza-600};
        --brand-2-tint: #{$monza-700};
        --brand-2-contrast: #{$white};
        --brand-2-alt: #{$white};
        --brand-2-alt-tint: #{$monza-100};
        --brand-2-alt-contrast: #{$black};

        --brand-3: #{$endeavour-600};
        --brand-3-tint: #{$endeavour-700};
        --brand-3-contrast: #{$white};
        --brand-3-alt: #{$white};
        --brand-3-alt-tint: #{$endeavour-100};
        --brand-3-alt-contrast: #{$black};

        --state-info: #{$endeavour-600};
        --state-info-tint: #{$endeavour-700};
        --state-info-contrast: #{$white};
        --state-info-alt: #{$white};
        --state-info-alt-tint: #{$endeavour-100};
        --state-info-alt-contrast: #{$black};

        --state-success: #{$mantis-700};
        --state-success-tint: #{$mantis-800};
        --state-success-contrast: #{$white};
        --state-success-alt: #{$white};
        --state-success-alt-tint: #{$mantis-100};
        --state-success-alt-contrast: #{$black};

        --state-warning: #{$burnt-orange-600};
        --state-warning-tint: #{$burnt-orange-700};
        --state-warning-contrast: #{$white};
        --state-warning-alt: #{$white};
        --state-warning-alt-tint: #{$burnt-orange-100};
        --state-warning-alt-contrast: #{$black};

        --state-danger: #{$cinnabar-700};
        --state-danger-tint: #{$cinnabar-800};
        --state-danger-contrast: #{$white};
        --state-danger-alt: #{$white};
        --state-danger-alt-tint: #{$cinnabar-100};
        --state-danger-alt-contrast: #{$black};

        --state-disabled: #{$neutral-100};
        --state-disabled-tint: #{$neutral-200};
        --state-disabled-contrast: #{$neutral-400};

        --text-color: #{$black};
        --text-color-light: #{$neutral-400};
        --text-color-inverted: #{$white};

        --bg-color: #{$neutral-100};
        --bg-color-light: #{$white};
        --bg-color-inverted: #{$neutral-500};

        --border-color: #{$neutral-300};
        --border-color-light: #{$neutral-200};

        --overlay-color: #{rgba($black, .75)};
        --box-shadow-color: #{rgba($neutral-600, .12)};

        --link: #{$endeavour-600};
        --link-tint: #{$endeavour-700};
        --link-contrast: #{$white};
        --link-alt: #{$white};
        --link-alt-tint: #{$endeavour-100};
        --link-alt-contrast: #{$black};

        --state-selected: #{color.mix($endeavour-600, $white, 20%)};

        --spacer: 1.5rem;
        --spacer-3xl: 6rem;
        --spacer-xxl: 3.75rem;
        --spacer-xl: 3rem;
        --spacer-l: 2.25rem;
        --spacer-s: 1rem;
        --spacer-xs: .75rem;
        --spacer-xxs: .5rem;
        --spacer-3xs: .25rem;

        --screen-xs: #{$screen-xs};
        --screen-s: #{$screen-sm};
        --screen-l: #{$screen-md};
        --screen-xl: #{$screen-lg};
        --screen-xxl: #{$screen-xl};

        --screen-xxs-max: #{$screen-xxs-max};
        --screen-xs-max: #{$screen-xs-max};
        --screen-s-max: #{$screen-sm-max};
        --screen-l-max: #{$screen-md-max};
        --screen-xl-max: #{$screen-lg-max};

        --font-family-base: 'Sun Antwerpen', sans-serif;
        --font-family-headings: 'Antwerpen Regular', sans-serif;
        --font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;

        --font-weight-light: 300;
        --font-weight-normal: 500;
        --font-weight-bold: 700;
        --font-weight-extra-bold: 800;

        --font-weight-h1: var(--FONT-WEIGHT-BOLD);
        --font-weight-h2: var(--FONT-WEIGHT-BOLD);
        --font-weight-h3: var(--FONT-WEIGHT-BOLD);
        --font-weight-h4: var(--FONT-WEIGHT-BOLD);
        --font-weight-h5: var(--FONT-WEIGHT-BOLD);
        --font-weight-h6: var(--FONT-WEIGHT-BOLD);

        --font-size-base: 1rem;
        --font-size-small: .875rem;
        --font-size-large: 1.125rem;

        --font-size-h1: 2.25rem;
        --font-size-h2: 1.65rem;
        --font-size-h3: 1.4375rem;
        --font-size-h4: 1.3125;
        --font-size-h5: 1.1875;
        --font-size-h6: 1.0625;

        --icon-size-base: 1.25rem;
        --icon-size-small: 1rem;
        --icon-size-large: 1.5rem;

        --line-height-base: 1;
        --line-height-heading: 1.1;
        --line-height-paragraph: 1.3;

        --border-radius: 0;
        --border-width: 1px;

        --animation-duration: 200ms;
        --animation-easing: ease-in-out;
        --animation-normal: var(--ANIMATION-DURATION) var(--ANIMATION-EASING);

        --box-shadow-bottom-left: calc(var(--SPACER) / -2) calc(var(--SPACER) / 2) 0 var(--BOX-SHADOW-COLOR);
        --box-shadow-bottom-right: calc(var(--SPACER) / 2) calc(var(--SPACER) / 2) 0 var(--BOX-SHADOW-COLOR);
        --box-shadow-top-left: calc(var(--SPACER) / -2) calc(var(--SPACER) / -2) 0 var(--BOX-SHADOW-COLOR);
        --box-shadow-top-right: calc(var(--SPACER) / 2) calc(var(--SPACER) / -2) 0 var(--BOX-SHADOW-COLOR);
        --box-shadow: var(--BOX-SHADOW-BOTTOM-RIGHT);

        --readable-content-width: 45rem;

        --z-cellar: -1;
        --z-auto: 0;
        --z-base: 1;
        --z-top: 2;
        --z-datepicker: 3;
        --z-flyout: 4;
        --z-tooltip: 5;
        --z-pane-overlay: 6;
        --z-pane: 7;
        --z-statusbar: 8;
        --z-header: 9;
        --z-overlay: 10;
    }

#### Using custom CSS properties

Whether you are using an overridden value or not, always use the capitalized version of the aforementioned CSS custom properties.

    .css {
        background-color: var(--BRAND-1);
        color: var(--TEXT-COLOR);
        font-size: var(--FONT-SIZE-BASE);
    }

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

### Icons

base/base.icons

Accessibility note. In some cases your icon will need an appropriate text alternative. If the icon is informative and not accompanied by a text label, add invisible text for screenreaders with the `.u-screen-reader-only` class. See the non-text content success criterion
(external). When adding labels or instructions that are only visible to users of assistive technology (such as alt and aria-label attributes), make sure the text strings can be localised if the website is multilingual.

If you use a more detailed icon it can become unreadable. Use the extra class `.ai--thin` in order to make strokes a bit thinner.
#ai-a11y

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-a11y" /></svg></span>

#ai-accounting-bill

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-accounting-bill" /></svg></span>

#ai-accounting-bills

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-accounting-bills" /></svg></span>

#ai-add-square

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-add-square" /></svg></span>

#ai-add

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-add" /></svg></span>

#ai-advertising-megaphone

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-advertising-megaphone" /></svg></span>

#ai-alarm-bell

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alarm-bell" /></svg></span>

#ai-alert-circle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-circle" /></svg></span>

#ai-alert-diamond

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-diamond" /></svg></span>

#ai-alert-triangle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-triangle" /></svg></span>

#ai-analytics-bars

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-analytics-bars" /></svg></span>

#ai-analytics-pie-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-analytics-pie-1" /></svg></span>

#ai-angle-brackets

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-angle-brackets" /></svg></span>

#ai-app-window

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-app-window" /></svg></span>

#ai-archive

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-archive" /></svg></span>

#ai-arrange-letter

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrange-letter" /></svg></span>

#ai-arrange-number

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrange-number" /></svg></span>

#ai-arrow-button-down-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-button-down-1" /></svg></span>

#ai-arrow-button-left-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-button-left-1" /></svg></span>

#ai-arrow-button-right-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-button-right-1" /></svg></span>

#ai-arrow-button-up-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-button-up-1" /></svg></span>

#ai-arrow-down-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>

#ai-arrow-left-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span>

#ai-arrow-right-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>

#ai-arrow-up-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-up-1" /></svg></span>

#ai-attachment

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-attachment" /></svg></span>

#ai-audio-file-volume

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-audio-file-volume" /></svg></span>

#ai-bicycle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-bicycle" /></svg></span>

#ai-bin

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-bin" /></svg></span>

#ai-bluetooth

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-bluetooth" /></svg></span>

#ai-book-open

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-book-open" /></svg></span>

#ai-bookmarks-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-bookmarks-2" /></svg></span>

#ai-brightness-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-brightness-1" /></svg></span>

#ai-brightness

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-brightness" /></svg></span>

#ai-button-loop

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-button-loop" /></svg></span>

#ai-button-shuffle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-button-shuffle" /></svg></span>

#ai-button-split

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-button-split" /></svg></span>

#ai-calendar-3

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-calendar-3" /></svg></span>

#ai-calendar

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-calendar" /></svg></span>

#ai-camera-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-camera-1" /></svg></span>

#ai-car-retro-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-car-retro-2" /></svg></span>

#ai-chat-translate

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-chat-translate" /></svg></span>

#ai-check-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-check-1" /></svg></span>

#ai-close

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-close" /></svg></span>

#ai-cloud

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cloud" /></svg></span>

#ai-cog-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cog-1" /></svg></span>

#ai-cog-double-3

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cog-double-3" /></svg></span>

#ai-common-file-double-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-common-file-double-2" /></svg></span>

#ai-common-file-empty

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-common-file-empty" /></svg></span>

#ai-common-file-text

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-common-file-text" /></svg></span>

#ai-compass-arrow

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-compass-arrow" /></svg></span>

#ai-computer-bug

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-computer-bug" /></svg></span>

#ai-controls-forward

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-controls-forward" /></svg></span>

#ai-controls-pause

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-controls-pause" /></svg></span>

#ai-controls-play

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-controls-play" /></svg></span>

#ai-controls-record

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-controls-record" /></svg></span>

#ai-controls-rewind

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-controls-rewind" /></svg></span>

#ai-controls-stop

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-controls-stop" /></svg></span>

#ai-copy-paste-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-copy-paste-1" /></svg></span>

#ai-credit-card-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-credit-card-1" /></svg></span>

#ai-cursor-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor-1" /></svg></span>

#ai-cursor-hand-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor-hand-1" /></svg></span>

#ai-cursor-hand-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor-hand-2" /></svg></span>

#ai-cursor-select-frame-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor-select-frame-1" /></svg></span>

#ai-cursor-select-frame

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor-select-frame" /></svg></span>

#ai-cursor-target-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor-target-1" /></svg></span>

#ai-cursor

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-cursor" /></svg></span>

#ai-data-transfer-diagonal

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-data-transfer-diagonal" /></svg></span>

#ai-database-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-database-2" /></svg></span>

#ai-delete-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-delete-2" /></svg></span>

#ai-developer-community-github-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-developer-community-github-1" /></svg></span>

#ai-direction-button-arrows

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-direction-button-arrows" /></svg></span>

#ai-dislike-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-dislike-2" /></svg></span>

#ai-download-bottom

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-download-bottom" /></svg></span>

#ai-drawer-download

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-drawer-download" /></svg></span>

#ai-drawer-file

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-drawer-file" /></svg></span>

#ai-drawer-open

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-drawer-open" /></svg></span>

#ai-drawer-upload

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-drawer-upload" /></svg></span>

#ai-earth-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-earth-1" /></svg></span>

#ai-earth-3

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-earth-3" /></svg></span>

#ai-email-action-unread

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-email-action-unread" /></svg></span>

#ai-expand-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-expand-1" /></svg></span>

#ai-expand-3

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-expand-3" /></svg></span>

#ai-expand-vertical-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-expand-vertical-1" /></svg></span>

#ai-expand-vertical-3

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-expand-vertical-3" /></svg></span>

#ai-face-id

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-face-id" /></svg></span>

#ai-file-code-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-file-code-1" /></svg></span>

#ai-file-code

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-file-code" /></svg></span>

#ai-filter-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-filter-1" /></svg></span>

#ai-filter-text

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-filter-text" /></svg></span>

#ai-flag-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-flag-1" /></svg></span>

#ai-flash

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-flash" /></svg></span>

#ai-floppy-disk-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-floppy-disk-2" /></svg></span>

#ai-folder-open

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-folder-open" /></svg></span>

#ai-folder

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-folder" /></svg></span>

#ai-gauge-dashboard

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-gauge-dashboard" /></svg></span>

#ai-graph-stats-ascend

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-graph-stats-ascend" /></svg></span>

#ai-graph-stats-descend

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-graph-stats-descend" /></svg></span>

#ai-graph-stats

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-graph-stats" /></svg></span>

#ai-hammer-wench

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-hammer-wench" /></svg></span>

#ai-hand-drag-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-hand-drag-1" /></svg></span>

#ai-hand-drag

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-hand-drag" /></svg></span>

#ai-hard-drive

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-hard-drive" /></svg></span>

#ai-headphones-customer-support-human

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-headphones-customer-support-human" /></svg></span>

#ai-help-wheel

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-help-wheel" /></svg></span>

#ai-hierarchy-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-hierarchy-1" /></svg></span>

#ai-house-chimney

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-house-chimney" /></svg></span>

#ai-hyperlink-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-hyperlink-2" /></svg></span>

#ai-image-file-landscape

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-image-file-landscape" /></svg></span>

#ai-info

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-info" /></svg></span>

#ai-iris-scan-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-iris-scan-1" /></svg></span>

#ai-keyboard-arrow-bottom-left

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-bottom-left" /></svg></span>

#ai-keyboard-arrow-bottom-right

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-bottom-right" /></svg></span>

#ai-keyboard-arrow-down

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-down" /></svg></span>

#ai-keyboard-arrow-left

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-left" /></svg></span>

#ai-keyboard-arrow-right

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-right" /></svg></span>

#ai-keyboard-arrow-top-left

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-top-left" /></svg></span>

#ai-keyboard-arrow-top-right

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-top-right" /></svg></span>

#ai-keyboard-arrow-up

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard-arrow-up" /></svg></span>

#ai-keyboard

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-keyboard" /></svg></span>

#ai-laptop

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-laptop" /></svg></span>

#ai-layers

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-layers" /></svg></span>

#ai-layout-column

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-layout-column" /></svg></span>

#ai-layout-headline

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-layout-headline" /></svg></span>

#ai-layout-module-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-layout-module-1" /></svg></span>

#ai-legal-scale-unequal-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-legal-scale-unequal-1" /></svg></span>

#ai-light-bulb-shine

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-light-bulb-shine" /></svg></span>

#ai-like-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-like-2" /></svg></span>

#ai-list-bullets

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-list-bullets" /></svg></span>

#ai-list-numbers

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-list-numbers" /></svg></span>

#ai-location-off-target

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-location-off-target" /></svg></span>

#ai-location-target-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-location-target-1" /></svg></span>

#ai-location-target

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-location-target" /></svg></span>

#ai-location-user

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-location-user" /></svg></span>

#ai-lock-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-lock-2" /></svg></span>

#ai-lock-unlock-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-lock-unlock-1" /></svg></span>

#ai-login-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-login-1" /></svg></span>

#ai-login-key

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-login-key" /></svg></span>

#ai-logout-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-logout-1" /></svg></span>

#ai-love-it

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-love-it" /></svg></span>

#ai-maps

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-maps" /></svg></span>

#ai-meeting-camera

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-meeting-camera" /></svg></span>

#ai-meeting-headphones-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-meeting-headphones-1" /></svg></span>

#ai-messages-bubble-double

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-messages-bubble-double" /></svg></span>

#ai-messages-bubble

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-messages-bubble" /></svg></span>

#ai-mobile-phone

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-mobile-phone" /></svg></span>

#ai-module-puzzle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-module-puzzle" /></svg></span>

#ai-monitor

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-monitor" /></svg></span>

#ai-mouse

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-mouse" /></svg></span>

#ai-move-expand-vertical

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-move-expand-vertical" /></svg></span>

#ai-move-shrink-vertical

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-move-shrink-vertical" /></svg></span>

#ai-multiple-neutral-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-multiple-neutral-2" /></svg></span>

#ai-music-note-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-music-note-2" /></svg></span>

#ai-navigation-menu-4

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-4" /></svg></span>

#ai-navigation-menu-horizontal

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-horizontal" /></svg></span>

#ai-navigation-menu-vertical

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-vertical" /></svg></span>

#ai-navigation-menu

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu" /></svg></span>

#ai-navigation-next

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-next" /></svg></span>

#ai-navigation-previous

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-previous" /></svg></span>

#ai-newspaper-fold

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-newspaper-fold" /></svg></span>

#ai-office-file-adobe

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-office-file-adobe" /></svg></span>

#ai-office-file-graph

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-office-file-graph" /></svg></span>

#ai-office-file-hierarchy

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-office-file-hierarchy" /></svg></span>

#ai-office-file-sheet

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-office-file-sheet" /></svg></span>

#ai-office-file-text-graph

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-office-file-text-graph" /></svg></span>

#ai-office-file-text

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-office-file-text" /></svg></span>

#ai-os-system-apple

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-os-system-apple" /></svg></span>

#ai-os-system-microsoft

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-os-system-microsoft" /></svg></span>

#ai-overview

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-overview" /></svg></span>

#ai-paragraph-center-align

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-paragraph-center-align" /></svg></span>

#ai-paragraph-justified-align

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-paragraph-justified-align" /></svg></span>

#ai-paragraph-left-align

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-paragraph-left-align" /></svg></span>

#ai-paragraph-right-align

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-paragraph-right-align" /></svg></span>

#ai-paragraph

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-paragraph" /></svg></span>

#ai-pencil-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-pencil-1" /></svg></span>

#ai-pencil-write-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-pencil-write-1" /></svg></span>

#ai-phone-charger

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-phone-charger" /></svg></span>

#ai-phone

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-phone" /></svg></span>

#ai-pin-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-pin-1" /></svg></span>

#ai-pin-3

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-pin-3" /></svg></span>

#ai-pin

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-pin" /></svg></span>

#ai-power-button

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-power-button" /></svg></span>

#ai-print-text

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-print-text" /></svg></span>

#ai-professional-network-linkedin

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-professional-network-linkedin" /></svg></span>

#ai-professional-tool-dropbox

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-professional-tool-dropbox" /></svg></span>

#ai-professional-tool-google-drive

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-professional-tool-google-drive" /></svg></span>

#ai-programming-browser

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-programming-browser" /></svg></span>

#ai-question-circle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-question-circle" /></svg></span>

#ai-rating-half-star

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-rating-half-star" /></svg></span>

#ai-rating-star

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-rating-star" /></svg></span>

#ai-redo

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-redo" /></svg></span>

#ai-remove-square-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove-square-1" /></svg></span>

#ai-remove

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span>

#ai-rss-feed

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-rss-feed" /></svg></span>

#ai-ruler

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-ruler" /></svg></span>

#ai-scissors-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-scissors-2" /></svg></span>

#ai-scroll-horizontal

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-scroll-horizontal" /></svg></span>

#ai-scroll-vertical

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-scroll-vertical" /></svg></span>

#ai-search

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-search" /></svg></span>

#ai-send-email

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-send-email" /></svg></span>

#ai-settings-horizontal

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-settings-horizontal" /></svg></span>

#ai-settings-vertical

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-settings-vertical" /></svg></span>

#ai-share-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-share-1" /></svg></span>

#ai-share-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-share-2" /></svg></span>

#ai-shop-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-shop-1" /></svg></span>

#ai-shopping-basket-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-shopping-basket-2" /></svg></span>

#ai-shopping-cart-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-shopping-cart-1" /></svg></span>

#ai-shrink-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-shrink-1" /></svg></span>

#ai-shrink-2

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-shrink-2" /></svg></span>

#ai-single-neutral

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-single-neutral" /></svg></span>

#ai-social-instagram

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-instagram" /></svg></span>

#ai-social-media-facebook

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-facebook" /></svg></span>

#ai-social-media-meetup-alternate

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-meetup-alternate" /></svg></span>

#ai-social-media-snapchat

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-snapchat" /></svg></span>

#ai-social-media-tiktok

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-tiktok" /></svg></span>

#ai-social-media-twitter

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-twitter" /></svg></span>

#ai-social-media-x

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-x" /></svg></span>

#ai-social-media-yammer

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-yammer" /></svg></span>

#ai-social-music-podcast

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-music-podcast" /></svg></span>

#ai-social-video-youtube-clip

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-video-youtube-clip" /></svg></span>

#ai-subtract-square

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-subtract-square" /></svg></span>

#ai-subtract

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-subtract" /></svg></span>

#ai-switch-off-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-switch-off-1" /></svg></span>

#ai-switch-on-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-switch-on-1" /></svg></span>

#ai-synchronize-arrows-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-synchronize-arrows-1" /></svg></span>

#ai-synchronize-arrows-three

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-synchronize-arrows-three" /></svg></span>

#ai-tags-double

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-tags-double" /></svg></span>

#ai-tags

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-tags" /></svg></span>

#ai-text-bold

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-text-bold" /></svg></span>

#ai-text-italic

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-text-italic" /></svg></span>

#ai-text-strike-through

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-text-strike-through" /></svg></span>

#ai-text-underline

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-text-underline" /></svg></span>

#ai-time-clock-circle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-time-clock-circle" /></svg></span>

#ai-toilet-paper-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-toilet-paper-1" /></svg></span>

#ai-touch-id-5

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-touch-id-5" /></svg></span>

#ai-undo

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-undo" /></svg></span>

#ai-upload-bottom

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-upload-bottom" /></svg></span>

#ai-upload-button

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-upload-button" /></svg></span>

#ai-usb-port-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-usb-port-1" /></svg></span>

#ai-user-signal-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-user-signal-1" /></svg></span>

#ai-vectors-anchor-rectangle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-vectors-anchor-rectangle" /></svg></span>

#ai-vectors-anchor-square

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-vectors-anchor-square" /></svg></span>

#ai-vectors-anchor-triangle

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-vectors-anchor-triangle" /></svg></span>

#ai-vectors-line-path

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-vectors-line-path" /></svg></span>

#ai-video-file-camera

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-video-file-camera" /></svg></span>

#ai-video-player

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-video-player" /></svg></span>

#ai-view-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-view-1" /></svg></span>

#ai-view-off

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-view-off" /></svg></span>

#ai-volume-control-full

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-volume-control-full" /></svg></span>

#ai-volume-control-low

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-volume-control-low" /></svg></span>

#ai-volume-control-medium

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-volume-control-medium" /></svg></span>

#ai-volume-control-off

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-volume-control-off" /></svg></span>

#ai-watch-time

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-watch-time" /></svg></span>

#ai-wench-1

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-wench-1" /></svg></span>

#ai-wifi

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-wifi" /></svg></span>

#ai-zip-file

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-zip-file" /></svg></span>

#ai-zoom-in

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-zoom-in" /></svg></span>

#ai-zoom-out

    <span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-zoom-out" /></svg></span>

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

Accessibility note. Never use a heading class without a heading element.

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

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.

Accessibility note. Make sure there is enough contrast between text and background. See the contrast success criterion
(external).

#### .u-bg

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

#### .u-bg-inverted

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

#### .u-bg-primary

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

#### .u-bg-primary-inverted

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

#### .u-bg-secondary

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

#### .u-bg-secondary-inverted

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

#### .u-bg-tertiary

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

#### .u-bg-tertiary-inverted

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

#### .u-bg-u-bg-info

    <div class="u-bg-u-bg-info">.u-bg-u-bg-info</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-danger

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

#### .u-bg-white

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

#### .u-bg-black

    <div class="u-bg-black">.u-bg-black</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-3xl

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

.u-margin-xl

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

.u-margin-l

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

.u-margin

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

.u-margin-s

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

.u-margin-xs

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

.u-margin-xxs

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

.u-no-margin

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

.u-margin-top-3xl

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

.u-margin-top-xl

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

.u-margin-top-l

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

.u-margin-top

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

.u-margin-top-s

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

.u-margin-top-xs

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

.u-margin-top-xxs

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

.u-no-margin-top

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

.u-margin-right-3xl

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

.u-margin-right-xl

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

.u-margin-right-l

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

.u-margin-right

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

.u-margin-right-s

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

.u-margin-right-xs

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

.u-margin-right-xxs

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

.u-no-margin-right

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

.u-margin-bottom-3xl

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

.u-margin-bottom-xl

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

.u-margin-bottom-l

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

.u-margin-bottom

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

.u-margin-bottom-s

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

.u-margin-bottom-xs

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

.u-margin-bottom-xxs

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

.u-no-margin-bottom

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

.u-margin-left-3xl

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

.u-margin-left-xl

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

.u-margin-left-l

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

.u-margin-left

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

.u-margin-left-s

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

.u-margin-left-xs

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

.u-margin-left-xxs

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

.u-no-margin-left

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

### Text

utilities/utilities.text

Helper classes for changing the appearance of text.

Accessibility note. Make sure there is enough contrast between text and background. See the contrast success criterion
(external).

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

Accessibility note. Use with caution. It may cause confusion because underlined text is stronly associated with a link.

    <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-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-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-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-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-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-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-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-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-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-tertiary">.u-text-tertiary</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-info">.u-text-info</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.

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

    <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-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">.u-text</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-inverted">.u-text-inverted</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.

Accessibility note. For people with some reading or vision disabilities, long lines of text can become a significant barrier. Try to keep the line length below 80 characters.

    <p class="u-text-readable">.u-text-readable</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
avatarTitle
avatarTitle
avatarTitle

    <a href="#">
      <div class="a-avatar">
        <span class="u-screen-reader-only">avatarTitle</span>
        <span class="a-avatar__icon" aria-label="avatarTitle" role="img">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-single-neutral" /></svg></span>
        </span>
      </div>
    </a>

AM
AM
AM

    <a href="#">
      <div class="a-avatar">
        <span class="a-avatar__letter">AM</span>
      </div>
    </a>

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

avatarTitle
AM

    <a href="#">
      <div class="a-avatar a-avatar--rounded">
        ...
      </div>
    </a>

### Badge

atoms/atoms.badge
1 23 4567

    <span class="a-badge">1</span>
    <span class="a-badge a-badge--outlined">23</span>
    <span class="a-badge a-badge--transparent">4567</span>

1 23 4567

    <span class="a-badge a-badge--primary">1</span>
    <span class="a-badge a-badge--primary a-badge--outlined">23</span>
    <span class="a-badge a-badge--primary a-badge--transparent">4567</span>

### Breadcrumb

atoms/atoms.breadcrumb

    <ul class="a-breadcrumb">
      <li><a href="#">Page</a></li>
      <li><a href="#">Subpage</a></li>
      <li>Current page</li>
    </ul>

# Current page

The current page at the end of the breadcrumb may be omitted only if it's displayed as a title below.

    <ul class="a-breadcrumb">
      <li><a href="#">Page</a></li>
      <li><a href="#">Subpage</a></li>
    </ul>

    <h1 class="h4 u-margin-top-xxs">Current page</h1>

### Button

atoms/atoms.button

#### Contained buttons

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

    <button class="a-button" disabled>Disabled 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>

#### Outlined buttons

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

    <button class="a-button a-button--outlined" disabled>Disabled button</button>

#### Text buttons

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

    <button class="a-button a-button--text" disabled>Disabled button</button>

#### Button sizes

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

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

#### Full width buttons

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

#### Icon buttons

Note that the button sizes are omitted in the code examples. Just add the `.a-button--l` or `.a-button--s` class to achieve the wanted result.

    <button class="a-button has-icon-left">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span>
      Icon left
    </button>

    <button class="a-button a-button--text has-icon-left">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span>
      Icon left
    </button>

    <button class="a-button has-icon-right">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>
      Icon right
    </button>

    <button class="a-button a-button--text has-icon-right">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>
      Icon right
    </button>

Accessibility note. All 'icon only' buttons must be accompanied by an appropriate text alternative. See the non-text content success criterion
(external). Consider using an ARIA label or the `.u-screen-reader-only` utility class.

    <button class="a-button has-icon" aria-label="Download">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-download-bottom" /></svg></span>
    </button>

    <button class="a-button a-button--text has-icon" aria-label="Download">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-download-bottom" /></svg></span>
    </button>

    <button class="a-button has-icon-right">
      <span class="a-spinner a-spinner--xs" role="alert">
        <span class="a-spinner__circle">
          <span class="u-screen-reader-only">Fetching data...</span>
        </span>
      </span>

      Loading
    </button>

#### Buttons with avatar

    <button class="a-button a-button--text a-button--neutral has-avatar">
      <span class="a-avatar">
        <span class="a-avatar__icon" aria-label="avatarTitle">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-single-neutral" /></svg></span>
        </span>
      </span>

      Sign in
    </button>

    <button class="a-button has-avatar-with-inset">
      <span class="a-avatar a-avatar--primary">
        <span class="a-avatar__letter" aria-label="avatarTitle">A</span>
      </span>

      Anne Martens
    </button>

    <button class="a-button has-avatar-with-inset">
      <span class="a-avatar">
        <img src="..." alt="..." />
      </span>

      Anne Martens
    </button>

#### Social buttons

    <a href="#" class="a-button a-button--facebook has-icon" aria-label="Facebook">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-facebook" /></svg></span>
    </a>

    <a href="#" class="a-button a-button--x has-icon" aria-label="X">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-x" /></svg></span>
    </a>

    <a href="#" class="a-button a-button--linkedin has-icon" aria-label="LinkedIn">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-professional-network-linkedin" /></svg></span>
    </a>

    <a href="#" class="a-button a-button--instagram has-icon" aria-label="Instagram">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-instagram" /></svg></span>
    </a>

    <a href="#" class="a-button a-button--youtube has-icon" aria-label="YouTube">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-video-youtube-clip" /></svg></span>
    </a>

    <a href="#" class="a-button a-button--snapchat has-icon" aria-label="Snapchat">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-snapchat" /></svg></span>
    </a>

    <a href="#" class="a-button a-button--tiktok has-icon" aria-label="Tiktok">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-tiktok" /></svg></span>
    </a>

#### Transparent social buttons

    <a href="#" class="a-button a-button--social has-icon" aria-label="Facebook">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-facebook" /></svg></span>
    </a>

#### Negative social buttons

    <a href="#" class="a-button a-button--social a-button--negative has-icon" aria-label="Facebook">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-facebook" /></svg></span>
    </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
© Anne martens

    <div class="a-copyright">
      <span class="a-copyright__sign">©</span>
      <span class="a-copyright__label">Anne martens</span>
    </div>

### Form

atoms/atoms.form

Accessibility note. It is important to provide the user with clear instructions on how to complete the form. You can provide these both overall or inline. Note that you can not use the placeholder attribute as a replacement for clean instructions or for the label. See the input assistance success criterion
(external).

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>
      <small class="a-input__description" id="text-field-description">Input description</small>
      <input type="text" name="text-field" id="text-field" aria-describedby="text-field-description" />
    </div>

Text field disabled

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

Text field readonly

    <div class="a-input">
      <label class="a-input__label" for="text-field-readonly">Text field</label>
      <input type="text" name="text-field-readonly" id="text-field-readonly" readonly />
    </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`.

Optional text field (optional)

    <div class="a-input">
      <label class="a-input__label" for="optional-text-field">Optional text field (optional)</label>
      <input type="text" name="optional-text-field" id="optional-text-field" />
    </div>

Accessibility note. Literally including the phrase "(optional)" after a label is much clearer than any visual symbol you could use to mean the same thing. Someone may always wonder 'what does this asterisk mean?' and have to go hunting for a legend that explains things.

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" />
    </div>

Text field with character counter Input description 0 / 200

    <div class="a-input">
      <label class="a-input__label" for="text-field-with-character-counter">Text field with character counter</label>
      <small class="a-input__description" id="text-field-with-character-counter-description">Input description</small>
      <input type="text" name="text-field-with-character-counter" id="text-field-with-character-counter" aria-describedby="text-field-with-character-counter-description" />
      <small aria-live="polite" class="a-input__description u-text-right">0 / 200</small>
    </div>

Input checkbox
Option one is unchecked
Option two is checked
Option three is disabled
Option four is checked and disabled

    <fieldset class="a-input">
      <legend class="a-input__label">Input checkbox</legend>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox1" name="input-checkbox">
        <label for="checkbox1">Option one is unchecked</label>
      </div>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox2" name="input-checkbox" checked="">
        <label for="checkbox2">Option two is checked</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>
    </fieldset>

Input with nested checkboxes
Option one
Nested option one
Nested option two
Nested option three

    <fieldset class="a-input">
      <legend class="a-input__label">Input with nested checkboxes</legend>
      <div class="a-input__checkbox">
        <input type="checkbox" id="checkbox-indeterminate" name="input-checkbox">
        <label for="checkbox-indeterminate">Option one</label>
      </div>
      <div class="u-margin-left">
        <div class="a-input__checkbox">
          <input type="checkbox" id="nested-checkbox1" name="input-checkbox">
          <label for="nested-checkbox1">Nested option one</label>
        </div>
        <div class="a-input__checkbox">
          <input type="checkbox" id="nested-checkbox2" name="input-checkbox" checked="">
          <label for="nested-checkbox2">Nested option two</label>
        </div>
        <div class="a-input__checkbox">
          <input type="checkbox" id="nested-checkbox3" name="input-checkbox">
          <label for="nested-checkbox3">Nested option three</label>
        </div>
      </div>
    </fieldset>

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

    <fieldset class="a-input">
      <legend class="a-input__label">Input radio button</legend>
      <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>
    </fieldset>

Text area

    <div class="a-input">
      <label class="a-input__label" for="input-textarea">Text area</label>
      <textarea name="input-textarea" id="input-textarea"></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="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></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="input-select-inline">Inline select input</label>
      <div class="a-input__wrapper a-input__wrapper--inline">
        <select name="input-select-inline" id="input-select-inline">
          <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="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>
      </div>
    </div>

Time

    <div class="a-input">
      <label class="a-input__label" for="time-field">Time</label>
      <div class="a-input__wrapper">
        <input type="time" name="time-field" id="time-field" />
      </div>
    </div>

Time

    <div class="a-input has-icon-right">
      <label class="a-input__label" for="select-time">Time</label>
      <div class="a-input__wrapper">
        <select name="select-time" id="select-time">
          <option value="" disabled selected>Select...</option>
          <option value="09:00">09:00</option>
          <option>...</option>
        </select>
        <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>
      </div>
    </div>

#### Input field sizes

Small text field
Small select with options
Small text area

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

    <div class="a-input a-input--s has-icon-right">
      <label class="a-input__label" for="input-select-small">Select with options</label>
      <div class="a-input__wrapper">
        <select name="input-select-small" id="input-select-small">
          ...
        </select>
        <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>
      </div>
    </div>

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

Large text field
Large select with options
Large text area

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

    <div class="a-input a-input--l has-icon-right">
      <label class="a-input__label" for="input-select-large">Select with options</label>
      <div class="a-input__wrapper">
        <select name="input-select-large" id="input-select-large">
          ...
        </select>
        <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>
      </div>
    </div>

    <div class="a-input a-input--l">
      <label class="a-input__label" for="input-textarea-large">Text area</label>
      <textarea name="input-textarea-large" id="input-textarea-large"></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="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-single-neutral" /></svg></span>
        <input type="text" name="text-field-icon-left" id="text-field-icon-left" />
      </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" />
        <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-view-1" /></svg></span>
      </div>
    </div>

Text field with left addon
€

    <div class="a-input has-addon-left">
      <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" />
      </div>
    </div>

Text field with right addon
km

    <div class="a-input has-addon-right">
      <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" />
        <div class="a-input__addon">km</div>
      </div>
    </div>

#### Input states

Success text field
Success description

    <div class="a-input">
      <label class="a-input__label" for="text-field-success">Success text field</label>
      <small class="a-input__description is-success" id="text-field-success-description"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-check-1" /></svg></span> Success description</div>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-success" id="text-field-success" aria-describedby="text-field-success-description" />
      </div>
    </div>

Error text field
Error description

    <div class="a-input has-error">
      <label class="a-input__label" for="text-field-error">Error text field</label>
      <small class="a-input__description is-error" id="text-field-error-description"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-triangle" /></svg></span>Error description</small>
      <div class="a-input__wrapper">
        <input type="text" name="text-field-error" id="text-field-error" aria-describedby="text-field-error-description" />
      </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>

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">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span>This is a nice link with an icon to the left
    </a>

This is a nice link with an icon to the right
(external)

    <a href="#" class="has-icon-right">
      This is a nice link with an icon to the right<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-next" /></svg></span><span class="u-screen-reader-only"> (external)</span>
    </a>

### List

atoms/atoms.list

#### Textual list

- 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

#### Lined list

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

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

#### Icon list

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

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

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

#### Selectable list

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

#### Checkbox list

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

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

#### Avatar list

- Anne Martens
- JJ
  Jan Janssens
- EP
  Elke Peters
- FM
  Finn Maes

    <ul class="a-avatar-list">
      <li class="a-avatar-list__item">
        <a href="javascript:void(0);" class="a-avatar-list__item-container">
          <div class="a-avatar a-avatar--s a-avatar--rounded a-avatar-list__avatar">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar image." />
          </div>

          <div class="a-avatar-list__content">
            <span class="a-avatar-list__text">
              <span class="avatar-list__name paragraph">Anne Martens</span>
            </span>

            <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-horizontal" /></svg></span>
          </div>
        </a>
      </li>

      <li class="a-avatar-list__item is-active">
        <a href="javascript:void(0);" class="a-avatar-list__item-container">
          <div class="a-avatar a-avatar--s a-avatar--rounded a-avatar--primary a-avatar-list__avatar">
            <span class="a-avatar__letter">JJ</span>
          </div>

          <div class="a-avatar-list__content">
            <span class="a-avatar-list__text">
              <span class="avatar-list__name paragraph">Jan Janssens</span>
            </span>

            <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-horizontal" /></svg></span>
          </div>
        </a>
      </li>

      <li class="a-avatar-list__item">...</li>

      <li class="a-avatar-list__item">...</li>
    </ul>

- Anne Martens anne.martens@antwerpen.be
- JJ
  Jan Janssens jan.janssens@antwerpen.be
- EP
  Elke Peters elke.peters@antwerpen.be
- FM
  Finn Maes finn.maes@antwerpen.be

    <ul class="a-avatar-list">
      <li class="a-avatar-list__item">
        <a href="javascript:void(0);" class="a-avatar-list__item-container">
          <div class="a-avatar a-avatar--s a-avatar--rounded a-avatar-list__avatar">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar image." />
          </div>

          <div class="a-avatar-list__content">
            <span class="a-avatar-list__text">
              <span class="avatar-list__name paragraph">Anne Martens</span>
              <span class="small">anne.martens@antwerpen.be</span>
            </span>

            <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-horizontal" /></svg></span>
          </div>
        </a>
      </li>

      <li class="a-avatar-list__item">...</li>
    </ul>

- Anne Martens Copywriter anne.martens@antwerpen.be
- JJ
  Jan Janssens Developer jan.janssens@antwerpen.be
- EP
  Elke Peters Designer elke.peters@antwerpen.be
- FM
  Finn Maes Project manager finn.maes@antwerpen.be

    <ul class="a-avatar-list">
      <li class="a-avatar-list__item">
        <a href="javascript:void(0);" class="a-avatar-list__item-container">
          <div class="a-avatar a-avatar--s a-avatar--rounded a-avatar-list__avatar">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar image." />
          </div>

          <div class="a-avatar-list__content">
            <span class="a-avatar-list__text">
              <span class="avatar-list__name paragraph">Anne Martens</span>
              <span class="small">Copywriter</span>
              <span class="small">anne.martens@antwerpen.be</span>
            </span>

            <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu-horizontal" /></svg></span>
          </div>
        </a>
      </li>

      <li class="a-avatar-list__item">...</li>
    </ul>

- Anne Martens Copywriter anne.martens@antwerpen.be
- JJ
  Jan Janssens Developer jan.janssens@antwerpen.be
- EP
  Elke Peters Designer elke.peters@antwerpen.be
- FM
  Finn Maes Project manager finn.maes@antwerpen.be

    <ul class="a-avatar-list a-avatar-list--flushed">
      <li class="a-avatar-list__item">...</li>
    </ul>

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

### Page indicator

atoms/atoms.page-indicator

    <div class="a-page-indicator">
      <div class="a-page-indicator__item"></div>
      <div class="a-page-indicator__item is-active"></div>
      <div class="a-page-indicator__item"></div>
      <div class="a-page-indicator__item"></div>
    </div>

    <div class="a-page-indicator" role="tablist">
      <button class="a-page-indicator__item" aria-label="Go to page 1" role="tab"></button>
      <button class="a-page-indicator__item is-active" aria-label="Go to page 2" role="tab"></button>
      <button class="a-page-indicator__item" aria-label="Go to page 3" role="tab"></button>
      <button class="a-page-indicator__item" aria-label="Go to page 4" role="tab"></button>
    </div>

    <div class="a-page-indicator" role="tablist">
      <a href="#" class="a-page-indicator__item" aria-label="Go to page 1" role="tab"></a>
      <a href="#" class="a-page-indicator__item is-active" aria-label="Go to page 2" role="tab"></a>
      <a href="#" class="a-page-indicator__item" aria-label="Go to page 3" role="tab"></a>
      <a href="#" class="a-page-indicator__item" aria-label="Go to page 4" role="tab"></a>
    </div>

#### Page indicator sizes

    <div class="a-page-indicator a-page-indicator--s">
      ...
    </div>

    <div class="a-page-indicator a-page-indicator--l">
      ...
    </div>

#### Negative page indicator

    <div class="a-page-indicator a-page-indicator--negative">
      ...
    </div>

### Progress

atoms/atoms.progress

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

Please wait...

    <div class="a-progress">
      <div class="a-progress__label" id="progress-label-1">Please wait...</div>
      <div class="a-progress__inner">
        <div class="a-progress__bar" role="progressbar" aria-labelledby="progress-label-1" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
      </div>
    </div>

#### Progress sizes

Downloading 24/128 messages...

    <div class="a-progress a-progress--l">...</div>

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

### Range slider

atoms/atoms.range-slider

Accessibility note. Also check the ARIA best practices
(external) in order to make the range slider accessible.

Score
2

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Opacity</div>
        <div class="a-range-slider__label">20%</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__bar" style="width: 20%"></div>
        <div class="a-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
    </div>

Score
2
0
10

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Opacity</div>
        <div class="a-range-slider__label">20%</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__bar" style="width: 20%"></div>
        <div class="a-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
      <div class="a-range-slider__descriptions">
        <div class="a-range-slider__description small">0%</div>
        <div class="a-range-slider__description small">100%</div>
      </div>
    </div>

Volume
2

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Opacity</div>
        <div class="a-range-slider__label">20%</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__bar" style="width: 20%"></div>
        <div class="a-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
      <div class="a-range-slider__descriptions">
        <div class="a-range-slider__description small"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-volume-control-off" /></svg></span></div>
        <div class="a-range-slider__description small"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-volume-control-full" /></svg></span></div>
      </div>
    </div>

Opacity
20%

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Opacity</div>
        <div class="a-range-slider__label">20%</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__tickmarks">
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
        </div>
        <div class="a-range-slider__bar" style="width: 20%"></div>
        <div class="a-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
    </div>

Opacity
20%
0%
100%

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Opacity</div>
        <div class="a-range-slider__label">20%</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__tickmarks">
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
        </div>
        <div class="a-range-slider__bar" style="width: 20%"></div>
        <div class="a-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
      <div class="a-range-slider__descriptions">
        <div class="a-range-slider__description small">0%</div>
        <div class="a-range-slider__description small">100%</div>
      </div>
    </div>

Price
€10 - €50

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Price</div>
        <div class="a-range-slider__label">€10 - €50</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__bar" style="left: 10%; width: 40%"></div>
        <div class="a-range-slider__handle" style="left: 10%;" role="slider" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
        <div class="a-range-slider__handle" style="left: 50%;" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
    </div>

Price
€10 - €50
0€
100€

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Price</div>
        <div class="a-range-slider__label">€10 - €50</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__bar" style="left: 10%; width: 40%"></div>
        <div class="a-range-slider__handle" style="left: 10%;" role="slider" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
        <div class="a-range-slider__handle" style="left: 50%;" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
      <div class="a-range-slider__descriptions">
        <div class="a-range-slider__description small">0€</div>
        <div class="a-range-slider__description small">100€</div>
      </div>
    </div>

Price
€10 - €50

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Price</div>
        <div class="a-range-slider__label">€10 - €50</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__tickmarks">
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
        </div>
        <div class="a-range-slider__bar" style="left: 10%; width: 40%"></div>
        <div class="a-range-slider__handle" style="left: 10%;" role="slider" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
        <div class="a-range-slider__handle" style="left: 50%;" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
    </div>

Price
€10 - €50
0€
100€

    <div class="a-range-slider">
      <div class="a-range-slider__labels">
        <div class="a-range-slider__label">Price</div>
        <div class="a-range-slider__label">€10 - €50</div>
      </div>
      <div class="a-range-slider__inner">
        <div class="a-range-slider__tickmarks">
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
          <div class="a-range-slider__tickmark"></div>
        </div>
        <div class="a-range-slider__bar" style="left: 10%; width: 40%"></div>
        <div class="a-range-slider__handle" style="left: 10%;" role="slider" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
        <div class="a-range-slider__handle" style="left: 50%;" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
      </div>
      <div class="a-range-slider__descriptions">
        <div class="a-range-slider__description small">0€</div>
        <div class="a-range-slider__description small">100€</div>
      </div>
    </div>

### Spinner

atoms/atoms.spinner
Fetching data...
Fetching data...
Fetching data...

    <div class="a-spinner" role="alert">
      <span class="a-spinner__circle">
        <span class="u-screen-reader-only">Fetching data...</span>
      </span>
    </div>

    <div class="a-spinner" role="alert">
      <span class="a-spinner__circle"></span>
      <span class="a-spinner__text">Fetching data...</span>
    </div>

    <div class="a-spinner a-spinner--vertical" role="alert">
      <span class="a-spinner__circle"></span>
      <span class="a-spinner__text">Fetching data...</span>
    </div>

Fetching data...
Fetching data...
Fetching data...

    <div class="a-spinner a-spinner--s" role="alert">...</div>

Fetching data...
Fetching data...
Fetching data...

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--l" role="alert">...</div>

### Switch

atoms/atoms.switch

Change the `aria-checked` attribute programmatically to true to switch.

    <button class="a-switch" role="switch" aria-checked="true">
      <div class="a-switch__toggle" aria-hidden="true"></div>
      <div class="a-switch__label a-switch__label--on" aria-hidden="true">Aan</div>
      <div class="a-switch__label a-switch__label--off" aria-hidden="true">Uit</div>
    </button>

    <button class="a-switch" role="switch" aria-checked="false">
      <div class="a-switch__toggle" aria-hidden="true"></div>
      <div class="a-switch__label a-switch__label--on" aria-hidden="true">Aan</div>
      <div class="a-switch__label a-switch__label--off" aria-hidden="true">Uit</div>
    </button>

    <button class="a-switch" role="switch" aria-checked="true">
      <div class="a-switch__label a-switch__label--on" aria-hidden="true">Ja</div>
      <div class="a-switch__label a-switch__label--off" aria-hidden="true">Nee</div>
      <div class="a-switch__toggle" aria-hidden="true"></div>
    </button>

    <button class="a-switch" role="switch" aria-checked="false">
      <div class="a-switch__label a-switch__label--on" aria-hidden="true">Ja</div>
      <div class="a-switch__label a-switch__label--off" aria-hidden="true">Nee</div>
      <div class="a-switch__toggle" aria-hidden="true"></div>
    </button>

    <button class="a-switch" role="switch" aria-checked="true" disabled>
      <div class="a-switch__label a-switch__label--on" aria-hidden="true">Ja</div>
      <div class="a-switch__label a-switch__label--off" aria-hidden="true">Nee</div>
      <div class="a-switch__toggle" aria-hidden="true"></div>
    </button>

    <button class="a-switch" role="switch" aria-checked="false" disabled>
      <div class="a-switch__label a-switch__label--on" aria-hidden="true">Ja</div>
      <div class="a-switch__label a-switch__label--off" aria-hidden="true">Nee</div>
      <div class="a-switch__toggle" aria-hidden="true"></div>
    </button>

#### Switch with label

Switch label

    <div class="a-input">
      <div class="a-input__label" id="switch-label" for="switch-button">Switch label</div>
      <button class="a-switch" role="switch" aria-checked="true" aria-labelledby="switch-label">
        <div class="a-switch__toggle" aria-hidden="true">
          <div class="a-switch__toggle-label a-switch__toggle-label--on" aria-hidden="true" role="presentation">i</div>
          <div class="a-switch__toggle-label a-switch__toggle-label--off" aria-hidden="true" role="presentation">o</div>
        </div>
        <div class="a-switch__label a-switch__label--on" aria-hidden="true">Aan</div>
        <div class="a-switch__label a-switch__label--off" aria-hidden="true">Uit</div>
      </button>
    </div>

### Table

atoms/atoms.table

#### Standard tables

Standard table
Snack | Description | Stock | Price
--- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Chips | Salty, crunchy goodness | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Candy bar | Chewy and quite nutty | 240 | €1,49

    <table class="a-table">
      <caption>Standard table</caption>
      <thead>
        <tr>
          <th>Snack</th>
          <th>Description</th>
          <th class="u-text-right">Stock</th>
          <th class="u-text-right">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="u-text-bold">Ice cream</td>
          <td class="small">Tasty, frozen treat for a hot day</small></td>
          <td class="u-text-right small">160</small></td>
          <td class="u-text-right">€2,49</td>
        </tr>
        <tr>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
        </tr>
      </tbody>
    </table>

Standard table with checkboxes
Select all rows | Snack | Description | Stock | Price
--- | --- | --- | --- | ---
Select row | Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Select row | Chips | Salty, crunchy goodness | 48 | €1,99
Select row | Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Select row | Candy bar | Chewy and quite nutty | 240 | €1,49

    <table class="a-table">
      <caption>Standard table with checkboxes</caption>
      <thead>
        <tr>
          <th>
            <div class="a-input">
              <div class="a-input__checkbox">
                <input type="checkbox" id="table-checkbox1" name="table-checkbox">
                <label for="table-checkbox1"><span class="u-screen-reader-only">Select all rows</span><span class="u-screen-reader-only">Select row</span></label>
              </div>
            </div>
          </th>
          <th>Snack</th>
          <th>Description</th>
          <th class="u-text-right">Stock</th>
          <th class="u-text-right">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr class="is-clickable">
          <td>...</td>
        </tr>
        <tr class="is-clickable is-selected">
          <td>
            <div class="a-input">
              <div class="a-input__checkbox">
                <input type="checkbox" id="table-checkbox3" name="table-checkbox" checked>
                <label for="table-checkbox3"><span class="u-screen-reader-only">Select row</span><span class="u-screen-reader-only">Select row</span></label>
              </div>
            </div>
          </td>
          <td class="u-text-bold">Chips</td>
          <td class="small">Salty, crunchy goodness</small></td>
          <td class="u-text-right small">48</small></td>
          <td class="u-text-right">€1,99</td>
        </tr>
        <tr class="is-clickable">
          <td>...</td>
        </tr>
        <tr class="is-clickable">
          <td>...</td>
        </tr>
      </tbody>
    </table>

Standard table with checkboxes and actions
Select all rows | Snack | Description | Stock | Price | Action
--- | --- | --- | --- | --- | ---
Select row | Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49 |
Select row | Chips | Salty, crunchy goodness | 48 | €1,99 |
Select row | Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99 |
Select row | Candy bar | Chewy and quite nutty | 240 | €1,49 |

    <table class="a-table">
      <caption>Standard table with checkboxes</caption>
      <thead>
        <tr>
          <th>
            <div class="a-input">
              <div class="a-input__checkbox">
                <input type="checkbox" id="table-checkbox-and-action1" name="table-checkbox-and-action">
                <label for="table-checkbox-and-action1"><span class="u-screen-reader-only">Select all rows</span></label>
              </div>
            </div>
          </th>
          <th>Snack</th>
          <th>Description</th>
          <th class="u-text-right">Stock</th>
          <th class="u-text-right">Price</th>
          <th class="u-text-right">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
        </tr>
        <tr>
          <td>
            <div class="a-input">
              <div class="a-input__checkbox">
                <input type="checkbox" id="table-checkbox-and-action3" name="table-checkbox-and-action" checked>
                <label for="table-checkbox-and-action3"><span class="u-screen-reader-only">Select row</span></label>
              </div>
            </div>
          </td>
          <td class="u-text-bold">Chips</td>
          <td class="small">Salty, crunchy goodness</small></td>
          <td class="u-text-right small">48</small></td>
          <td class="u-text-right">€1,99</td>
          <td class="u-text-right"><button class="a-button a-button--s">Buy</button></td>
        </tr>
        <tr>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
        </tr>
      </tbody>
    </table>

#### Sortable tables

Sortable table with one unsorted column
Snack |  | Stock | Price
--- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Chips | Salty, crunchy goodness | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Candy bar | Chewy and quite nutty | 240 | €1,49

    <table class="a-table">
      <caption>Sortable table with one unsorted column</caption>
      <thead>
        <tr>
          <th>Snack</th>
          <th class="is-collapsed" aria-sort="none">
            <button class="a-table__sort-button a-table__sort-button--unsorted">Description</button>
          </th>
          <th class="u-text-right">Stock</th>
          <th class="u-text-right">Price</th>
        </tr>
      </thead>
      <tbody>
      <tr>...</tr>
      </tbody>
    </table>

Sortable table with one column sorted ascending
Snack |  | Stock | Price
--- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Chips | Salty, crunchy goodness | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Candy bar | Chewy and quite nutty | 240 | €1,49

Description column sorted ascending

    <table class="a-table">
      <caption>Sortable table with one column sorted ascending</caption>
      <thead>
        <tr>
          <th>Snack</th>
          <th class="is-collapsed" aria-sort="ascending">
            <button class="a-table__sort-button a-table__sort-button--sorted-asc">Description</button>
          </th>
          <th class="u-text-right">Stock</th>
          <th class="u-text-right">Price</th>
        </tr>
      </thead>
      <tbody>
      <tr>...</tr>
      </tbody>
    </table>

    <div class="u-screen-reader-only" aria-live="polite">Description column sorted ascending</div>

Sortable table with one column sorted descending
Snack |  | Stock | Price
--- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Chips | Salty, crunchy goodness | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Candy bar | Chewy and quite nutty | 240 | €1,49

Description column sorted descending

    <table class="a-table">
      <caption>Sortable table with one column sorted descending</caption>
      <thead>
        <tr>
          <th>Snack</th>
          <th class="is-collapsed" aria-sort="descending">
            <button class="a-table__sort-button a-table__sort-button--sorted-desc">Description</button>
          </th>
          <th class="u-text-right">Stock</th>
          <th class="u-text-right">Price</th>
        </tr>
      </thead>
      <tbody>
      <tr>...</tr>
      </tbody>
    </table>

    <div class="u-screen-reader-only" aria-live="polite">Description column sorted descending</div>

#### Table cell options

Table with less padding
Snack | Description | Stock | Price | Action
--- | --- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49 |
Chips | Salty, crunchy goodness | 48 | €1,99 |
Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99 |
Candy bar | Chewy and quite nutty | 240 | €1,49 |

    <table class="a-table">
      <caption>Table with less padding</caption>
      <thead>
        <tr>
          <th class="is-condensed">Table cells with smaller padding</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="is-condensed">...</td>
        </tr>
      </tbody>
    </table>

#### Table schemes

Striped table with checkboxes
Select all row | Snack | Description | Stock | Price
--- | --- | --- | --- | ---
Select row | Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Select row | Chips | Salty, crunchy goodness | 48 | €1,99
Select row | Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Select row | Candy bar | Chewy and quite nutty | 240 | €1,49

    <table class="a-table a-table--striped">
      <caption>Striped table with checkbox</caption>
      <thead>
        <tr>...</tr>
      </thead>
      <tbody>
        <tr>...</tr>
      </tbody>
    </table>

Open table with checkboxes
Select all rows | Snack | Description | Stock | Price
--- | --- | --- | --- | ---
Select row | Ice cream | Tasty, frozen treat for a hot day | 160 | €2,49
Select row | Chips | Salty, crunchy goodness | 48 | €1,99
Select row | Lollipop | Rainbow flavors with a bubblegum center | 480 | €0,99
Select row | Candy bar | Chewy and quite nutty | 240 | €1,49

    <table class="a-table a-table--open">
      <caption>Open table with checkboxes</caption>
      <thead>
        <tr>...</tr>
      </thead>
      <tbody>
        <tr>...</tr>
      </tbody>
    </table>

#### Responsive wrapper for tables

Snack | Description | Ingredients | Stock | Price
--- | --- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | Milk, Vanilla | 160 | €2,49
Chips | Salty, crunchy goodness | Potatoes, sea salt | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | Water, corn syrup | 480 | €0,99
Candy bar | Chewy and quite nutty | Cocoa butter | 240 | €1,49

    <div class="a-table-responsive-wrapper has-shadow-left has-shadow-right">
      <div class="a-table-scrollable-wrapper">
        <table class="a-table">
          <thead>
            <tr>...</tr>
          </thead>
          <tbody>
            <tr>...</tr>
          </tbody>
        </table>
      </div>
    </div>

Snack | Description | Ingredients | Stock | Price
--- | --- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | Milk, Vanilla | 160 | €2,49
Chips | Salty, crunchy goodness | Potatoes, sea salt | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | Water, corn syrup | 480 | €0,99
Candy bar | Chewy and quite nutty | Cocoa butter | 240 | €1,49

    <div class="a-table-responsive-wrapper has-first-column-fixed has-shadow-left has-shadow-right">
      <div class="a-table-scrollable-wrapper">
        <table class="a-table">
          <thead>
            <tr>...</tr>
          </thead>
          <tbody>
            <tr>...</tr>
          </tbody>
        </table>
      </div>
    </div>

Snack | Description | Ingredients | Stock | Price
--- | --- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | Milk, Vanilla | 160 | €2,49
Chips | Salty, crunchy goodness | Potatoes, sea salt | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | Water, corn syrup | 480 | €0,99
Candy bar | Chewy and quite nutty | Cocoa butter | 240 | €1,49

    <div class="a-table-responsive-wrapper has-last-column-fixed has-shadow-left has-shadow-right">
      <div class="a-table-scrollable-wrapper">
        <table class="a-table">
          <thead>
            <tr>...</tr>
          </thead>
          <tbody>
            <tr>...</tr>
          </tbody>
        </table>
      </div>
    </div>

Snack | Description | Ingredients | Stock | Price
--- | --- | --- | --- | ---
Ice cream | Tasty, frozen treat for a hot day | Milk, Vanilla | 160 | €2,49
Chips | Salty, crunchy goodness | Potatoes, sea salt | 48 | €1,99
Lollipop | Rainbow flavors with a bubblegum center | Water, corn syrup | 480 | €0,99
Candy bar | Chewy and quite nutty | Cocoa butter | 240 | €1,49

    <div class="a-table-responsive-wrapper has-first-column-fixed has-last-column-fixed has-shadow-left has-shadow-right">
      <div class="a-table-scrollable-wrapper">
        <table class="a-table">
          <thead>
            <tr>...</tr>
          </thead>
          <tbody>
            <tr>...</tr>
          </tbody>
        </table>
      </div>
    </div>

### Toggle

atoms/atoms.toggle

Change the `aria-expanded` attribute programmatically to true to toggle.

    <div class="a-toggle">
      <button class="a-toggle__button" aria-expanded="false">
        <span class="a-button a-toggle__on has-icon-left"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu" /></svg></span>Open</span>
        <span class="a-button a-button--danger a-toggle__on has-icon-left"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span>Close</span>
      </button>
    </div>

    <div class="a-toggle">
      <button class="a-toggle__button" aria-expanded="true">
        <span class="a-button a-toggle__on has-icon-left"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu" /></svg></span>Open</span>
        <span class="a-button a-button--danger a-toggle__on has-icon-left"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span>Close</span>
      </button>
    </div>

#### Toggle with icon only

    <div class="a-toggle">
      <button class="a-toggle__button" aria-expanded="false">
        <span class="a-button a-toggle__on has-icon">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu" /></svg></span><span class="u-screen-reader-only">Open menu</span>
        </span>
        <span class="a-button a-button--danger a-toggle__on has-icon">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close menu</span>
        </span>
      </button>
    </div>

#### Toggle sizes

    <div class="a-toggle a-toggle--l">
      <button class="a-toggle__button" aria-expanded="false">
        <span class="a-button a-button--l a-toggle__on has-icon">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu" /></svg></span><span class="u-screen-reader-only">Open menu</span>
        </span>
        <span class="a-button a-button--l a-button--danger a-toggle__on has-icon">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close menu</span>
        </span>
      </button>
    </div>

    <div class="a-toggle a-toggle--s">
      <button class="a-toggle__button" aria-expanded="false">
        <span class="a-button a-button--s a-toggle__on has-icon">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-navigation-menu" /></svg></span><span class="u-screen-reader-only">Open menu</span>
        </span>
        <span class="a-button a-button--s a-button--danger a-toggle__on has-icon">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close menu</span>
        </span>
      </button>
    </div>

### Tooltip

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

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

## Molecules

### Accordion

molecules/molecules.accordion

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="m-accordion">
      <div class="m-accordion__tab">
        <button class="m-accordion__header" aria-expanded="true">
          Aeneis
        </button>
        <div class="m-accordion__content">
          <div class="u-margin-xs">
            ...
          </div>
        </div>
      </div>
      <div class="m-accordion__tab">
        <button class="m-accordion__header" aria-expanded="false">
          De Bello Gallico
        </button>
        <div class="m-accordion__content">
          ...
        </div>
      </div>
      <div class="m-accordion__tab">
        <button class="m-accordion__header" aria-expanded="false">
          Odes
        </button>
        <div class="m-accordion__content">
          ...
        </div>
      </div>
    </div>

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="m-accordion m-accordion--open">
      <div class="m-accordion__tab">
        <button class="m-accordion__header" aria-expanded="true">
          Aeneis
        </button>
        <div class="m-accordion__content">
          <div class="u-margin-xs">
            ...
          </div>
        </div>
      </div>
      <div class="m-accordion__tab">
        <button class="m-accordion__header" aria-expanded="false">
          De Bello Gallico
        </button>
        <div class="m-accordion__content">
          ...
        </div>
      </div>
      <div class="m-accordion__tab">
        <button class="m-accordion__header" aria-expanded="false">
          Odes
        </button>
        <div class="m-accordion__content">
          ...
        </div>
      </div>
    </div>

### Alert

molecules/molecules.alert

Accessibility note. If you use these alerts as a popup, you have to add `aria-modal="true"` to the parent `<div>`.

#### Info alert

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

    <div role="alertdialog" aria-labelledby="alert" class="m-alert">
      <button class="a-button a-button--text a-button--info has-icon m-alert__close" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
      <h4 id="alert" class="h5 u-margin-bottom-xs">Info alert</h4>
      <p class="u-margin-bottom">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa <a href="#">justo sit amet risus</a>. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.</p>
      <div class="m-alert__actions">
        <button class="a-button a-button--info a-button--s">Got it</button>
        <button class="a-button a-button--outlined a-button--info a-button--s">Cancel</button>
      </div>
    </div>

#### Success alert

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.

    <div role="alertdialog" aria-labelledby="alert-success" class="m-alert m-alert--success">
      <button class="a-button a-button--text a-button--success has-icon m-alert__close" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
      <span class="m-alert__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-check-1" /></svg></span></span>
      <h4 id="alert-success" class="h5 u-margin-bottom-xs">Success alert</h4>
      <p class="u-margin-bottom">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa <a href="#">justo sit amet risus</a>. Sed posuere consectetur est at lobortis.</p>
      <div class="m-alert__actions">
        <button class="a-button a-button--success a-button--s">Got it</button>
        <button class="a-button a-button--outlined a-button--success a-button--s">Cancel</button>
      </div>
    </div>

#### Warning alert

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.

    <div role="alertdialog" aria-labelledby="alert-warning" class="m-alert m-alert--warning">
      <button class="a-button a-button--text a-button--warning has-icon m-alert__close" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
      <span class="m-alert__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-circle" /></svg></span></span>
      <h4 id="alert-warning" class="h5 u-margin-bottom-xs">Warning alert</h4>
      <p class="u-margin-bottom">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa <a href="#">justo sit amet risus</a>. Sed posuere consectetur est at lobortis.</p>
      <div class="m-alert__actions">
        <button class="a-button a-button--warning a-button--s">Got it</button>
        <button class="a-button a-button--outlined a-button--warning a-button--s">Cancel</button>
      </div>
    </div>

#### Danger alert

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.

    <div role="alertdialog" aria-labelledby="alert-danger" class="m-alert m-alert--danger">
      <button class="a-button a-button--text a-button--danger has-icon m-alert__close" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
      <span class="m-alert__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-triangle" /></svg></span></span>
      <h4 id="alert-danger" class="h5 u-margin-bottom-xs">Danger alert</h4>
      <p class="u-margin-bottom">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa <a href="#">justo sit amet risus</a>. Sed posuere consectetur est at lobortis.</p>
      <div class="m-alert__actions">
        <button class="a-button a-button--danger a-button--s">Got it</button>
        <button class="a-button a-button--outlined a-button--danger a-button--s">Cancel</button>
      </div>
    </div>

#### Inline alert

##### Optional emphasised title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

##### Optional emphasised title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

##### Optional emphasised title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

##### Optional emphasised title

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.

    <div role="alertdialog" aria-labelledby="alert-inline" class="m-alert m-alert--inline">
      <h5 id="alert-inline" class="paragraph">Optional emphasised message</h5>
      <p class="u-margin-bottom">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa <a href="#">justo sit amet risus</a>. Sed posuere consectetur est at lobortis.</p>
    </div>

### Button group

molecules/molecules.button-group

    <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 a-button--outlined">Primary</button>
      <button class="a-button a-button--outlined">Button</button>
      <button class="a-button a-button--outlined">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 a-button--outlined">Primary</button>
      <button class="a-button a-button--outlined">Button</button>
      <button class="a-button a-button--outlined">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" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--x has-icon" aria-label="X"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-x" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--linkedin has-icon" aria-label="LinkedIn"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-professional-network-linkedin" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--instagram has-icon" aria-label="Instagram"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-instagram" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--youtube has-icon" aria-label="YouTube"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-video-youtube-clip" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--snapchat has-icon" aria-label="Snapchat"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--tiktok has-icon" aria-label="Tiktok"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-tiktok" /></svg></span></a></li>
    </ul>

    <ul class="m-button-list m-button-list--horizontal">
      <li><a href="#" class="a-button a-button--facebook has-icon" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--x has-icon" aria-label="X"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-x" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--linkedin has-icon" aria-label="LinkedIn"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-professional-network-linkedin" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--instagram has-icon" aria-label="Instagram"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-instagram" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--youtube has-icon" aria-label="YouTube"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-video-youtube-clip" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--snapchat has-icon" aria-label="Snapchat"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
      <li><a href="#" class="a-button a-button--tiktok has-icon" aria-label="Tiktok"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-social-media-tiktok" /></svg></span></a></li>
    </ul>

### Card

molecules/molecules.card

#### Aeneis

May 4th 2021, 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 the article

    <div class="m-card">
      <div class="m-card__image">
        <img src="https://picsum.photos/id/223/1000/500" alt="Card image.">
      </div>
      <div class="m-card__body">
        <h4 id="card-title" class="h5 u-margin-bottom-xs">Aeneis</h4>
        <p class="small u-text-bold u-margin-bottom-xs">May 4th 2021, 12:34</p>
        <p class="u-margin-bottom">...</p>
        <p class="u-text-right">
          <a id="card-link" href="#" class="has-icon-right" aria-labelledby="card-link card-title">
            Read the article<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>
          </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="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span><span>Second collapsible item</span>
        </a>
        <ul>
          <li class="m-collapsible-list__item">
            <a href="#">
              <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></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="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></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>

### Datepicker

molecules/molecules.datepicker

#### Datepicker views

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

    <div aria-label="Datepicker days" class="m-datepicker is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button type="button" class="m-datepicker__nav-title">May 2021 <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span></button>

        <div class="m-datepicker__nav-pagination">
          <button type="button" aria-label="Go to previous month, April 2021" class="a-button a-button--text a-button--primary has-icon"></button>
          <button type="button" aria-label="Go to next month, June 2021" class="a-button a-button--text a-button--primary has-icon"></button>
        </div>
      </div>
      <div class="m-datepicker__grid">
        <table>
          <thead>
            <tr class="m-datepicker__grid-head">
              <th scope="col"><span title="Monday">Mo</span></th>
              <th scope="col"><span title="Tuesday">Tu</span></th>
              <th scope="col"><span title="Wednesday">We</span></th>
              <th scope="col"><span title="Thursday">Th</span></th>
              <th scope="col"><span title="Friday">Fr</span></th>
              <th scope="col"><span title="Saturday">Sa</span></th>
              <th scope="col"><span title="Sunday">Su</span></th>
            </tr>
          </thead>
          <tbody class="m-datepicker__grid-body">
            <tr>
              <td><button type="button" class="is-faded" aria-label="Monday 27 April 2021"><span>27</span></button></td>
              <td><button type="button" class="is-faded" aria-label="Tuesday 28 April 2021"><span>28</span></button></td>
              <td><button type="button" aria-label="Wednesday 1 May 2021"><span>1</span></button></td>
              <td><button type="button" aria-label="Thursday 2 May 2021"><span>2</span></button></td>
              <td><button type="button" aria-label="Friday 3 May 2021"><span>3</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 4 May 2021"><span>4</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 5 May 2021"><span>5</span></button></td>
            </tr>
            <tr>
              <td><button type="button" aria-label="Monday 6 May 2021"><span>6</span></button></td>
              <td><button type="button" aria-label="Tuesday 7 May 2021"><span>7</span></button></td>
              <td><button type="button" aria-label="Wednesday 8 May 2021"><span>8</span></button></td>
              <td><button type="button" class="is-selected" aria-pressed="true" aria-label="Thursday 9 May 2021"><span>9</span></button></td>
              <td><button type="button" aria-label="Friday 10 May 2021"><span>10</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 11 May 2021"><span>11</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 12 May 2021"><span>12</span></button></td>
            </tr>
            <tr>
              <td><button type="button" aria-label="Monday 13 May 2021"><span>13</span></button></td>
              <td><button type="button" aria-label="Tuesday 14 May 2021"><span>14</span></button></td>
              <td><button type="button" aria-label="Wednesday 15 May 2021"><span>15</span></button></td>
              <td><button type="button" aria-label="Thursday 16 May 2021"><span>16</span></button></td>
              <td><button type="button" aria-label="Friday 17 May 2021"><span>17</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 18 May 2021"><span>18</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 19 May 2021"><span>19</span></button></td>
            </tr>
            <tr>
              <td><button type="button" aria-label="Monday 20 May 2021"><span>20</span></button></td>
              <td><button type="button" class="is-current" aria-label="Tuesday 21 May 2021"><span>21</span></button></td>
              <td><button type="button" aria-label="Wednesday 22 May 2021"><span>22</span></button></td>
              <td><button type="button" aria-label="Thursday 23 May 2021"><span>23</span></button></td>
              <td><button type="button" aria-label="Friday 24 May 2021"><span>24</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 25 May 2021"><span>25</span></button></td>
              <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 26 May 2021"><span>26</span></button></td>
            </tr>
            <tr>
              <td><button type="button" aria-label="Monday 27 May 2021"><span>27</span></button></td>
              <td><button type="button" aria-label="Tuesday 28 May 2021"><span>28</span></button></td>
              <td><button type="button" aria-label="Wednesday 29 May 2021"><span>29</span></button></td>
              <td><button type="button" aria-label="Thursday 30 May 2021"><span>30</span></button></td>
              <td><button type="button" aria-label="Friday 31 May 2021"><span>31</span></button></td>
              <td><button type="button" class="is-faded" aria-label="Saturday 1 June 2021"><span>1</span></button></td>
              <td><button type="button" class="is-faded" aria-label="Sunday 2 June 2021"><span>2</span></button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div aria-label="Datepicker years" class="m-datepicker is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button type="button" class="m-datepicker__nav-title">2021 <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-up-1" /></svg></span></button>

        <div class="m-datepicker__nav-pagination">
          <button type="button" aria-label="Go to previous year, 2020" class="a-button a-button--text a-button--primary has-icon"></button>
          <button type="button" aria-label="Go to next year, 2022" class="a-button a-button--text a-button--primary has-icon"></button>
        </div>
      </div>
      <div class="m-datepicker__list">
        <table>
          <tbody class="m-datepicker__list-body">
            <tr>...</tr>
            <tr>
              <td><button type="button" class="is-selected">May</button></td>
              <td><button type="button">June</button></td>
            </tr>
            <tr>...</tr>
            <tr>
              <td><button type="button">November</button></td>
              <td><button type="button" class="is-current">December</button></td>
            </tr>
            <tr>...</tr>
          </tbody>
        </table>
    </div>
    </div>

    <div aria-label="Datepicker years" class="m-datepicker is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button type="button" class="m-datepicker__nav-title">2014 - 2031 <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-up-1" /></svg></span></button>

        <div class="m-datepicker__nav-pagination">
          <button type="button" aria-label="Go to previous years, 1996 - 2013" class="a-button a-button--text a-button--primary has-icon"></button>
          <button type="button" aria-label="Go to next years, 2032 - 2049" class="a-button a-button--text a-button--primary has-icon"></button>
        </div>
      </div>
      <div class="m-datepicker__list">
        <table>
          <tbody class="m-datepicker__list-body">
            <tr>...</tr>
            <tr>
              <td><button type="button" class="is-selected">2020</button></td>
              <td><button type="button" class="is-current">2021</button></td>
              <td><button type="button">2022</button></td>
            </tr>
            <tr>...</tr>
          </tbody>
        </table>
    </div>
    </div>

#### Datepicker attached to an input field

Choose a date

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">Choose a date</label>
      <div class="a-input__wrapper">
        <input type="text" name="input-datepicker" id="input-datepicker" placeholder="dd/mm/yyyy" />
        <span class="ai is-clickable" aria-hidden="true" role="button" tabindex="0" aria-expanded="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-calendar" /></svg></span>
        <div aria-label="Attached datepicker days" class="m-datepicker m-datepicker--fixed is-open" aria-hidden="false">
          <div class="m-datepicker__nav">
            <button type="button" class="m-datepicker__nav-title">May 2021 <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-down-1" /></svg></span></button>

            <div class="m-datepicker__nav-pagination">
              <button type="button" aria-label="Go to previous month, April 2021" class="a-button a-button--text a-button--primary has-icon"></button>
              <button type="button" aria-label="Go to next month, June 2021" class="a-button a-button--text a-button--primary has-icon"></button>
            </div>
          </div>
          <div class="m-datepicker__grid">
            <table>
              <thead>
                <tr class="m-datepicker__grid-head">
                  <th scope="col"><span title="Monday">Mo</span></th>
                  <th scope="col"><span title="Tuesday">Tu</span></th>
                  <th scope="col"><span title="Wednesday">We</span></th>
                  <th scope="col"><span title="Thursday">Th</span></th>
                  <th scope="col"><span title="Friday">Fr</span></th>
                  <th scope="col"><span title="Saturday">Sa</span></th>
                  <th scope="col"><span title="Sunday">Su</span></th>
                </tr>
              </thead>
              <tbody class="m-datepicker__grid-body">
                <tr>
                  <td><button type="button" class="is-faded" aria-label="Monday 27 April 2021"><span>27</span></button></td>
                  <td><button type="button" class="is-faded" aria-label="Tuesday 28 April 2021"><span>28</span></button></td>
                  <td><button type="button" aria-label="Wednesday 1 May 2021"><span>1</span></button></td>
                  <td><button type="button" aria-label="Thursday 2 May 2021"><span>2</span></button></td>
                  <td><button type="button" aria-label="Friday 3 May 2021"><span>3</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 4 May 2021"><span>4</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 5 May 2021"><span>5</span></button></td>
                </tr>
                <tr>
                  <td><button type="button" aria-label="Monday 6 May 2021"><span>6</span></button></td>
                  <td><button type="button" aria-label="Tuesday 7 May 2021"><span>7</span></button></td>
                  <td><button type="button" aria-label="Wednesday 8 May 2021"><span>8</span></button></td>
                  <td><button type="button" class="is-selected" aria-pressed="true" aria-label="Thursday 9 May 2021"><span>9</span></button></td>
                  <td><button type="button" aria-label="Friday 10 May 2021"><span>10</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 11 May 2021"><span>11</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 12 May 2021"><span>12</span></button></td>
                </tr>
                <tr>
                  <td><button type="button" aria-label="Monday 13 May 2021"><span>13</span></button></td>
                  <td><button type="button" aria-label="Tuesday 14 May 2021"><span>14</span></button></td>
                  <td><button type="button" aria-label="Wednesday 15 May 2021"><span>15</span></button></td>
                  <td><button type="button" aria-label="Thursday 16 May 2021"><span>16</span></button></td>
                  <td><button type="button" aria-label="Friday 17 May 2021"><span>17</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 18 May 2021"><span>18</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 19 May 2021"><span>19</span></button></td>
                </tr>
                <tr>
                  <td><button type="button" aria-label="Monday 20 May 2021"><span>20</span></button></td>
                  <td><button type="button" class="is-current" aria-label="Tuesday 21 May 2021"><span>21</span></button></td>
                  <td><button type="button" aria-label="Wednesday 22 May 2021"><span>22</span></button></td>
                  <td><button type="button" aria-label="Thursday 23 May 2021"><span>23</span></button></td>
                  <td><button type="button" aria-label="Friday 24 May 2021"><span>24</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 25 May 2021"><span>25</span></button></td>
                  <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 26 May 2021"><span>26</span></button></td>
                </tr>
                <tr>
                  <td><button type="button" aria-label="Monday 27 May 2021"><span>27</span></button></td>
                  <td><button type="button" aria-label="Tuesday 28 May 2021"><span>28</span></button></td>
                  <td><button type="button" aria-label="Wednesday 29 May 2021"><span>29</span></button></td>
                  <td><button type="button" aria-label="Thursday 30 May 2021"><span>30</span></button></td>
                  <td><button type="button" aria-label="Friday 31 May 2021"><span>31</span></button></td>
                  <td><button type="button" class="is-faded" aria-label="Saturday 1 June 2021"><span>1</span></button></td>
                  <td><button type="button" class="is-faded" aria-label="Sunday 2 June 2021"><span>2</span></button></td>
                </tr>
              </tbody>
            </table>
          </div>
          </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

This is a medium sized flyout. Its width is optimised to display 45-55 characters per line. Content is divided over multiple lines when needed as demonstrated right here.

    <div class="m-flyout is-open">
      <button class="a-button" aria-expanded="true">Default flyout</button>
      <div class="m-flyout__content has-padding">
        <p>This is a medium sized flyout. Its width is optimised to display 45-55 characters per line. Content is divided over multiple lines when needed as demonstrated right here.</p>
      </div>
    </div>

#### Flyout sizes

This is a small flyout. It’s a bit narrower than the medium sized variant, but behaves the same.

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

#### Flyout positions

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">
      ...
    </div>

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--bottom-right is-open">
      ...
    </div>

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--upper-left is-open">
      ...
    </div>

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--upper-right is-open">
      ...
    </div>

#### Flyout examples

- First item
- Third item
- Fourth item

    <div class="m-flyout m-flyout--s is-open d-flyout--s">
      <button class="a-button" aria-expanded="true">Flyout with checkbox list</button>
      <div class="m-flyout__content">
        <ul class="a-checkbox-list a-checkbox-list--flushed">
          <li class="a-checkbox-list__item">
            <div class="a-input a-checkbox-list__checkbox">
              <div class="a-input__checkbox">
                <input type="checkbox" id="flyout-checkbox1" name="flyout-checkbox">
                <label for="flyout-checkbox1">First item</label>
              </div>
            </div>
          </li>
          <li class="a-checkbox-list__item">...</li>
        </ul>
      </div>
    </div>

    <div class="m-flyout m-flyout--scrollable is-open">
      <button class="a-button" aria-expanded="true">Flyout with a navigation list</button>
      <div class="m-flyout__content">
        <nav class="m-nav-list" aria-label="Flyout with a navigation list">
          <ul>
            <li><a href="#">Overview</a></li>
            <li class="is-active"><a href="#">Description</a></li>
            <li><a href="#">Guests</a></li>
            <li><a href="#">Location</a></li>
            <li class="is-disabled"><a aria-disabled="true">Partners</a></li>
          </ul>
        </nav>
      </div>
    </div>

Flyout as an autocomplete

- Take
- A
- Look
- At
- This
- Scroll
- Behaviour

    <div class="m-flyout m-flyout--scrollable is-open">
      <div class="a-input">
          <label class="a-input__label" for="input-autocomplete">Flyout as an autocomplete</label>
          <input type="text" name="input-autocomplete" id="input-autocomplete" aria-expanded="true" />
      </div>
      <div class="m-flyout__content">
        <ul class="a-list a-list--lined a-list--flushed">
          <li class="a-list__item">...</li>
        </ul>
      </div>
    </div>

### Image

molecules/molecules.image

    <figure class="m-image">
      <img src="https://picsum.photos/id/223/1000/500" alt="Figure image.">
    </figure>

© Unsplash

    <figure class="m-image">
      <img src="https://picsum.photos/id/223/1000/500" alt="Figure image.">
      <a href="#" class="m-image__copyright a-copyright">
        <span class="a-copyright__sign">©</span>
        <span class="a-copyright__label">Unsplash</span>
      </a>
    </figure>

Note that you need to change the `aria-expanded` attribute programmatically.

### Modal

molecules/molecules.modal

Accessibility note. Note that focus management is essential
(external) for a modal dialog to be accessible.

#### 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" role="dialog" aria-modal="true" aria-labelledby="myModalTitle" aria-describedby="myModelDesc">
      <div class="m-modal__content">
        <div class="m-modal__header u-margin-bottom-xs">
          <button class="m-modal__close a-button a-button--text a-button--neutral has-icon" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
          <h4 id="myModalTitle" class="h6">Aeneis</h4>
        </div>
        <div class="u-margin-bottom">
          <p id="myModalDesc">...</p>
        </div>
        <div class="m-modal__footer">
          <button class="a-button">Got it</button>
          <button class="a-button a-button--outlined">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--l" role="dialog" aria-modal="true" aria-labelledby="myLargeModalTitle" aria-describedby="myLargeModelDesc">
      <div class="m-modal__content">
        <div class="m-modal__header u-margin-bottom-xs">
          <button class="m-modal__close a-button a-button--text a-button--neutral has-icon" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
          <h4 id="myLargeModalTitle" class="h6">Aeneis</h4>
        </div>
        <div class="u-margin-bottom">
          <p id="myLargeModalDesc">...</p>
        </div>
        <div class="m-modal__footer">
          <button class="a-button">Got it</button>
          <button class="a-button a-button--outlined">Cancel</button>
        </div>
      </div>
    </div>

### Navigation

molecules/molecules.navigation

Accessibility note. In order to make your navigation accessible make sure to follow the ARIA design patterns for tabs
(external). Also note that none of the examples below include an actual tab panel, which is part of the design pattern.

#### List navigation

    <nav class="m-nav-list" aria-label="My first navigation list">
      <ul>
        <li><a href="#">Overview</a></li>
        <li class="is-active"><a href="#">Description</a></li>
        <li><a href="#">Guests</a></li>
        <li><a href="#">Location</a></li>
        <li class="is-disabled"><a aria-disabled="true">Partners</a></li>
      </ul>
    </nav>

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.

    <nav class="m-nav-list" aria-label="My second navigation list">
      <ul>
        <li><button>Overview</button></li>
        <li class="is-active"><button>Description</button></li>
        <li><button>Guests</button></li>
        <li><button>Location</button></li>
        <li class="is-disabled"><button aria-disabled="true">Partners</button></li>
      </ul>
    </nav>

#### Tab navigation

    <nav class="m-nav-tabs" aria-label="My third navigation list">
      <ul>
        <li><a href="#">Overview</a></li>
        <li class="is-active"><a href="#">Description</a></li>
        <li><a href="#">Guests</a></li>
        <li><a href="#">Location</a></li>
        <li class="is-disabled"><a aria-disabled="true">Partners</a></li>
      </ul>
    </nav>

    <nav class="m-nav-tabs has-border" aria-label="My fourth navigation list">
      <ul>
        <li><button>Overview</button></li>
        <li class="is-active"><button>Description</button></li>
        <li><button>Guests</button></li>
        <li><button>Location</button></li>
        <li class="is-disabled"><a aria-disabled="true">Partners</button></li>
      </ul>
    </nav>

    <nav class="m-nav-tabs has-border has-shadow-left has-shadow-right" aria-label="My fifth navigation list">
      <ul>
        <li><a href="#">Overview of nav tabs</a></li>
        <li class="is-active"><a href="#">Description</a></li>
        <li><a href="#">Guests</a></li>
        <li><a href="#">Location</a></li>
        <li class="is-disabled"><a aria-disabled="true">Partners</a></li>
      </ul>
    </nav>

### Overlay

molecules/molecules.overlay
Toggle overlay

This simple modal is just one example of what can be put inside an 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

- Page 1 of 6

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

    <ul class="m-pagination">
      <li class="m-pagination__prev"><a href="#" aria-label="Go to the previous page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
      <li class="m-pagination__next"><a href="#" aria-label="Go to the next page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
    </ul>

    <ul class="m-pagination">
      <li class="m-pagination__prev"><a href="#" class="is-disabled" aria-label="Go to the previous page (disabled)"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
      <li class="m-pagination__label"><span class="u-screen-reader-only">Page </span>1 of 6</li>
      <li class="m-pagination__next"><a href="#" aria-label="Go to the next page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
    </ul>

    <ul class="m-pagination">
      <li class="m-pagination__prev"><a href="#" aria-label="Go to the previous page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
      <li role="presentation">...</li>
      <li><a href="#" aria-label="Go to page 3">3</a></li>
      <li><a href="#" aria-label="Go to page 4">4</a></li>
      <li><a href="#" aria-label="Go to page 5">5</a></li>
      <li><a class="is-active" href="#" aria-label="Go to page 6 (current page)">6</a></li>
      <li class="m-pagination__next"><a href="#" class="is-disabled" aria-label="Go to the next page (disabled)"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
    </ul>

#### Pagination sizes

- Page 1 of 6

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

    <ul class="m-pagination m-pagination--s">
      <li class="m-pagination__prev"><a href="#" aria-label="Go to the previous page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
      <li class="m-pagination__next"><a href="#" aria-label="Go to the next page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
    </ul>

    <ul class="m-pagination m-pagination--s">
      <li class="m-pagination__prev"><a href="#" class="is-disabled" aria-label="Go to the previous page (disabled)"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
      <li class="m-pagination__label"><span class="u-screen-reader-only">Page </span>1 of 6</li>
      <li class="m-pagination__next"><a href="#" aria-label="Go to the next page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
    </ul>

    <ul class="m-pagination m-pagination--s">
      <li class="m-pagination__prev"><a href="#" aria-label="Go to the previous page"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
      <li role="presentation">...</li>
      <li><a href="#" aria-label="Go to page 3">3</a></li>
      <li><a href="#" aria-label="Go to page 4">4</a></li>
      <li><a href="#" aria-label="Go to page 5">5</a></li>
      <li><a class="is-active" href="#" aria-label="Go to page 6 (current page)">6</a></li>
      <li class="m-pagination__next"><a href="#" class="is-disabled" aria-label="Go to the next page (disabled)"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
    </ul>

### Step indicator

molecules/molecules.step-indicator

1. Step Location (completed)
2. Step Introduction (completed)
3. Step Date and time
4. Step Your credentials
5. Step Checkout

    <ol class="m-step-indicator">
      <li class="is-completed">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Location<span class="u-screen-reader-only"> (completed)</span></span>
      </li>

      <li class="is-completed">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Introduction<span class="u-screen-reader-only"> (completed)</span></span>
      </li>

      <li class="is-active" aria-current="step">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Date and time</span>
      </li>

      <li class="is-incompleted">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Your credentials</span>
      </li>

      <li class="is-incompleted">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Checkout</span>
      </li>
    </ol>

1. Step Location (completed)
2. Step Introduction (completed)
3. Step Date and time
4. Step Your credentials
5. Step Checkout

    <ol class="m-step-indicator">
      <li class="is-completed">
        <a href="#">
          <span class="u-screen-reader-only">Step </span>
          <span class="m-step-indicator__number"></span>
          <span class="m-step-indicator__label">Location<span class="u-screen-reader-only"> (completed)</span></span>
        </a>
      </li>

      <li class="is-completed">
        <a href="#">
          <span class="u-screen-reader-only">Step </span>
          <span class="m-step-indicator__number"></span>
          <span class="m-step-indicator__label">Introduction<span class="u-screen-reader-only"> (completed)</span></span>
        </a>
      </li>

      <li class="is-active" aria-current="step">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Date and time</span>
      </li>

      <li class="is-incompleted">
        <span class="u-screen-reader-only">Step </span>
        <span class="m-step-indicator__number"></span>
        <span class="m-step-indicator__label">Your credentials</span>
      </li>

      <li class="is-incompleted">
        <a href="#">
          <span class="u-screen-reader-only">Step </span>
          <span class="m-step-indicator__number"></span>
          <span class="m-step-indicator__label">Checkout</span>
        </a>
      </li>
    </ol>

### Tag

molecules/molecules.tag
Default tag
Default tag with icon

    <div class="m-tag">
      <span class="m-tag__label">Default tag</span>
    </div>

    <div class="m-tag">
      <span class="m-tag__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-tags" /></svg></span></span>
      <span class="m-tag__label">Default tag with icon</span>
    </div>

Removable tag
Removable tag with icon

    <div class="m-tag is-clickable">
      <span class="m-tag__label">Removable tag</span>
      <button class="m-tag__button a-button a-button--text a-button--s has-icon" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
    </div>

    <div class="m-tag is-clickable">
      <span class="m-tag__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-tags" /></svg></span></span>
      <span class="m-tag__label">Removable tag with icon</span>
      <button class="m-tag__button a-button a-button--text a-button--s has-icon" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
    </div>

    <button class="m-tag" aria-pressed="false">
      <span class="m-tag__label">Togglable tag</span>
    </button>

    <button class="m-tag" aria-pressed="false">
      <span class="m-tag__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-tags" /></svg></span></span>
      <span class="m-tag__label">Togglable tag with icon</span>
    </button>

    <button class="m-tag" aria-pressed="true">
      <span class="m-tag__label">Togglable tag</span>
    </button>

    <button class="m-tag" aria-pressed="true">
      <span class="m-tag__icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-tags" /></svg></span></span>
      <span class="m-tag__label">Togglable tag with icon</span>
    </button>

### 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 id="upload" type="file" multiple="multiple" class="m-upload__input">
          <div class="m-upload__content">
            <label for="upload" class="m-upload__message">Drag a file here or click to browse</label>
          </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 id="upload" type="file" multiple="multiple" class="m-upload__input" disabled>
          <div class="m-upload__content">
            <label for="upload-2" class="m-upload__message">Drag a file here or click to browse</label>
          </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 id="upload-3" type="file" multiple="multiple" class="m-upload__input">
          <div class="m-upload__content">
            <label for="upload-3" class="m-upload__message u-margin-bottom">Drag a file here or click to browse</label>
            <p class="m-upload__uploads u-text-bold">my-doc.pdf and my-pic.jpg</p>
          </div>
        </div>
      </div>
      <small class="m-upload__description">Maximum file size: 4MB</small>
      <ul class="m-upload__files">
        <li>
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-common-file-empty" /></svg></span>
          <span class="m-upload__filename">my-doc.pdf</span>
          <button class="m-upload__delete a-button a-button--text a-button--neutral a-button--s has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close</span></span></button>
        </li>
        <li>
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-common-file-empty" /></svg></span>
          <span class="m-upload__filename">my-pic.jpg</span>
          <button class="m-upload__delete a-button a-button--text a-button--neutral a-button--s has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close</span></span></button>
        </li>
        <li class="is-error">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-alert-triangle" /></svg></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 a-button--text a-button--danger a-button--s has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close</span></span></button>
        </li>
      </ul>
    </div>

## Organisms

### Article

organisms/organisms.article

Use this wrapper class to style basic html tags without any extra classes.

# Heading 1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

## Heading 2

- Lorem ipsum dolor
- sit:
  - amet
  - consectetur
- adipisicing elit

### Heading 3

1. Lorem ipsum dolor
2. sit:
   - amet
   - consectetur
3. adipisicing elit

#### Heading 4

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

##### Heading 5

- Lorem ipsum dolor
- sit:
  - amet
  - consectetur
- adipisicing elit

###### Heading 6

1. Lorem ipsum dolor
2. sit:
   - amet
   - consectetur
3. adipisicing elit

    <div class="o-article">
      ...
    </div>

### Footer

organisms/organisms.footer

    <footer class="o-footer">
      <span class="o-footer__label">© stad Antwerpen | <a href="#">Privacy</a> | <a href="#">Toegankelijkheid</a> | <a href="#">Cookie instellingen</a></span>
      <a href="#" class="o-footer__button a-button a-button--secondary has-icon" aria-label="Go back to top">
        <span class="ai o-menu__icon o-menu__submenu-icon" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-up-1" /></svg></span>
      </a>
    </footer>

    <footer class="o-footer">
      <span class="o-footer__label">© stad Antwerpen | <a href="#">Privacy</a> | <a href="#">Toegankelijkheid</a> | <a href="#">Cookie instellingen</a></span>
    </footer>

### Header

organisms/organisms.header

Accessibility note. Don't forget to assign the id="main-content" to an element at the beginning of the content for the skiplink to work. For example, the `<h1>` or `<main>`.

    <header class="o-header">
      <a href="#main-content" class="a-button a-button--text a-button--neutral o-header__button-skip">Skip to main content</a>
      <a href="#" class="o-header__logo">
        <img src="./images/a-logo.svg" alt="Homepage Antwerp.">
      </a>
    </header>

    <header class="o-header">
      <div class="o-header__content-wrapper">
        <div class="o-header__content">
          <a href="#main-content" class="a-button a-button--text a-button--neutral o-header__button-skip">Skip to main content</a>
          <a href="#" class="o-header__logo">
            <img src="./images/a-logo.svg" alt="Homepage Antwerp.">
          </a>
        </div>
        <div class="o-header__menu-items">
          <button href="#" class="a-button a-button--text a-button--neutral o-header__button">Menu button</button>
        </div>
      </div>
    </header>

### Slideshow

#### Regular slideshow

organisms/organisms.slideshow
©
Unsplash
©
Unsplash
©
Unsplash
1 | 3 Some fancy caption about this photo

    <div class="o-slideshow">
      <div class="o-slideshow__inner">
        <button class="a-button has-icon o-slideshow__prev">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span>
          <span class="u-screen-reader-only">Previous image</span>
        </button>
        <button class="a-button has-icon o-slideshow__next">
          <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>
          <span class="u-screen-reader-only">Next image</span>
        </button>
        <div class="o-slideshow__slides">
          <figure class="o-slideshow__slide is-active">
            <div class="o-slideshow__image">
              <div class="m-image">
                <img src="https://picsum.photos/id/223/1000/500" alt="Slideshow image 1.">
                <a href="#" class="m-image__copyright a-copyright">
                  <div class="a-copyright__sign">©</div>
                  <span class="a-copyright__label">Unsplash</span>
                </a>
              </div>
            </div>
          </figure>
          <figure class="o-slideshow__slide">
            <div class="o-slideshow__image">
              <div class="m-image">
                <img src="https://picsum.photos/id/223/1000/500" alt="Slideshow image 2.">
                <a href="#" class="m-image__copyright a-copyright">
                  <div class="a-copyright__sign">©</div>
                  <span class="a-copyright__label">Unsplash</span>
                </a>
              </div>
            </div>
          </figure>
          <figure class="o-slideshow__slide">
            <div class="o-slideshow__image">
              <div class="m-image">
                <img src="https://picsum.photos/id/223/1000/500" alt="Slideshow image 3.">
                <a href="#" class="m-image__copyright a-copyright">
                  <div class="a-copyright__sign">©</div>
                  <span class="a-copyright__label">Unsplash</span>
                </a>
              </div>
            </div>
          </figure>
        </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

Toggle overlay
Close overlay
© Unsplash
© Unsplash
© Unsplash
1 | 3 Some fancy caption about this photo. Click the close button in the top right corner to close the slideshow.

    <div class="m-overlay">
      <label for="input-slideshow"><a class="m-overlay__button"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close overlay</span></a></label>
      <div class="m-overlay__slideshow o-slideshow o-slideshow--transparent">
        <div class="o-slideshow__inner">
          <button class="a-button has-icon o-slideshow__prev o-slideshow__prev--outside">
            <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-left-1" /></svg></span>
            <span class="u-screen-reader-only">Previous image</span>
          </button>
          <button class="a-button has-icon o-slideshow__next o-slideshow__next--outside">
            <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>
            <span class="u-screen-reader-only">Next image</span>
          </button>
          <div class="o-slideshow__slides">
            <figure class="o-slideshow__slide is-active">
              <div class="o-slideshow__image">
                <div class="m-image">
                  <img src="https://picsum.photos/id/223/1000/500" alt="Slideshow image 1.">
                  <a href="#" class="m-image__copyright a-copyright">
                    <div class="a-copyright__sign">©</div>
                    <span class="a-copyright__label">Unsplash</span>
                  </a>
                </div>
              </div>
            </figure>
            <figure class="o-slideshow__slide">
              <div class="o-slideshow__image">
                <div class="m-image">
                  <img src="https://picsum.photos/id/223/1000/500" alt="Slideshow image 2.">
                  <a href="#" class="m-image__copyright a-copyright">
                    <div class="a-copyright__sign">©</div>
                    <span class="a-copyright__label">Unsplash</span>
                  </a>
                </div>
              </div>
            </figure>
            <figure class="o-slideshow__slide">
              <div class="o-slideshow__image">
                <div class="m-image">
                  <img src="https://picsum.photos/id/223/1000/500" alt="Slideshow image 3.">
                  <a href="#" class="m-image__copyright a-copyright">
                    <div class="a-copyright__sign">©</div>
                    <span class="a-copyright__label">Unsplash</span>
                  </a>
                </div>
              </div>
            </figure>
          </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="o-tag-list__item">
        <div class="m-tag">
          <div class="m-tag__label">Thomas Edison</div>
        </div>
      </li>
      <li class="o-tag-list__item">
        <div class="m-tag">
          <div class="m-tag__label">Leonardo da Vinci</div>
        </div>
      </li>
      <li class="o-tag-list__item">
        <div class="m-tag">
          <div class="m-tag__label">Albert Einstein</div>
        </div>
      </li>
    </ul>

- Thomas Edison
- Leonardo da Vinci
- Albert Einstein

    <ul class="o-tag-list">
      <li class="o-tag-list__item">
        <div class="m-tag is-clickable">
          <div class="m-tag__label">Thomas Edison</div>
          <button class="m-tag__button" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
        </div>
      </li>
      <li class="o-tag-list__item">
        <div class="m-tag is-clickable">
          <div class="m-tag__label">Leonardo da Vinci</div>
          <button class="m-tag__button" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
        </div>
      </li>
      <li class="o-tag-list__item">
        <div class="m-tag is-clickable">
          <div class="m-tag__label">Albert Einstein</div>
          <button class="m-tag__button" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/7.0.0-beta.7/assets/images/ai.svg#ai-remove" /></svg></span></button>
        </div>
      </li>
    </ul>

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