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

Basic implementation

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

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

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

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

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

You can also install everything with npm:

npm install @a-ui/core --save

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

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

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

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

Advanced usage

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

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

Antwerpen

Available in Small, Regular and Tall.

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

or

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

Sun Antwerpen

Available in Light, Regular, Bold and Extra Bold.

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

or

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

Accessibility

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

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

Other resources

Flexboxgrid

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

Grid optimized to follow the Antwerp styling guidelines.

Sketch

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

Sketch source file of all core branding components.

Favicons

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

Favicons for Antwerp apps.

Table of contents

Quarks

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

@import 'quarks';

Mixins

quarks/quarks.mixins

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

Force an element to self-clear its children

Note that you can also use the .clearfix class.

.css {
  @include clearfix;
}

Responsive mixins

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

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

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

Functions

quarks/quarks.functions

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

Convert pixels to rem

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

Correctly handle z-indexes

For all options, see below in the variables section.

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

Colors

quarks/quarks.colors

An overview of the complete color palette.

  • $monza-darker
    #7c2629
  • $monza-dark
    #862633
  • $monza
    #cf0039
  • $monza-medium
    #df4661
  • $monza-light
    #ffb1bb
  • $monza-lighter
    #f5dadf
  • $cinnabar-darker
    #7c2629
  • $cinnabar-dark
    #af272f
  • $cinnabar
    #e03c31
  • $cinnabar-medium
    #e56a54
  • $cinnabar-light
    #e6baa8
  • $cinnabar-lighter
    #f3cfb3
  • $tangerine-darker
    #74491d
  • $tangerine-dark
    #c05131
  • $tangerine
    #f18a00
  • $tangerine-medium
    #eca154
  • $tangerine-light
    #ffc27b
  • $tangerine-lighter
    #efdbb2
  • $supernova-darker
    #b47e00
  • $supernova-dark
    #f2a900
  • $supernova
    #ffcd00
  • $supernova-medium
    #fbde40
  • $supernova-light
    #f0e87b
  • $supernova-lighter
    #f1eb9c
  • $mantis-darker
    #006e33
  • $mantis-dark
    #4c8d2b
  • $mantis
    #6cc24a
  • $mantis-medium
    #97d700
  • $mantis-light
    #bce194
  • $mantis-lighter
    #d0debb
  • $tropical-rain-forest-darker
    #004e42
  • $tropical-rain-forest-dark
    #00664f
  • $tropical-rain-forest
    #007b5f
  • $tropical-rain-forest-medium
    #00ab84
  • $tropical-rain-forest-light
    #8ce2d0
  • $tropical-rain-forest-lighter
    #d1e0d7
  • $deep-cerulean-darker
    #004f59
  • $deep-cerulean-dark
    #005f83
  • $deep-cerulean
    #007fa3
  • $deep-cerulean-medium
    #00a9ce
  • $deep-cerulean-light
    #6ad1e3
  • $deep-cerulean-lighter
    #b7dde1
  • $endeavour-darker
    #002855
  • $endeavour-dark
    #003865
  • $endeavour
    #0057b7
  • $endeavour-medium
    #009cde
  • $endeavour-light
    #41b6e6
  • $endeavour-lighter
    #99d6ea
  • $st-tropaz-darker
    #002855
  • $st-tropaz-dark
    #1d4289
  • $st-tropaz
    #2c5697
  • $st-tropaz-medium
    #6787b7
  • $st-tropaz-light
    #94a9cb
  • $st-tropaz-lighter
    #c6dae7
  • $horizon-darker
    #003d4c
  • $horizon-dark
    #506d85
  • $horizon
    #5b7f95
  • $horizon-medium
    #7a99ac
  • $horizon-light
    #b7c9d3
  • $horizon-lighter
    #dbe2e9
  • $butterfly-bush-darker
    #330072
  • $butterfly-bush-dark
    #483698
  • $butterfly-bush
    #654ea3
  • $butterfly-bush-medium
    #be7fae
  • $butterfly-bush-light
    #b8acd6
  • $butterfly-bush-lighter
    #dddae8
  • $vivid-violet-darker
    #51284f
  • $vivid-violet-dark
    #572c5f
  • $vivid-violet
    #8031a7
  • $vivid-violet-medium
    #b580d1
  • $vivid-violet-light
    #d7b9e4
  • $vivid-violet-lighter
    #decde7
  • $rouge-darker
    #672e45
  • $rouge-dark
    #872651
  • $rouge
    #a73a64
  • $rouge-medium
    #c9809e
  • $rouge-light
    #dca9bf
  • $rouge-lighter
    #e4c6d4
  • $hollywood-cerise-darker
    #651c32
  • $hollywood-cerise-dark
    #840b55
  • $hollywood-cerise
    #e10098
  • $hollywood-cerise-medium
    #f277c6
  • $hollywood-cerise-light
    #e6bcd7
  • $hollywood-cerise-lighter
    #f5dadf
  • $rich-black
    #000
  • $warm-gray-11
    #6e6259
  • $warm-gray-8
    #8c8279
  • $warm-gray-5
    #aca39a
  • $warm-gray-2
    #cbc4bc
  • $white
    #fff
  • $black
    #141414
  • $gray-darker
    #424242
  • $grey-darker
    $gray-darker
  • $gray-dark
    #6f6f6f
  • $grey-dark
    $gray-dark
  • $gray
    #949494
  • $grey
    $gray
  • $gray-light
    #d8d8d8
  • $grey-light
    $gray-light
  • $gray-lighter
    #f3f3f3
  • $grey-lighter
    $gray-lighter
  • $twitter
    rgb(0, 172, 237)
  • $linkedin
    rgb(0, 119, 181)
  • $facebook
    rgb(24, 119, 242)
  • $snapchat
    rgb(255, 252, 0)
  • $instagram
    inspect me

Variables

quarks/quarks.variables

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

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

Base

Fonts

base/base.fonts

Antwerpen Small

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

Antwerpen Regular

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

Antwerpen Tall

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

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

Sun Antwerpen 400, 500
Sun Antwerpen 400, 500

Sun Antwerpen 600, 700
Sun Antwerpen 600, 700

Sun Antwerpen 800, 900
Sun Antwerpen 800, 900

.css {
  font-family: 'Sun Antwerpen';
  font-weight: …
}
<p>Sun Antwerpen …</p>
<p><em>Sun Antwerpen …</em></p>

Icons

base/base.icons

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

If you use a more detailed icon it can become unreadable. Use the extra class .ai--thin in order to make strokes a bit thinner.
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-a11y" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-accounting-bill" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-accounting-bills" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-add-square" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-add" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-advertising-megaphone" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-alarm-bell" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-alert-circle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-alert-diamond" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-alert-triangle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-analytics-bars" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-analytics-pie-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-angle-brackets" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-app-window" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-archive" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrange-letter" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrange-number" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-button-down-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-button-left-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-button-right-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-button-up-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-up-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-attachment" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-audio-file-volume" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-bicycle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-bin" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-bluetooth" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-book-open" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-bookmarks-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-brightness-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-brightness" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-button-loop" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-button-shuffle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-button-split" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-calendar-3" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-calendar" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-camera-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-car-retro-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-chat-translate" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-check-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-close" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cloud" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cog-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cog-double-3" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-common-file-double-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-common-file-empty" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-common-file-text" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-compass-arrow" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-computer-bug" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-controls-forward" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-controls-pause" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-controls-play" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-controls-record" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-controls-rewind" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-controls-stop" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-copy-paste-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-credit-card-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor-hand-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor-hand-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor-select-frame-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor-select-frame" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor-target-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-cursor" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-data-transfer-diagonal" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-database-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-delete-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-developer-community-github-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-direction-button-arrows" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-dislike-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-download-bottom" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-drawer-download" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-drawer-file" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-drawer-open" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-drawer-upload" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-earth-3" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-email-action-unread" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-expand-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-expand-3" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-expand-vertical-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-expand-vertical-3" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-face-id" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-file-code-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-file-code" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-filter-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-filter-text" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-flag-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-flash" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-floppy-disk-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-folder-open" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-folder" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-gauge-dashboard" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-graph-stats-ascend" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-graph-stats-descend" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-graph-stats" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-hammer-wench" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-hand-drag-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-hand-drag" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-hard-drive" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-headphones-customer-support-human" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-help-wheel" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-hierarchy-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-house-chimney" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-hyperlink-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-image-file-landscape" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-iris-scan-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-bottom-left" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-bottom-right" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-down" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-left" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-right" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-top-left" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-top-right" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard-arrow-up" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-keyboard" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-laptop" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-layers" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-layout-column" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-layout-headline" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-layout-module-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-legal-scale-unequal-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-light-bulb-shine" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-like-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-list-bullets" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-list-numbers" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-location-off-target" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-location-target-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-location-target" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-location-user" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-lock-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-lock-unlock-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-login-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-login-key" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-logout-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-love-it" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-maps" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-meeting-camera" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-meeting-headphones-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-messages-bubble-double" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-messages-bubble" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-mobile-phone" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-module-puzzle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-monitor" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-mouse" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-move-expand-vertical" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-move-shrink-vertical" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-multiple-neutral-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-music-note-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-menu-4" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-menu-horizontal" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-menu-vertical" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-menu" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-next" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-previous" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-office-file-adobe" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-office-file-graph" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-office-file-hierarchy" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-office-file-sheet" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-office-file-text-graph" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-office-file-text" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-os-system-apple" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-os-system-microsoft" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-paragraph-center-align" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-paragraph-justified-align" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-paragraph-left-align" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-paragraph-right-align" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-paragraph" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-pencil-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-pencil-write-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-phone-charger" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-phone" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-pin-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-pin-3" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-pin" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-power-button" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-print-text" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-network-linkedin" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-tool-dropbox" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-tool-google-drive" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-programming-browser" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-question-circle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-rating-half-star" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-rating-star" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-redo" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove-square-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-rss-feed" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-ruler" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-scissors-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-scroll-horizontal" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-scroll-vertical" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-search" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-send-email" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-settings-horizontal" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-settings-vertical" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-share-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-share-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-shop-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-shopping-basket-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-shopping-cart-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-shrink-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-shrink-2" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-single-neutral" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-instagram" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-meetup-alternate" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-yammer" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-music-podcast" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-video-youtube-clip" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-subtract-square" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-subtract" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-switch-off-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-switch-on-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-synchronize-arrows-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-synchronize-arrows-three" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-tags-double" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-tags" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-text-bold" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-text-italic" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-text-strike-through" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-text-underline" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-toilet-paper-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-touch-id-5" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-undo" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-upload-bottom" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-upload-button" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-usb-port-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-user-signal-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-vectors-anchor-rectangle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-vectors-anchor-square" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-vectors-anchor-triangle" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-vectors-line-path" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-video-file-camera" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-video-player" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-view-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-view-off" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-volume-control-full" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-volume-control-low" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-volume-control-medium" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-volume-control-off" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-watch-time" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-wench-1" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-wifi" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-zip-file" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-zoom-in" /></svg></span>
<span class="ai"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-zoom-out" /></svg></span>

