NEWSLETTER HUB|BRANDHUB

We couldn’t find anything that matched your searched term

  • PAGES

  • COMPONENTS

  • Brand guidelines

  • Insights

Documentation

Getting Started

Implement the library

Its purpose is to deliver every components and styles you need to kickstart your web project. For more informations about design principles and guidelines go to designsystem.axa.com .

Compiled CSS and JS

Download ready-to-use compiled code for AXA Design System Library to easily drop into your project, which includes:

  • Compiled and minified CSS bundles (see CSS files comparison)
  • Compiled and minified JavaScript plugins (see JS files comparison)
  • Icons fonts and SourceSansPro fonts

The build can be particularly useful for a project started from scratch with the library. The compiled and minified CSS and JS files will help you to quickly implement your website using a predefined compliant design. For a mature project, you might prefer the use of the sources in order to have more flexibility and customize the library for your project.

This doesn’t include documentation, source files, and Publico Headline Bold font.
Go to Quick start section to know how to use it.

Download the Build

Source files

Compile AXA Design System Library with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

  • Sass compiler for compiling Sass source files into CSS files
  • Autoprefixer for CSS vendor prefixing

The sources of the library will allow you to manipulate and understand the mechanisms behind the components presented in the documentation. Based on simple SCSS and VanillaJS, this library was developed for a wide range of technology, from the simple HTML website to the development of web components or the use of frameworks like React, Vue, Angular.

For mature projects, the sources can be filtered to export only the necesary functions and variables. Compiled or used directly in a framework compatible with SCSS, the filtered library will provide you a performant and compliant basis of work.

NB : The variables used in the project are gathered in a SCSS file and can be found in the sources.

This doesn’t include Publico Headline Bold font.
Should you require our full set of build tools, they are included for developing AXA Design System Library and its docs, but they’re likely unsuitable for your own purposes.

Download source

Quick start
Stylesheet

Copy-paste the stylesheets <link> into your <head> before all other stylesheets to load our CSS.
Check & update the path to the files if required. 

<link rel="stylesheet" href="./css/axaDesignSystemLib.css">
<link rel="stylesheet" href="./css/axaDesignSystemFonts.css">
<link rel="stylesheet" href="./css/axaIconFont.css">

You may have to update src paths in @font-face within files axaDesignSystemFonts.css & axaIconFont.css
The minified versions of the stylesheets are also available in the build (axaDesignSystemLib.min.css axaDesignSystemFonts.min.css axaIconFont.min.css)

JavaScript

Many of components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.

Place one of the following <script>'s near the end of your pages, right before the closing <body> tag, to enable them.

Bundle

axaDesignSystemLib.bundle.js and axaDesignSystemLib.bundle.min.js include Popper (used for Tooltips an Popovers components) 

<script type="text/javascript" src="./js/axaDesignSystemLib.bundle.min.js"></script>
Separate
<script type="text/javascript" src="./js/popper/popper.min.js"></script>
<script type="text/javascript" src="./js/axaDesignSystemLib.min.js"></script>