AXA Design System Lib Documentation v1.0.0

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Grid options

While uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
See how aspects of grid system work across multiple devices with a handy table.

AXA specific updates : new xxl grid (as added in bootstrap 5.0), breakpoint, container max-width and gutter values also updated.

	xs <600px	sm ≥600px	md ≥768px	lg ≥1024px	xl ≥1280px	xxl ≥1440px
Max container width	None (auto)	552px	744px	984px	1176px	1368px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	24px (12px on each side of a column)
Nestable	Yes
Column ordering	Yes

New xxl breakpoint sample (use screen ≥1440px to view results in a single line)

col-xxl-8

col-xxl-4

col-xxl

<div class="row">
 <div class="col-xxl-8 border">col-xxl-8</div>
 <div class="col-xxl-4 border">col-xxl-4</div>
</div>
<div class="row">
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
</div>
<div class="row">
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
 <div class="col-xxl border">col-xxl</div>
</div>

Documentation

Foundations