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

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

Force an element to self-clear its children

.css {
  @include clearfix;
}

Responsive mixins

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

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

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

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

An overview of the complete color palette.

• $monza-600 #7c2629
• $monza-500 #862633
• $monza-400 #cf0039
• $monza-300 #df4661
• $monza-200 #ffb1bb
• $monza-100 #f5dadf
• $cinnabar-600 #7c2629
• $cinnabar-500 #af272f
• $cinnabar-400 #e03c31
• $cinnabar-300 #e56a54
• $cinnabar-200 #e6baa8
• $cinnabar-100 #f3cfb3
• $cinnabar-050 #fbe8e6
• $tangerine-600 #74491d
• $tangerine-500 #c05131
• $tangerine-400 #f18a00
• $tangerine-300 #eca154
• $tangerine-200 #ffc27b
• $tangerine-100 #efdbb2
• $burnt-orange-500 #8f3400
• $burnt-orange-400 #ce4c00
• $burnt-orange-050 #ffe4d6
• $supernova-600 #b47e00
• $supernova-500 #f2a900
• $supernova-400 #ffcd00
• $supernova-300 #fbde40
• $supernova-200 #f0e87b
• $supernova-100 #f1eb9c
• $supernova-050 #fff9e0
• $mantis-700 #004721
• $mantis-600 #006e33
• $mantis-500 #4c8d2b
• $mantis-400 #6cc24a
• $mantis-300 #97d700
• $mantis-200 #bce194
• $mantis-100 #d0debb
• $mantis-050 #edf8e9
• $tropical-rain-forest-600 #004e42
• $tropical-rain-forest-500 #00664f
• $tropical-rain-forest-400 #007b5f
• $tropical-rain-forest-300 #00ab84
• $tropical-rain-forest-200 #8ce2d0
• $tropical-rain-forest-100 #d1e0d7
• $deep-cerulean-600 #004f59
• $deep-cerulean-500 #005f83
• $deep-cerulean-400 #007fa3
• $deep-cerulean-300 #00a9ce
• $deep-cerulean-200 #6ad1e3
• $deep-cerulean-100 #b7dde1
• $endeavour-600 #002855
• $endeavour-500 #003865
• $endeavour-400 #0057b7
• $endeavour-300 #009cde
• $endeavour-200 #41b6e6
• $endeavour-100 #99d6ea
• $endeavour-075 #96b5e4
• $endeavour-050 #e0ebf6
• $st-tropaz-600 #002855
• $st-tropaz-500 #1d4289
• $st-tropaz-400 #2c5697
• $st-tropaz-300 #6787b7
• $st-tropaz-200 #94a9cb
• $st-tropaz-100 #c6dae7
• $horizon-600 #003d4c
• $horizon-500 #506d85
• $horizon-400 #5b7f95
• $horizon-300 #7a99ac
• $horizon-200 #b7c9d3
• $horizon-100 #dbe2e9
• $butterfly-bush-600 #330072
• $butterfly-bush-500 #483698
• $butterfly-bush-400 #654ea3
• $butterfly-bush-300 #be7fae
• $butterfly-bush-200 #b8acd6
• $butterfly-bush-100 #dddae8
• $vivid-violet-600 #51284f
• $vivid-violet-500 #572c5f
• $vivid-violet-400 #8031a7
• $vivid-violet-300 #b580d1
• $vivid-violet-200 #d7b9e4
• $vivid-violet-100 #decde7
• $rouge-600 #672e45
• $rouge-500 #872651
• $rouge-400 #a73a64
• $rouge-300 #c9809e
• $rouge-200 #dca9bf
• $rouge-100 #e4c6d4
• $hollywood-cerise-600 #651c32
• $hollywood-cerise-500 #840b55
• $hollywood-cerise-400 #e10098
• $hollywood-cerise-300 #f277c6
• $hollywood-cerise-200 #e6bcd7
• $hollywood-cerise-100 #f5dadf
• $black #000
• $gray-600 #141414
• $gray-500 #424242
• $gray-400 #6f6f6f
• $gray-300 #949494
• $gray-200 #d8d8d8
• $gray-100 #f3f3f3
• $white #fff
• $twitter #00aced
• $twitter-hover #00aced
• $x #000
• $x-hover #000
• $linkedin #0077b5
• $linkedin-hover #005988
• $facebook #1877f2
• $facebook-hover #0b58bd
• $snapchat #fffc00
• $snapchat-hover #bfbd00
• $instagram #ff0069
• $instagram-hover #bf004f
• $tiktok #25f4ee
• $tiktok-hover #0ac9c3
• $youtube #f00
• $youtube-hover #bf0000

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.

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(--THEME1-600);
  color: var(--TEXT-COLOR);
  font-size: var(--FONT-SIZE-BASE);
}

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>

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>

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