Layout

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

Media

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

Typography

base/base.typography

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

Heading 1

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

Heading 2

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

Heading 3

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

Heading 4

<h4>Heading 4</h4>
<div class="h4">Heading 4</div>
Heading 5
<h5>Heading 5</h5>
<div class="h5">Heading 5</div>
Heading 6
<h6>Heading 6</h6>
<div class="h6">Heading 6</div>
In some cases, it might be necessary to use the base font as font family for the headings. In that case, add the class has-base-font to your heading.
<h1 class="has-base-font">Heading 1</h1>
<h2 class="has-base-font">Heading 2</h2>
<h3 class="has-base-font">Heading 3</h3>
<h4 class="has-base-font">Heading 4</h4>
<h5 class="has-base-font">Heading 5</h5>
<h6 class="has-base-font">Heading 6</h6>

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

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

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

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

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

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

Mark

<mark>Mark</mark>

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

Utilities

Background

utilities/utilities.background

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

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

.u-bg
<div class="u-bg">.u-bg</div>
.u-bg-black
<div class="u-bg-black">.u-bg-black</div>
.u-bg-danger
<div class="u-bg-danger">.u-bg-danger</div>
.u-bg-light
<div class="u-bg-light">.u-bg-light</div>
.u-bg-primary
<div class="u-bg-primary">.u-bg-primary</div>
.u-bg-secondary
<div class="u-bg-secondary">.u-bg-secondary</div>
.u-bg-success
<div class="u-bg-success">.u-bg-success</div>
.u-bg-warning
<div class="u-bg-warning">.u-bg-warning</div>
.u-bg-white
<div class="u-bg-white">.u-bg-white</div>

Layout

utilities/utilities.layout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Note that you can also use the clearfix mixin.

<div class="u-clearfix">
  ...
</div>
.css {
  @include clearfix;
}

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

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

<div class="u-screen-reader-only">
  ...
</div>
.css {
  @extend %u-screen-reader-only;
}

Spacing

utilities/utilities.spacing

Helper classes for adding or removing space between elements.

.u-margin
<div class="u-margin">.u-margin</div>
.u-margin-bottom
<div class="u-margin-bottom">.u-margin-bottom</div>
.u-margin-bottom-lg
<div class="u-margin-bottom-lg">.u-margin-bottom-lg</div>
.u-margin-bottom-md
<div class="u-margin-bottom-md">.u-margin-bottom-md</div>
.u-margin-bottom-sm
<div class="u-margin-bottom-sm">.u-margin-bottom-sm</div>
.u-margin-bottom-xs
<div class="u-margin-bottom-xs">.u-margin-bottom-xs</div>
.u-margin-bottom-xx
<div class="u-margin-bottom-xx">.u-margin-bottom-xx</div>
.u-margin-left
<div class="u-margin-left">.u-margin-left</div>
.u-margin-left-lg
<div class="u-margin-left-lg">.u-margin-left-lg</div>
.u-margin-left-md
<div class="u-margin-left-md">.u-margin-left-md</div>
.u-margin-left-sm
<div class="u-margin-left-sm">.u-margin-left-sm</div>
.u-margin-left-xs
<div class="u-margin-left-xs">.u-margin-left-xs</div>
.u-margin-left-xx
<div class="u-margin-left-xx">.u-margin-left-xx</div>
.u-margin-lg
<div class="u-margin-lg">.u-margin-lg</div>
.u-margin-md
<div class="u-margin-md">.u-margin-md</div>
.u-margin-right
<div class="u-margin-right">.u-margin-right</div>
.u-margin-right-lg
<div class="u-margin-right-lg">.u-margin-right-lg</div>
.u-margin-right-md
<div class="u-margin-right-md">.u-margin-right-md</div>
.u-margin-right-sm
<div class="u-margin-right-sm">.u-margin-right-sm</div>
.u-margin-right-xs
<div class="u-margin-right-xs">.u-margin-right-xs</div>
.u-margin-right-xx
<div class="u-margin-right-xx">.u-margin-right-xx</div>
.u-margin-sm
<div class="u-margin-sm">.u-margin-sm</div>
.u-margin-top
<div class="u-margin-top">.u-margin-top</div>
.u-margin-top-lg
<div class="u-margin-top-lg">.u-margin-top-lg</div>
.u-margin-top-md
<div class="u-margin-top-md">.u-margin-top-md</div>
.u-margin-top-sm
<div class="u-margin-top-sm">.u-margin-top-sm</div>
.u-margin-top-xs
<div class="u-margin-top-xs">.u-margin-top-xs</div>
.u-margin-top-xx
<div class="u-margin-top-xx">.u-margin-top-xx</div>
.u-margin-xs
<div class="u-margin-xs">.u-margin-xs</div>
.u-margin-xx
<div class="u-margin-xx">.u-margin-xx</div>
.u-no-margin
<div class="u-no-margin">.u-no-margin</div>
.u-no-margin-bottom
<div class="u-no-margin-bottom">.u-no-margin-bottom</div>
.u-no-margin-left
<div class="u-no-margin-left">.u-no-margin-left</div>
.u-no-margin-right
<div class="u-no-margin-right">.u-no-margin-right</div>
.u-no-margin-top
<div class="u-no-margin-top">.u-no-margin-top</div>

Text

utilities/utilities.text

Helper classes for changing the appearance of text.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p class="u-text-truncate">.u-text-truncate</p>
.css {
  @extend %u-text-truncate;
}

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

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

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

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

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

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

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

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

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

Atoms

Addon

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

Avatar

atoms/atoms.avatar
Avatar image.
T
<div class="a-avatar">
  <img src="..." alt="..." />
</div>
<a href="#">
  <span class="a-avatar">
    <img src="..." alt="..." />
  </span>
</a>
<div class="a-avatar">
  <span class="a-avatar__icon" aria-label="avatarTitle">
    <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-single-neutral" /></svg></span>
  </span>
</div>
<div class="a-avatar">
  <span class="a-avatar__letter">T</span>
</div>
<div class="a-avatar a-avatar--small">
  <img src="..." alt="..." />
</div>
<a href="#">
  <span class="a-avatar a-avatar--small">
    <img src="..." alt="..." />
  </span>
</a>
<div class="a-avatar a-avatar--medium">
  <img src="..." alt="..." />
</div>
<a href="#">
  <span class="a-avatar a-avatar--medium">
    <img src="..." alt="..." />
  </span>
</a>
<div class="a-avatar a-avatar--large">
  <img src="..." alt="..." />
</div>
<a href="#">
  <span class="a-avatar a-avatar--large">
    <img src="..." alt="..." />
  </span>
</a>

Badge

atoms/atoms.badge
10
<span class="a-badge">10</span>
11
<span class="a-badge a-badge--primary">11</span>
12
<span class="a-badge a-badge--secondary">12</span>
13
<span class="a-badge a-badge--success">13</span>
14
<span class="a-badge a-badge--warning">14</span>
15
<span class="a-badge a-badge--danger">15</span>