Helper classes for adding or removing space between elements.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Helper classes for changing the appearance of text.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<a href="#">
  <div class="a-avatar">
    <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/6.6.3/assets/images/ai.svg#ai-single-neutral" /></svg></span>
    </span>
  </div>
</a>

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

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

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

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

• Page
• Subpage
• Current page

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

• Page
• Subpage

Current page

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

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

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

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

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

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

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

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

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

<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/6.6.3/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/6.6.3/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>

<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/6.6.3/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>

<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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-social-media-tiktok" /></svg></span>
</a>

<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/6.6.3/assets/images/ai.svg#ai-social-media-facebook" /></svg></span>
</a>

<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/6.6.3/assets/images/ai.svg#ai-social-media-facebook" /></svg></span>
</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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/6.6.3/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>
  </div>
</div>

<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/6.6.3/assets/images/ai.svg#ai-arrow-down-1" /></svg></span>
  </div>
</div>

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

<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/6.6.3/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="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/6.6.3/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>

<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/6.6.3/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>

<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/6.6.3/assets/images/ai.svg#ai-single-neutral" /></svg></span>
    <input type="text" name="text-field-icon-left" id="text-field-icon-left" />
  </div>
</div>

<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/6.6.3/assets/images/ai.svg#ai-view-1" /></svg></span>
  </div>
</div>

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

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

<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/6.6.3/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>

<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/6.6.3/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>

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

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

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

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

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

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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-navigation-next" /></svg></span><span class="u-screen-reader-only"> (external)</span>
</a>

• 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

• 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

• 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

• First item
• Second item
  • First subitem
  • Second subitem
• Third item
• Fourth item

• First item
• Second item
  • First subitem
  • Second subitem
• Third item
• Fourth item

• 
  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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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>

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>

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

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

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

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

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

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

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

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

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

<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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-volume-control-full" /></svg></span></div>
  </div>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 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 class="a-table a-table--striped">
  <caption>Striped table with checkbox</caption>
  <thead>
    <tr>...</tr>
  </thead>
  <tbody>
    <tr>...</tr>
  </tbody>
</table>

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

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

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

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

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

<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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-remove" /></svg></span>Close</span>
  </button>
</div>

<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/6.6.3/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/6.6.3/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--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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close menu</span>
    </span>
  </button>
</div>

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

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

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

<div role="alertdialog" aria-labelledby="alert" class="m-alert">
  <button class="a-button a-button--text has-icon m-alert__close" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/6.6.3/assets/images/ai.svg#ai-remove" /></svg></span></button>
  <h4 id="alert" class="h5 u-margin-bottom-xs">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--s">Got it</button>
    <button class="a-button a-button--outlined a-button--s">Cancel</button>
  </div>
</div>

<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/6.6.3/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/6.6.3/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>

<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/6.6.3/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/6.6.3/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>

<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/6.6.3/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/6.6.3/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>

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

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

<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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-social-media-tiktok" /></svg></span></a></li>
</ul>

<div class="m-card">
  <div class="m-card__image">
    <img src="https://source.unsplash.com/collection/54002680/1000x500" 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/6.6.3/assets/images/ai.svg#ai-arrow-right-1" /></svg></span>
      </a>
    </p>
  </div>
</div>

• 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/6.6.3/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/6.6.3/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/6.6.3/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>

<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/6.6.3/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/6.6.3/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/6.6.3/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>

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

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

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

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

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

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

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

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

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

<figure class="m-image">
  <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Figure image.">
</figure>

<figure class="m-image">
  <img src="https://source.unsplash.com/collection/54002680/1000x500" 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>

<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/6.6.3/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>

<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/6.6.3/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>

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

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

<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</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 class="m-overlay">
  <div class="m-overlay__inner">
    ...
  </div>
</div>

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

• 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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/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/6.6.3/assets/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>