Button

atoms/atoms.button

Regular buttons

<button class="a-button">Primary button</button>
<button class="a-button" disabled>Secondary button</button>
<button class="a-button a-button--secondary">Secondary button</button>
<button class="a-button a-button--success">Success button</button>
<button class="a-button a-button--warning">Warning button</button>
<button class="a-button a-button--danger">Danger button</button>
<button class="a-button a-button--transparent">Transparent button</button>

Negative buttons

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

Outline buttons

<button class="a-button-outline">Primary button</button>
<button class="a-button-outline" disabled>Secondary button</button>
<button class="a-button-outline a-button--secondary">Secondary button</button>
<button class="a-button-outline a-button--success">Success button</button>
<button class="a-button-outline a-button--warning">Warning button</button>
<button class="a-button-outline a-button--danger">Danger button</button>

Button sizes

<button class="a-button a-button--large">Large button</button>
<button class="a-button a-button--small">Small button</button>
<button class="a-button a-button--tiny">Tiny button</button>

Full width buttons

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

Icon buttons

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

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

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

<button class="a-button has-icon" aria-label="Download">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-download-bottom" /></svg></span>
</button>
<button class="a-button-negative has-icon" aria-label="Download">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-download-bottom" /></svg></span>
</button>
<button class="a-button-outline has-icon" aria-label="Download">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-download-bottom" /></svg></span>
</button>
<button class="a-button has-icon-right">
  <span class="ai ai--spin" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-synchronize-arrows-1" /></svg></span>
  Loading
</button>
<button class="a-button a-button--default has-icon" aria-label="Download">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-download-bottom" /></svg></span>
</button>
<button class="a-button-transparent a-button--default has-icon" aria-label="Close">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span>
</button>
<button class="a-button-transparent has-icon aria-label="Close"">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span>
</button>
<button class="a-button-transparent a-button--success has-icon aria-label="Close"">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span>
</button>
<button class="a-button-transparent a-button--warning has-icon aria-label="Close"">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span>
</button>
<button class="a-button-transparent a-button--danger has-icon aria-label="Close"">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span>
</button>

Official button

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

Social buttons

<a href="#" class="a-button a-button--facebook has-icon" aria-label="Facebook">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span>
</a>
<a href="#" class="a-button a-button--twitter has-icon" aria-label="Twitter">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></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/5.0.1/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/5.0.1/images/ai.svg#ai-social-instagram" /></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/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span>
</a>

Code

atoms/atoms.code

Type npm install in your command line.

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

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

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

The error message simply said: An error has occurred.

The error message simply said: <samp>An error has occurred</samp>.
                           ''~``
                          ( o o )
+--------------------.oooO--(_)--Oooo.--------------------+
|                                                         |
|                      .oooO                              |
|                      (   )   Oooo.                      |
+-----------------------\ (----(   )----------------------+
                         \_)    ) /
                               (_/
<pre class="a-pre a-pre--scrollable">
  ...
</pre>
var add = (function () {
  var counter = 0;
  return function () {
    return counter += 1;
  }
})();
<pre class="a-pre a-pre--scrollable">
  <code>
    var add = (function () {
      var counter = 0;
      return function () {
        return counter += 1;
      }
    })();
  </code>
</pre>

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

Copyright

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

Form

atoms/atoms.form

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

Use the .a-form class as a wrapper around .a-input classes to automatically create spacing between your form elements.
<form class="a-form">
  <div class="a-input">...</div>
  <div class="a-input">...</div>
  ...
</form>
Optional legend Your form here
<fieldset>
  <legend>Optional legend</legend>
  ...
</fieldset>

Input

atoms/atoms.input

Standard input fields

Input description
<div class="a-input">
  <label class="a-input__label" for="text-field">Text field</label>
  <input type="text" name="text-field" id="text-field" placeholder="Placeholder" aria-describedby="text-field-description" />
  <small id="text-field-description">Input description</small>
</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" placeholder="Placeholder" aria-describedby="text-field-description" 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" placeholder="Placeholder" aria-describedby="text-field-description" readonly />
</div>

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

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

Accessibility note. Always provide an explanation above the form in case you use asterisks. For example: Fields marked with an asterisk (*) are required.

<div class="a-input a-input--inline">
  <label class="a-input__label a-input__label--inline" for="inline-text-field">Inline text field</label>
  <input type="text" name="inline-text-field" id="inline-text-field" placeholder="Placeholder" />
</div>
<div class="a-input">
  <label class="a-input__label">Input checkbox</label>
  <div class="a-input__checkbox">
    <input type="checkbox" id="checkbox1" name="input-checkbox" checked="">
    <label for="checkbox1">Option one</label>
  </div>
  <div class="a-input__checkbox">
    <input type="checkbox" id="checkbox2" name="input-checkbox">
    <label for="checkbox2">Option two contains a bit more text, so we can test its behaviour on smaller devices.</label>
  </div>
  <div class="a-input__checkbox">
    <input type="checkbox" id="checkbox3" name="input-checkbox" disabled="">
    <label for="checkbox3">Option three is disabled</label>
  </div>
  <div class="a-input__checkbox">
    <input type="checkbox" id="checkbox4" name="input-checkbox" checked="" disabled="">
    <label for="checkbox4">Option four is checked and disabled</label>
  </div>
</div>
<div class="a-input">
  <label class="a-input__label">Input radio button</label>
  <div class="a-input__radio">
    <input type="radio" id="radio1" name="input-radio" checked="">
    <label for="radio1">Option one</label>
  </div>
  <div class="a-input__radio">
    <input type="radio" id="radio2" name="input-radio">
    <label for="radio2">Option two contains a bit more text, so we can test its behaviour on smaller devices.</label>
  </div>
  <div class="a-input__radio">
    <input type="radio" id="radio3" name="input-radio" disabled="">
    <label for="radio3">Option three is disabled</label>
  </div>
  <div class="a-input__radio">
    <input type="radio" id="radio4" name="input-radio2" checked="" disabled="">
    <label for="radio4">Separate radio button that is checked and disabled</label>
  </div>
</div>
<div class="a-input">
  <label class="a-input__label" for="input-textarea">Text area</label>
  <textarea name="input-textarea" id="input-textarea" placeholder="Placeholder"></textarea>
</div>
<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/5.0.1/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/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
  </div>
</div>

Input field sizes

<div class="a-input a-input--small">
  <label class="a-input__label" for="text-field-small">Text field</label>
  <input type="text" name="text-field-small" id="text-field-small" placeholder="Placeholder" />
</div>
<div class="a-input a-input--small 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/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
  </div>
</div>
<div class="a-input a-input--small">
  <label class="a-input__label" for="input-textarea-small">Text area</label>
  <textarea name="input-textarea-small" id="input-textarea-small" placeholder="Placeholder"></textarea>
</div>
<div class="a-input a-input--large">
  <label class="a-input__label" for="text-field-large">Text field</label>
  <input type="text" name="text-field-large" id="text-field-large" placeholder="Placeholder" />
</div>
<div class="a-input a-input--large 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/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
  </div>
</div>
<div class="a-input a-input--large">
  <label class="a-input__label" for="input-textarea-large">Text area</label>
  <textarea name="input-textarea-large" id="input-textarea-large" placeholder="Placeholder"></textarea>
</div>

Input icons and addons

<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/5.0.1/images/ai.svg#ai-single-neutral" /></svg></span>
    <input type="text" name="text-field-icon-left" id="text-field-icon-left" placeholder="Placeholder" />
  </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" placeholder="Placeholder" />
    <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-view-1" /></svg></span>
  </div>
</div>
<div class="a-input has-addon">
  <label class="a-input__label" for="text-field-addon-left">Text field with left addon</label>
  <div class="a-input__wrapper">
    <div class="a-input__addon">&euro;</div>
    <input type="text" name="text-field-addon-left" id="text-field-addon-left" placeholder="Placeholder" />
  </div>
</div>
km
<div class="a-input has-addon">
  <label class="a-input__label" for="text-field-addon-right">Text field with right addon</label>
  <div class="a-input__wrapper">
    <input type="text" name="text-field-addon-right" id="text-field-addon-right" placeholder="Placeholder" />
    <div class="a-input__addon">km</div>
  </div>
</div>

Input states

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

Label

atoms/atoms.label
Default label
<span class="a-label">Default label</span>
Primary label
<span class="a-label a-label--primary">Primary label</span>
Secondary label
<span class="a-label a-label--secondary">Secondary label</span>
Success label
<span class="a-label a-label--success">Success label</span>
Warning label
<span class="a-label a-label--warning">Warning label</span>
Danger label
<span class="a-label a-label--danger">Danger label</span>

Link

atoms/atoms.link
<a href="#">
  This is a nice link
</a>
<a href="#" class="has-icon-left">
  <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>This is a nice link with an icon to the left
</a>
<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/5.0.1/images/ai.svg#ai-navigation-next" /></svg></span><span class="u-screen-reader-only"> (external)</span>
</a>

List

atoms/atoms.list

Standard lists

  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
  1. First item
  2. Second item
    1. First subitem
    2. Second subitem
  3. Third item
  4. Fourth item
<ul class="a-list">
  <li>First item</li>
  <li>Second item
    <ul class="a-list">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
<ol class="a-list">
  <li>First item</li>
  <li>Second item
    <ol class="a-list">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ol>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ol>
.css {
  @extend %a-list;
}

List variations

  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list a-list--reset">
  <li>First item</li>
  <li>Second item
    <ul class="a-list">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
.css {
  @extend %a-list--reset;
}
  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list a-list--unstyled">
  <li>First item</li>
  <li>Second item
    <ul class="a-list">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
.css {
  @extend %a-list--unstyled;
}
  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list a-list--flattened">
  <li>First item</li>
  <li>Second item
    <ul class="a-list">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
.css {
  @extend %a-list--flattened;
}
  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list a-list--primary">
  <li>First item</li>
  <li>Second item
    <ul class="a-list">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
.css {
  @extend %a-list--primary;
}
  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list a-list--lined">
  <li>First item</li>
  <li>Second item
    <ul class="a-list a-list--lined">
      <li>First subitem</li>
      <li>Second subitem</li>
    </ul>
  </li>
  <li>Third item</li>
  <li>Fourth item</li>
</ul>
.css {
  @extend %a-list--lined;
}

Icon lists

  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list has-icon-left">
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>First item</li>
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Second item
    <ul class="a-list">
      <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>First subitem</li>
      <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Second subitem</li>
    </ul>
  </li>
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Third item</li>
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Fourth item</li>
</ul>
<ul class="a-list has-icon-right">
  <li>First item<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></li>
  <li>Second item<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span>
    <ul class="a-list">
      <li>First subitem<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></li>
      <li>Second subitem<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></li>
    </ul>
  </li>
  <li>Third item<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></li>
  <li>Fourth item<span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></li>
</ul>

List combinations

  • First item
  • Second item
    • First subitem
    • Second subitem
  • Third item
  • Fourth item
<ul class="a-list a-list--lined has-icon-left">
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>First item</li>
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Second item
    <ul class="a-list a-list--lined has-icon-left">
      <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>First subitem</li>
      <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Second subitem</li>
    </ul>
  </li>
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Third item</li>
  <li><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>Fourth item</li>
</ul>
.css {
  @extend %a-list--lined has-icon-left;
}

Definition list

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

Radio button / checkbox

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

Spinner

atoms/atoms.spinner
<div class="a-spinner" role="alert"><span class="u-screen-reader-only">Loading</span></div>
<div class="a-spinner a-spinner--sm" role="alert"><span class="u-screen-reader-only">Loading</span></div>

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

<div class="a-spinner a-spinner--lg" role="alert"><span class="u-screen-reader-only">Loading</span></div>

Switch

atoms/atoms.switch

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

<div class="a-switch">
  <button class="a-switch__button" role="switch" aria-checked="false">
    <span class="a-switch__off">Off</span>
    <span class="a-switch__on">On</span>
  </button>
</div>
<div class="a-switch">
  <button class="a-switch__button" role="switch" aria-checked="true">
    <span class="a-switch__off">Off</span>
    <span class="a-switch__on">On</span>
  </button>
</div>

Disabled switch

<div class="a-switch">
  <button class="a-switch__button" role="switch" aria-checked="false" disabled>
    <span class="a-switch__off">Off</span>
    <span class="a-switch__on">On</span>
  </button>
</div>
<div class="a-switch">
  <button class="a-switch__button" role="switch" aria-checked="true" disabled>
    <span class="a-switch__off">Off</span>
    <span class="a-switch__on">On</span>
  </button>
</div>

Switch with label

<div class="a-input">
  <label class="a-input__label" for="switch-button">Switch label</label>
  <div class="a-switch">
    <button class="a-switch__button" id="switch-button" role="switch" aria-checked="false">
      <span class="a-switch__off">Off</span>
      <span class="a-switch__on">On</span>
    </button>
  </div>
</div>

Table

atoms/atoms.table

Standard tables

Standard table
Standard table Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table">
  <caption>Standard table</caption>
  <thead>
    <tr>
      <th>Standard table</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>
More compact table
More compact table Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table a-table--small">
  <caption>More compact table</caption>
  <thead>
    <tr>
      <th>More compact table</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Table schemes

Primary table
Primary table Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table a-table--primary">
  <caption>Primary table</caption>
  <thead>
    <tr>
      <th>Primary table</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>
Secondary table
Secondary table Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table a-table--secondary">
  <caption>Seconday table</caption>
  <thead>
    <tr>
      <th>Secondary table</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>
Striped table
Striped table Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table a-table--striped">
  <caption>Striped table</caption>
  <thead>
    <tr>
      <th>Striped table</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Table cell options

Condensed table
Condensed table cells Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table">
  <caption>Condensed table</caption>
  <thead>
    <tr>
      <th class="is-condensed">Condensed table cells</th>
      <th class="is-condensed">...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="is-condensed">...</td>
      <td class="is-condensed">...</td>
    </tr>
    <tr>
      <td class="is-condensed">...</td>
      <td class="is-condensed">...</td>
    </tr>
    <tr>
      <td class="is-condensed">...</td>
      <td class="is-condensed">...</td>
    </tr>
  </tbody>
</table>
Paddingless table
Table cells without padding Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<table class="a-table">
  <caption>Paddingless table</caption>
  <thead>
    <tr>
      <th class="has-no-padding">Table cells without padding</th>
      <th class="has-no-padding">...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="has-no-padding">...</td>
      <td class="has-no-padding">...</td>
    </tr>
    <tr>
      <td class="has-no-padding">...</td>
      <td class="has-no-padding">...</td>
    </tr>
    <tr>
      <td class="has-no-padding">...</td>
      <td class="has-no-padding">...</td>
    </tr>
  </tbody>
</table>

Responsive wrapper for tables

Responsive table
Responsive table Publius Vergilius Maro
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.
<div class="a-table__wrapper-responsive">
  <table class="a-table">
    <caption>Responsive table</caption>
    <thead>
      <tr>
        <th>Responsive table</th>
        <th>...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Timepicker

atoms/atoms.timepicker
:
<div class="a-timepicker">
  <div class="a-input has-icon-right">
    <label class="a-input__label" for="input-hours">Hours</label>
    <div class="a-input__wrapper">
      <select name="input-hours" id="input-houres">
        <option value="" disabled selected>hh</option>
        <option value="...">...</option>
      </select>
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
    </div>
  </div>
  <span class="a-timepicker__separator">:</span>
  <div class="a-input has-icon-right">
    <label class="a-input__label" for="input-minutes">Minutes</label>
    <div class="a-input__wrapper">
      <select name="input-minutes" id="input-minutes">
        <option value="" disabled selected>mm</option>
        <option value="...">...</option>
      </select>
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
    </div>
  </div>
</div>

Toggle

atoms/atoms.toggle

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

<div class="a-toggle">
  <button class="a-toggle__button" aria-expanded="false">
    <span class="a-button a-toggle__on has-icon-left"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/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/5.0.1/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/5.0.1/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/5.0.1/images/ai.svg#ai-remove" /></svg></span>Close</span>
  </button>
</div>

Toggle with icon only

<div class="a-toggle">
  <button class="a-toggle__button" aria-expanded="false">
    <span class="a-button a-toggle__on has-icon">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/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/5.0.1/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close menu</span>
    </span>
  </button>
</div>

Toggle sizes

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

Tooltip

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

Molecules

Accordion

molecules/molecules.accordion
Aeneis

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

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

Alert

molecules/molecules.alert

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

Alert

Some explanation.

<div role="alertdialog" aria-labelledby="alert" class="m-alert">
  <button class="a-button-transparent has-icon m-alert__close" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  <h4 id="alert" class="h5 u-margin-bottom-xs">Alert</h4>
  <p class="u-margin-bottom">Some explanation.</p>
  <div class="m-alert__actions">
    <button class="a-button-outline a-button--small">Cancel</button>
    <button class="a-button a-button--small">Got it</button>
  </div>
</div>

Success alert

Some explanation.

<div role="alertdialog" aria-labelledby="alert-success" class="m-alert m-alert--success">
  <button class="a-button-transparent 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/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  <h4 id="alert-success" class="h5 u-margin-bottom-xs">Success alert</h4>
  <p class="u-margin-bottom">Some explanation.</p>
  <div class="m-alert__actions">
    <button class="a-button-outline a-button--success a-button--small">Cancel</button>
    <button class="a-button a-button--success a-button--small">Got it</button>
  </div>
</div>

Warning alert

Some explanation.

<div role="alertdialog" aria-labelledby="alert-warning" class="m-alert m-alert--warning">
  <button class="a-button-transparent 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/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  <h4 id="alert-warning" class="h5 u-margin-bottom-xs">Warning alert</h4>
  <p class="u-margin-bottom">Some explanation.</p>
  <div class="m-alert__actions">
    <button class="a-button-outline a-button--warning a-button--small">Cancel</button>
    <button class="a-button a-button--warning a-button--small">Got it</button>
  </div>
</div>

Danger alert

Some explanation.

<div role="alertdialog" aria-labelledby="alert-danger" class="m-alert m-alert--danger">
  <button class="a-button-transparent 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/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  <h4 id="alert-danger" class="h5 u-margin-bottom-xs">Danger alert</h4>
  <p class="u-margin-bottom">Some explanation.</p>
  <div class="m-alert__actions">
    <button class="a-button-outline a-button--danger a-button--small">Cancel</button>
    <button class="a-button a-button--danger a-button--small">Got it</button>
  </div>
</div>

Breadcrumb

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

Button group

molecules/molecules.button-group

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

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

Button list

molecules/molecules.button-list
<ul class="m-button-list">
  <li><a href="#" class="a-button a-button--facebook has-icon" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
  <li><a href="#" class="a-button a-button--twitter has-icon" aria-label="Twitter"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></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/5.0.1/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/5.0.1/images/ai.svg#ai-social-instagram" /></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/5.0.1/images/ai.svg#ai-social-media-snapchat" /></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/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
  <li><a href="#" class="a-button a-button--twitter has-icon" aria-label="Twitter"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></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/5.0.1/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/5.0.1/images/ai.svg#ai-social-instagram" /></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/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
</ul>

Card

molecules/molecules.card
Avatar image.

Publius Vergilius Maro

Card image.

Aeneis

May 4th 2017, 12:34

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

Read the article

<div class="m-card">
  <div class="m-card__header">
    <div class="m-contact">
      <div class="a-avatar a-avatar--small">
        <img src="https://robohash.org/vergilius" alt="Avatar image." />
      </div>
      <div class="m-contact__info">
        <p class="u-text-bold">Publius Vergilius Maro</p>
      </div>
    </div>
  </div>
  <div class="m-card__image">
    <img src="https://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 2017, 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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span>
      </a>
    </p>
  </div>
</div>

Collapsible list

molecules/molecules.collapsible-list
<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/5.0.1/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/5.0.1/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/5.0.1/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>

Contact

molecules/molecules.contact
Avatar image.

Jasper Van Proeyen

Avatar image.

Sander Geenen

1 min ago

<div class="m-contact">
  <div class="a-avatar a-avatar--small">
    <img src="https://robohash.org/jasper" alt="Avatar image." />
  </div>
  <div class="m-contact__info">
    <p class="u-text-bold">Jasper Van Proeyen</p>
  </div>
</div>
<div class="m-contact">
  <div class="a-avatar a-avatar--small">
    <img src="https://robohash.org/sander" alt="Avatar image." />
  </div>
  <div class="m-contact__info">
    <p class="u-text-bold">Sander Geenen</p>
    <p class="small">1 min ago</p>
  </div>
</div>
Avatar image.

Jasper Van Proeyen

Avatar image.

Sander Geenen

1 min ago

<div class="m-contact">
  <div class="a-avatar">
    <img src="https://robohash.org/jasper" alt="Avatar image." />
  </div>
  <div class="m-contact__info">
    <p class="u-text-bold">Jasper Van Proeyen</p>
  </div>
</div>
<div class="m-contact">
  <div class="a-avatar">
    <img src="https://robohash.org/sander" alt="Avatar image." />
  </div>
  <div class="m-contact__info">
    <p class="u-text-bold">Sander Geenen</p>
    <p class="small">1 min ago</p>
  </div>
</div>

Datepicker

molecules/molecules.datepicker

Datepicker views

Mo Tu We Th Fr Sa Su
<div role="application" aria-label="Datepicker days" class="m-datepicker is-open" aria-hidden="false">
  <div class="m-datepicker__nav">
    <button type="button" aria-label="Go to previous month, April 2017" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></button>
    <button type="button" class="m-datepicker__title a-button">May 2017</button>
    <button type="button" aria-label="Go to next month, June 2017" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></button>
  </div>
  <table>
    <thead>
      <tr class="m-datepicker__days">
        <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__calendar">
      <tr>
        <td><button type="button" class="is-faded" aria-label="Monday 27 April 2017">27</button></td>
        <td><button type="button" class="is-faded" aria-label="Tuesday 28 April 2017">28</button></td>
        <td><button type="button" aria-label="Wednesday 1 May 2017">1</button></td>
        <td><button type="button" aria-label="Thursday 2 May 2017">2</button></td>
        <td><button type="button" aria-label="Friday 3 May 2017">3</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 4 May 2017">4</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 5 May 2017">5</button></td>
      </tr>
      <tr>
        <td><button type="button" aria-label="Monday 6 May 2017">6</button></td>
        <td><button type="button" aria-label="Tuesday 7 May 2017">7</button></td>
        <td><button type="button" aria-label="Wednesday 8 May 2017">8</button></td>
        <td><button type="button" class="is-selected" aria-pressed="true" aria-label="Thursday 9 May 2017">9</button></td>
        <td><button type="button" aria-label="Friday 10 May 2017">10</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 11 May 2017">11</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 12 May 2017">12</button></td>
      </tr>
      <tr>
        <td><button type="button" aria-label="Monday 13 May 2017">13</button></td>
        <td><button type="button" aria-label="Tuesday 14 May 2017">14</button></td>
        <td><button type="button" aria-label="Wednesday 15 May 2017">15</button></td>
        <td><button type="button" aria-label="Thursday 16 May 2017">16</button></td>
        <td><button type="button" aria-label="Friday 17 May 2017">17</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 18 May 2017">18</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 19 May 2017">19</button></td>
      </tr>
      <tr>
        <td><button type="button" aria-label="Monday 20 May 2017">20</button></td>
        <td><button type="button" class="is-current" aria-label="Tuesday 21 May 2017">21</button></td>
        <td><button type="button" aria-label="Wednesday 22 May 2017">22</button></td>
        <td><button type="button" aria-label="Thursday 23 May 2017">23</button></td>
        <td><button type="button" aria-label="Friday 24 May 2017">24</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 25 May 2017">25</button></td>
        <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 26 May 2017">26</button></td>
      </tr>
      <tr>
        <td><button type="button" aria-label="Monday 27 May 2017">27</button></td>
        <td><button type="button" aria-label="Tuesday 28 May 2017">28</button></td>
        <td><button type="button" aria-label="Wednesday 29 May 2017">29</button></td>
        <td><button type="button" aria-label="Thursday 30 May 2017">30</button></td>
        <td><button type="button" aria-label="Friday 31 May 2017">31</button></td>
        <td><button type="button" class="is-faded" aria-label="Saturday 1 June 2017">1</button></td>
        <td><button type="button" class="is-faded" aria-label="Sunday 2 June 2017">2</button></td>
      </tr>
    </tbody>
  </table>
</div>
<div role="application" aria-label="Datepicker months" class="m-datepicker is-open" aria-hidden="false">
  <div class="m-datepicker__nav">
    <button type="button" aria-label="Go to previous year (2016)" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></button>
    <button type="button" class="m-datepicker__title a-button">2017</button>
    <button type="button" aria-label="Go to next year (2018)" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></button>
  </div>
  <table>
    <tbody class="m-datepicker__calendar">
      <tr>
        <td><button type="button" aria-label="January 2017">Jan</button></td>
        <td><button type="button" aria-label="February 2017">Feb</button></td>
        <td><button type="button" aria-label="March 2017">Mar</button></td>
        <td><button type="button" aria-label="April 2017">Apr</button></td>
      </tr>
      <tr>
        <td><button type="button" aria-label="May 2017">May</button></td>
        <td><button type="button" aria-label="June 2017">Jun</button></td>
        <td><button type="button" aria-label="July 2017">Jul</button></td>
        <td><button type="button" aria-label="August 2017">Aug</button></td>
      </tr>
      <tr>
        <td><button type="button" aria-label="September 2017">Sep</button></td>
        <td><button type="button" aria-label="October 2017">Oct</button></td>
        <td><button type="button" aria-label="November 2017">Nov</button></td>
        <td><button type="button" aria-label="December 2017">Dec</button></td>
      </tr>
    </tbody>
  </table>
</div>
<div role="application" aria-label="Datepicker years" class="m-datepicker is-open" aria-hidden="false">
  <div class="m-datepicker__nav">
    <button type="button" aria-label="Go back 12 years (1995-2006)" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></button>
    <button type="button" class="m-datepicker__title a-button">2007 - 2018</button>
    <button type="button" aria-label="Go forward 12 years (2019-2030)" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></button>
  </div>
  <table>
    <tbody class="m-datepicker__calendar">
      <tr>
        <td><button type="button">2007</button></td>
        <td><button type="button">2008</button></td>
        <td><button type="button">2009</button></td>
        <td><button type="button">2010</button></td>
      </tr>
      <tr>
        <td><button type="button">2011</button></td>
        <td><button type="button">2012</button></td>
        <td><button type="button">2013</button></td>
        <td><button type="button">2014</button></td>
      </tr>
      <tr>
        <td><button type="button">2015</button></td>
        <td><button type="button">2016</button></td>
        <td><button type="button">2017</button></td>
        <td><button type="button">2018</button></td>
      </tr>
    </tbody>
  </table>
</div>

Datepicker attached to an input field

Mo Tu We Th Fr Sa Su

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

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

<div class="a-input has-icon-right">
  <label class="a-input__label" for="input-datepicker">Choose a date</label>
  <div class="a-input__wrapper">
    <input type="text" name="input-datepicker" id="input-datepicker" placeholder="dd/mm/yyyy" />
    <span class="ai is-clickable" aria-hidden="true" role="button" tabindex="0" aria-expanded="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-calendar-3" /></svg></span>
    <div role="application" aria-label="Attached datepicker days" class="m-datepicker m-datepicker--fixed is-open" aria-hidden="false">
      <div class="m-datepicker__nav">
        <button type="button" aria-label="Go to previous month, April 2017" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></button>
        <button type="button" class="m-datepicker__title a-button">May 2017</button>
        <button type="button" aria-label="Go to next month, June 2017" class="a-button has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></button>
      </div>
      <table>
        <thead>
          <tr class="m-datepicker__days">
            <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__calendar">
          <tr>
            <td><button type="button" class="is-faded" aria-label="Monday 27 April 2017">27</button></td>
            <td><button type="button" class="is-faded" aria-label="Tuesday 28 April 2017">28</button></td>
            <td><button type="button" aria-label="Wednesday 1 May 2017">1</button></td>
            <td><button type="button" aria-label="Thursday 2 May 2017">2</button></td>
            <td><button type="button" aria-label="Friday 3 May 2017">3</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 4 May 2017">4</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 5 May 2017">5</button></td>
          </tr>
          <tr>
            <td><button type="button" aria-label="Monday 6 May 2017">6</button></td>
            <td><button type="button" aria-label="Tuesday 7 May 2017">7</button></td>
            <td><button type="button" aria-label="Wednesday 8 May 2017">8</button></td>
            <td><button type="button" class="is-selected" aria-pressed="true" aria-label="Thursday 9 May 2017">9</button></td>
            <td><button type="button" aria-label="Friday 10 May 2017">10</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 11 May 2017">11</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 12 May 2017">12</button></td>
          </tr>
          <tr>
            <td><button type="button" aria-label="Monday 13 May 2017">13</button></td>
            <td><button type="button" aria-label="Tuesday 14 May 2017">14</button></td>
            <td><button type="button" aria-label="Wednesday 15 May 2017">15</button></td>
            <td><button type="button" aria-label="Thursday 16 May 2017">16</button></td>
            <td><button type="button" aria-label="Friday 17 May 2017">17</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 18 May 2017">18</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 19 May 2017">19</button></td>
          </tr>
          <tr>
            <td><button type="button" aria-label="Monday 20 May 2017">20</button></td>
            <td><button type="button" class="is-current" aria-label="Tuesday 21 May 2017">21</button></td>
            <td><button type="button" aria-label="Wednesday 22 May 2017">22</button></td>
            <td><button type="button" aria-label="Thursday 23 May 2017">23</button></td>
            <td><button type="button" aria-label="Friday 24 May 2017">24</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Saturday 25 May 2017">25</button></td>
            <td><button type="button" class="is-unavailable" tabindex="-1" aria-disabled="true" aria-label="Sunday 26 May 2017">26</button></td>
          </tr>
          <tr>
            <td><button type="button" aria-label="Monday 27 May 2017">27</button></td>
            <td><button type="button" aria-label="Tuesday 28 May 2017">28</button></td>
            <td><button type="button" aria-label="Wednesday 29 May 2017">29</button></td>
            <td><button type="button" aria-label="Thursday 30 May 2017">30</button></td>
            <td><button type="button" aria-label="Friday 31 May 2017">31</button></td>
            <td><button type="button" class="is-faded" aria-label="Saturday 1 June 2017">1</button></td>
            <td><button type="button" class="is-faded" aria-label="Sunday 2 June 2017">2</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
// To open your datepicker on the left side of your input field
...
<div role="datepicker" class="m-datepicker m-datepicker--left is-open m-datepicker--fixed" aria-hidden="false">
...

Flyout

atoms/atoms.flyout

Default flyout

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

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

Flyout sizes

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

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

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

… the element that triggers it.

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

Flyout options

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

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

No padding here.

<div class="m-flyout m-flyout--sm is-open d-flyout--md">
  <button class="a-button" aria-expanded="true">Flyout without padding</button>
  <div class="m-flyout__content">
    <p>No padding here.</p>
  </div>
</div>
<div class="m-flyout m-flyout--full m-flyout--scrollable is-open">
  <label class="a-input__label" for="input-autocomplete">Flyout as an autocomplete</label>
  <div class="a-input">
    <input type="text" name="input-autocomplete" id="input-autocomplete" placeholder="Placeholder" aria-expanded="true" />
  </div>
  <div class="m-flyout__content">
    <ul class="m-selectable-list m-selectable-list--no-border">
      <li>...</li>
    </ul>
  </div>
</div>

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

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

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

Gallery

molecules/molecules.gallery
<ul class="m-gallery">
  <li class="m-gallery__item m-gallery__item--preview">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/1000x600" title="Item 1">
      <img src="https://source.unsplash.com/collection/54002680/1000x600" alt="Gallery image 1.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 2">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 2.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 3">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 3.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 4">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 4.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 5">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 5.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 6">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 6.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 7">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 7.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 8">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 8.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 9">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 9.">
    </a>
  </li>
  <li class="m-gallery__item">
    <a rel="gallery" href="https://source.unsplash.com/collection/54002680/320x320" title="Item 10">
      <img src="https://source.unsplash.com/collection/54002680/320x320" alt="Gallery image 10.">
    </a>
  </li>
</ul>

Icon list

molecules/molecules.icon-list

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

<ul class="m-icon-list">
    <li><a href="#" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
    <li><a href="#" aria-label="Twitter"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></svg></span></a></li>
    <li><a href="#" aria-label="LinkedIn"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-network-linkedin" /></svg></span></a></li>
    <li><a href="#" aria-label="Instagram"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-instagram" /></svg></span></a></li>
    <li><a href="#" aria-label="Snapchat"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
</ul>
<ul class="m-icon-list m-icon-list--negative">
    <li><a href="#" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
    <li><a href="#" aria-label="Twitter"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></svg></span></a></li>
    <li><a href="#" aria-label="LinkedIn"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-network-linkedin" /></svg></span></a></li>
    <li><a href="#" aria-label="Instagram"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-instagram" /></svg></span></a></li>
    <li><a href="#" aria-label="Snapchat"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
</ul>
<ul class="m-icon-list m-icon-list--horizontal">
    <li><a href="#" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
    <li><a href="#" aria-label="Twitter"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></svg></span></a></li>
    <li><a href="#" aria-label="LinkedIn"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-network-linkedin" /></svg></span></a></li>
    <li><a href="#" aria-label="Instagram"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-instagram" /></svg></span></a></li>
    <li><a href="#" aria-label="Snapchat"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
</ul>
<ul class="m-icon-list m-icon-list--horizontal m-icon-list--negative">
    <li><a href="#" aria-label="Facebook"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-facebook" /></svg></span></a></li>
    <li><a href="#" aria-label="Twitter"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-twitter" /></svg></span></a></li>
    <li><a href="#" aria-label="LinkedIn"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-professional-network-linkedin" /></svg></span></a></li>
    <li><a href="#" aria-label="Instagram"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-instagram" /></svg></span></a></li>
    <li><a href="#" aria-label="Snapchat"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-social-media-snapchat" /></svg></span></a></li>
</ul>

Image

molecules/molecules.image
Figure image.
<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" aria-expanded="false">
    <span class="a-copyright__sign">©</span>
    <span class="a-copyright__label">Unsplash</span>
  </a>
</figure>

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

Modal

molecules/molecules.modal

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

<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-transparent a-button--default has-icon" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/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-outline">Cancel</button>
    </div>
  </div>
</div>
<div class="m-modal m-modal--large" 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-transparent a-button--default has-icon" aria-label="Close"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/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-outline">Cancel</button>
    </div>
  </div>
</div>

Navigation

molecules/molecules.navigation

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

List navigation

<ul class="m-nav-list" role="tablist" aria-label="My tablist">
  <li><a href="#" role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</a></li>
  <li><a class="is-active" href="#" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></a></li>
  <li><a class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</a></li>
</ul>
<ul class="m-nav-list m-nav-list--left">
  <li><a href="#" role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</a></li>
  <li><a class="is-active" href="#" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></a></li>
  <li><a class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</a></li>
</ul>

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

<ul class="m-nav-list" role="tablist" aria-label="My tablist">
  <li><button role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</button></li>
  <li><button class="is-active" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></button></li>
  <li><button class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</button></li>
</ul>
<ul class="m-nav-list m-nav-list--left" role="tablist" aria-label="My tablist">
  <li><button role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</button></li>
  <li><button class="is-active" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></button></li>
  <li><button class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</button></li>
</ul>

Tab navigation

<ul class="m-nav-tabs" role="tablist" aria-label="My tablist">
  <li><a href="#" role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</a></li>
  <li><a class="is-active" href="#" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></a></li>
  <li><a class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</a></li>
</ul>
<ul class="m-nav-tabs m-nav-tabs--left" role="tablist" aria-label="My tablist">
  <li><a href="#" role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</a></li>
  <li><a class="is-active" href="#" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></a></li>
  <li><a class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</a></li>
</ul>
<ul class="m-nav-tabs m-nav-tabs--right" role="tablist" aria-label="My tablist">
  <li><a href="#" role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</a></li>
  <li><a class="is-active" href="#" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></a></li>
  <li><a class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</a></li>
</ul>
<ul class="m-nav-tabs m-nav-tabs--left" role="tablist" aria-label="My tablist">
  <li><button role="tab" aria-selected="false"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-study-light-idea" /></svg></span>Thomas Edison</a></li>
  <li><button class="is-active" role="tab" aria-selected="true">Leonardo da Vinci <span class="a-badge">67</span></button></li>
  <li><button class="is-disabled" role="tab" aria-disabled="true" aria-selected="false">Albert Einstein</button></li>
</ul>

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

Overlay

molecules/molecules.overlay

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

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

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

Pagination

molecules/molecules.pagination

Regular pagination

  • Page 1 of 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/5.0.1/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/5.0.1/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/5.0.1/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/5.0.1/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/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
  <li>...</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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>

Outline pagination

  • Page 1 of 6
<ul class="m-pagination m-pagination--outline">
  <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/5.0.1/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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>
<ul class="m-pagination m-pagination--outline">
  <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/5.0.1/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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>
<ul class="m-pagination m-pagination--outline">
  <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/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
  <li>...</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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>

Pagination sizes

  • Page 1 of 6
<ul class="m-pagination m-pagination--small">
  <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/5.0.1/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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>
<ul class="m-pagination m-pagination--large">
  <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/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
  <li>...</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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>
<ul class="m-pagination m-pagination--outline m-pagination--large">
  <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/5.0.1/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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>
<ul class="m-pagination m-pagination--outline m-pagination--small">
  <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/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span></a></li>
  <li>...</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/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span></a></li>
</ul>

Progress

molecules/molecules.progress
Step 1 of 5
<div class="m-progress">
  <div class="m-progress__label">Step 1 of 5</div>
  <div class="m-progress__inner">
    <div class="m-progress__bar" style="width: 20%"></div>
  </div>
</div>
20%
<div class="m-progress m-progress--inline">
  <div class="m-progress__inner">
    <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
  </div>
  <div class="m-progress__label">20%</div>
</div>
20%
<div class="m-progress m-progress--inline">
  <div class="m-progress__label">20%</div>
  <div class="m-progress__inner">
    <div class="m-progress__bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
  </div>
</div>

20%

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

Range slider

molecules/molecules.range-slider

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

50%

<div class="m-range-slider">
  <div class="m-range-slider__inner">
    <div class="m-range-slider__bar" style="width: 50%"></div>
    <span class="m-range-slider__handle" style="left: 50%;" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0">
      <div class="m-range-slider__tooltip a-tooltip a-tooltip--primary a-tooltip--top">
        <p>50%</p>
      </div>
    </span>
  </div>
</div>

20%

80%

<div class="m-range-slider">
  <div class="m-range-slider__inner">
    <div class="m-range-slider__bar" style="left: 20%; width: 60%"></div>
    <span class="m-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0">
      <div class="m-range-slider__tooltip a-tooltip a-tooltip--primary a-tooltip--top">
        <p>20%</p>
      </div>
    </span>
    <span class="m-range-slider__handle" style="left: 80%;" role="slider" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0">
      <div class="m-range-slider__tooltip a-tooltip a-tooltip--primary a-tooltip--top">
        <p>80%</p>
      </div>
    </span>
  </div>
</div>
50%
<div class="m-range-slider">
  <div class="m-range-slider__inner">
    <div class="m-range-slider__bar" style="width: 50%"></div>
    <span class="m-range-slider__handle" style="left: 50%;" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0">
      <span class="m-range-slider__value">50%</span>
    </span>
  </div>
</div>
20% 80%
<div class="m-range-slider">
  <div class="m-range-slider__inner">
    <div class="m-range-slider__bar" style="left: 20%; width: 60%"></div>
    <span class="m-range-slider__handle" style="left: 20%;" role="slider" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" tabindex="0">
      <span class="m-range-slider__value">20%</span>
    </span>
    <span class="m-range-slider__handle" style="left: 80%;" role="slider" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" tabindex="0">
      <span class="m-range-slider__value">80%</span>
    </span>
  </div>
</div>

Selectable list

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

Step indicator

molecules/molecules.step-indicator
  1. Step 1 (completed)
  2. Step 2 (completed)
  3. Step 3
  4. Step 4
<ol class="m-step-indicator">
  <li class="is-completed"><span class="m-step-indicator__label">Step 1<span class="u-screen-reader-only"> (completed)</span></span></li>
  <li class="is-completed"><span class="m-step-indicator__label">Step 2<span class="u-screen-reader-only"> (completed)</span></span></li>
  <li class="is-active" aria-current="step"><span class="m-step-indicator__label">Step 3</span></li>
  <li><span class="m-step-indicator__label">Step 4</span></li>
</ol>

Tag

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

Accessibility note. Note that you can't solely rely on a placeholder for creating new tags.

<div class="m-tag">
  <label for="new-tag" class="u-screen-reader-only">Insert new tag</label>
  <input id="new-tag" class="m-tag__input" type="text" placeholder="Insert new tag" />
</div>
My tag with delete button
<div class="m-tag">
  <span class="m-tag__label">My tag with delete button</span>
  <button class="a-button-transparent a-button--small a-button--danger has-icon" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
</div>
My tag with icon
My other tag with icon
<div class="m-tag">
  <button class="a-button a-button--default a-button--small has-icon" aria-label="Accept"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-check-1" /></svg></span></button>
  <span class="m-tag__label">My tag with icon</span>
 </div>
<div class="m-tag">
  <button class="a-button a-button--small a-button--success has-icon" aria-label="Accept"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-check-1" /></svg></span></button>
  <span class="m-tag__label">My other tag with icon</span>
</div>

Upload

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

my-doc.pdf and my-pic.jpg

Maximum file size: 4MB
  • my-doc.pdf
  • my-pic.jpg
  • my-unallowed-file.xml This file format is not allowed.
<div class="m-upload">
  <div class="m-upload__inner">
    <div class="m-upload__dropzone">
      <input id="upload-3" type="file" multiple="multiple" class="m-upload__input">
      <div class="m-upload__content">
        <label for="upload-3" class="m-upload__message u-margin-bottom">Drag a file here or click to browse</label>
        <p class="m-upload__uploads u-text-bold u-margin-bottom-xs">my-doc.pdf and my-pic.jpg</p>
        <div class="m-upload__progress m-progress">
          <div class="m-progress__inner">
            <div class="m-progress__bar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <small class="m-upload__description">Maximum file size: 4MB</small>
  <ul class="m-upload__files">
    <li>
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-common-file-empty" /></svg></span>
      <span class="m-upload__filename">my-doc.pdf</span>
      <button class="m-upload__delete a-button-transparent a-button--default a-button--small has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close</span></span></button>
    </li>
    <li>
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-common-file-empty" /></svg></span>
      <span class="m-upload__filename">my-pic.jpg</span>
      <button class="m-upload__delete a-button-transparent a-button--default a-button--small has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close</span></span></button>
    </li>
    <li class="is-error">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-alert-triangle" /></svg></span>
      <span class="m-upload__filename">my-unallowed-file.xml</span>
      <span class="m-upload__error">This file format is not allowed.</span>
      <button class="m-upload__delete a-button-transparent a-button--danger a-button--small has-icon"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close</span></span></button>
    </li>
  </ul>
</div>

Organisms

Article

organisms/organisms.article

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

Heading 1

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Heading 2

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

Heading 3

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

Heading 4

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Heading 5
  • Lorem ipsum dolor
  • sit:
    • amet
    • consectetur
  • adipisicing elit
Heading 6
  1. Lorem ipsum dolor
  2. sit:
    • amet
    • consectetur
  3. adipisicing elit
<div class="o-article">
  ...
</div>

Footer

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

Header

organisms/organisms.header

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

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

Navigation menu

aui/aui.navigation-menu

Navigation menu that may be used for global navigation on an application. Please note that for optimal mobile layouts, the menu should manually be positioned fixed on the page. For flexibility purposes, this styling is not included in the CSS classes.

<div class="o-menu">
  <div class="o-menu__tabs-wrapper">
    <div class="o-menu__tab">
      <div class="o-menu__tab-wrapper">
        <div class="o-menu__tab-header">
          <div class="o-menu__tab-title">
            <span class="ai o-menu__icon o-menu__tab-icon" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-menu" /></svg></span>
            <a class="o-menu__link" href="#">Link A</a>
          </div>
        </div>
      </div>
    </div>
    <div class="o-menu__tab is-active">
      <div class="o-menu__tab-wrapper">
        <div class="o-menu__tab-header">
          <div class="o-menu__tab-title">
            <span class="ai o-menu__icon o-menu__tab-icon" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-common-file-empty" /></svg></span>
            <a class="o-menu__link" href="#">Link B</a>
          </div>
          <span class="ai o-menu__icon o-menu__submenu-icon" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span>
        </div>
        <div class="o-menu__submenu is-active">
          <div class="o-menu__submenu-content-wrapper">
            <ul class="m-nav-list">
              <li><a>First Layer A</a></li>
              <li class="is-active">
                <a>First Layer B <span class="ai o-menu__icon o-menu__submenu-icon" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-down-1" /></svg></span></a>
                <div class="o-menu__submenu">
                  <div class="o-menu__submenu-content-wrapper">
                    <ul class="m-nav-list">
                      <li><a>Second Layer A</a></li>
                      <li><a>Second Layer B</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="o-menu__tab">
      <div class="o-menu__tab-wrapper">
        <div class="o-menu__tab-header">
          <div class="o-menu__tab-title">
            <span class="ai o-menu__icon o-menu__tab-icon" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-navigation-menu" /></svg></span>
            <a class="o-menu__link" href="#">Link C</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="o-menu__hide-cta">
    <a href="#">Hide menu <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-button-left-1" /></svg></span></a>
  </div>
</div>
The Navigation Menu may also be 'docked'. This is achieved by only adding the is-docked class to the o-menu element. Docked behaviour is only relevant for desktop layouts.
<div class="o-menu is-docked">
  <!-- Exactly the same markup as the first example -->
</div>

Additionally, the styling classes include utility classes for creating a panel that will overlay the whole page, designed to contain a Navigation list. The use is intended for mobile only.

Use the is-visible class on the o-menu__slide-in-submenu to create an animation where the second menu slides from the right over the first menu.

<div class="o-menu__navigation-pane is-visible">
  <div class="o-navigation-pane__overlay"></div>
  <div class="o-navigation-pane__wrapper">
    <div class="o-menu__main-submenu"></div>
    <div class="o-menu__slide-in-submenu is-visible"> </div>
  </div>
</div>

Slideshow

Regular slideshow

organisms/organisms.slideshow
<div class="o-slideshow">
  <div class="o-slideshow__inner">
    <button class="a-button has-icon o-slideshow__prev">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>
      <span class="u-screen-reader-only">Previous image</span>
    </button>
    <button class="a-button has-icon o-slideshow__next">
      <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span>
      <span class="u-screen-reader-only">Next image</span>
    </button>
    <div class="o-slideshow__slides">
      <figure class="o-slideshow__slide is-active">
        <div class="o-slideshow__image">
          <div class="m-image">
            <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Slideshow image 1.">
            <a href="#" class="m-image__copyright a-copyright" aria-expanded="false">
              <div class="a-copyright__sign">©</div>
              <span class="a-copyright__label">Unsplash</span>
            </a>
          </div>
        </div>
      </figure>
      <figure class="o-slideshow__slide">
        <div class="o-slideshow__image">
          <div class="m-image">
            <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Slideshow image 2.">
            <a href="#" class="m-image__copyright a-copyright" aria-expanded="false">
              <div class="a-copyright__sign">©</div>
              <span class="a-copyright__label">Unsplash</span>
            </a>
          </div>
        </div>
      </figure>
      <figure class="o-slideshow__slide">
        <div class="o-slideshow__image">
          <div class="m-image">
            <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Slideshow image 3.">
            <a href="#" class="m-image__copyright a-copyright" aria-expanded="false">
              <div class="a-copyright__sign">©</div>
              <span class="a-copyright__label">Unsplash</span>
            </a>
          </div>
        </div>
      </figure>
    </div>
  </div>
  <figcaption class="o-slideshow__footer">
    <span class="o-slideshow__counter">1 | 3</span>
    Some fancy caption about this photo
  </figcaption>
</div>

Slideshow overlay

<div class="m-overlay">
  <label for="input-slideshow"><a class="m-overlay__button"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span><span class="u-screen-reader-only">Close overlay</span></a></label>
  <div class="m-overlay__slideshow o-slideshow o-slideshow--transparent">
    <div class="o-slideshow__inner">
      <button class="a-button has-icon o-slideshow__prev o-slideshow__prev--outside">
        <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-left-1" /></svg></span>
        <span class="u-screen-reader-only">Previous image</span>
      </button>
      <button class="a-button has-icon o-slideshow__next o-slideshow__next--outside">
        <span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-arrow-right-1" /></svg></span>
        <span class="u-screen-reader-only">Next image</span>
      </button>
      <div class="o-slideshow__slides">
        <figure class="o-slideshow__slide is-active">
          <div class="o-slideshow__image">
            <div class="m-image">
              <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Slideshow image 1.">
              <a href="#" class="m-image__copyright a-copyright" aria-expanded="false">
                <div class="a-copyright__sign">©</div>
                <span class="a-copyright__label">Unsplash</span>
              </a>
            </div>
          </div>
        </figure>
        <figure class="o-slideshow__slide">
          <div class="o-slideshow__image">
            <div class="m-image">
              <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Slideshow image 2.">
              <a href="#" class="m-image__copyright a-copyright" aria-expanded="false">
                <div class="a-copyright__sign">©</div>
                <span class="a-copyright__label">Unsplash</span>
              </a>
            </div>
          </div>
        </figure>
        <figure class="o-slideshow__slide">
          <div class="o-slideshow__image">
            <div class="m-image">
              <img src="https://source.unsplash.com/collection/54002680/1000x500" alt="Slideshow image 3.">
              <a href="#" class="m-image__copyright a-copyright" aria-expanded="false">
                <div class="a-copyright__sign">©</div>
                <span class="a-copyright__label">Unsplash</span>
              </a>
            </div>
          </div>
        </figure>
      </div>
    </div>
    <figcaption class="o-slideshow__footer">
      <span class="o-slideshow__counter">1 | 3</span>
      Some fancy caption about this photo
    </figcaption>
  </div>
</div>

Tag list

organisms/organisms.tag-list
  • Thomas Edison
  • Leonardo da Vinci
  • Albert Einstein
<ul class="o-tag-list">
  <li class="m-tag"><span class="m-tag__label">Thomas Edison</span></li>
  <li class="m-tag"><span class="m-tag__label">Leonardo da Vinci</span></li>
  <li class="m-tag"><span class="m-tag__label">Albert Einstein</span></li>
</ul>
<ul class="o-tag-list">
  <li class="m-tag"><span class="m-tag__label">Thomas Edison</span></li>
  <li class="m-tag"><span class="m-tag__label">Leonardo da Vinci</span></li>
  <li class="m-tag"><span class="m-tag__label">Albert Einstein</span></li>
</ul>
  • Thomas Edison
  • Leonardo da Vinci
  • Albert Einstein
<ul class="o-tag-list">
  <li class="m-tag">
    <span class="m-tag__label">Thomas Edison</span>
    <button class="a-button-transparent a-button--small a-button--danger has-icon" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  </li>
  <li class="m-tag">
    <span class="m-tag__label">Leonardo da Vinci</span>
    <button class="a-button-transparent a-button--small a-button--danger has-icon" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  </li>
  <li class="m-tag">
    <span class="m-tag__label">Albert Einstein</span>
    <button class="a-button-transparent a-button--small a-button--danger has-icon" aria-label="Delete"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-remove" /></svg></span></button>
  </li>
</ul>
  • Thomas Edison
  • Leonardo da Vinci
  • Albert Einstein
<ul class="o-tag-list">
  <li class="m-tag">
    <button class="a-button a-button--default a-button--small has-icon" aria-label="Accept"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-check-1" /></svg></span></button>
    <span class="m-tag__label">Thomas Edison</span>
  </li>
  <li class="m-tag">
    <button class="a-button a-button--success a-button--small has-icon" aria-label="Accept"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-check-1" /></svg></span></button>
    <span class="m-tag__label">Leonardo da Vinci</span>
  </li>
  <li class="m-tag">
    <button class="a-button a-button a-button--small has-icon" aria-label="Drag"><span class="ai" aria-hidden="true"><svg><use href="https://cdn.antwerpen.be/core_branding_scss/5.0.1/images/ai.svg#ai-direction-button-arrows" /></svg></span></button>
    <span class="m-tag__label">Albert Einstein</span>
  </li>
</ul>