This page outlines useful tools available for developers.
The utility classes can be applied to any element on the site to set a specific CSS value. The goal of this is to reduce the amount of custom classes needed for basic styling.
The Design System includes both the default Bootstrap utility classes, as well as some additional custom classes outlined below.
Background Color
Sets the background color.
| CSS Attribute |
Color Description |
Base: 0px+
|
Sample
|
| background-color |
primary brand color |
.bg-primary |
|
| background-color |
primary brand color at 97.75% opacity |
.bg-primary-light |
|
| background-color |
primary brand color at 50% opacity |
.bg-primary-50 |
|
| background-color |
secondary brand color |
.bg-secondary |
|
| background-color |
success |
.bg-success |
|
| background-color |
info |
.bg-info |
|
| background-color |
warning |
.bg-warning |
|
| background-color |
danger |
.bg-danger |
|
| background-color |
light |
.bg-light |
|
| background-color |
dark |
.bg-dark |
|
| background-color |
black |
.bg-black-1 |
|
| background-color |
gray 1 |
.bg-gray-1 |
|
| background-color |
gray 2 |
.bg-gray-2 |
|
| background-color |
gray 3 |
.bg-gray-3 |
|
| background-color |
gray 4 |
.bg-gray-4 |
|
| background-color |
link 1 |
.bg-link-1 |
|
| background-color |
link 2 |
.bg-link-2 |
|
| background-color |
sale |
.bg-sale |
|
| background-color |
success |
.bg-success-text |
|
| background-color |
white |
.bg-white |
|
| background-color |
transparent |
.bg-transparent |
|
Text Color
Sets the background color.
| CSS Attribute |
Color Description |
Base: 0px+
|
Sample
|
| color |
primary brand color |
.text-primary |
Sample |
| color |
primary brand color at 25% opacity |
.text-primary-light |
Sample |
| color |
secondary brand color |
.text-secondary |
Sample |
| color |
success |
.text-success |
Sample |
| color |
info |
.text-info |
Sample |
| color |
warning |
.text-warning |
Sample |
| color |
danger |
.text-danger |
Sample |
| color |
light |
.text-light |
Sample |
| color |
dark |
.text-dark |
Sample |
| color |
black |
.text-black-1 |
Sample |
| color |
gray 1 |
.text-gray-1 |
Sample |
| color |
gray 2 |
.text-gray-2 |
Sample |
| color |
gray 3 |
.text-gray-3 |
Sample |
| color |
gray 4 |
.text-gray-4 |
Sample |
| color |
link 1 |
.text-link-1 |
Sample |
| color |
link 2 |
.text-link-2 |
Sample |
| color |
sale |
.text-sale |
Sample |
| color |
success |
.text-success-text |
Sample |
| color |
white |
.text-white |
Sample |
Text Decoration
| CSS Attribute |
Value |
Base: 0px+
|
Sample
|
| text-decoration |
line-through |
.text-decoration-line-through |
Sample line- or strikethrough |
| text-decoration |
underline |
.text-decoration-underline |
Sample Underline |
| text-decoration |
none |
.text-decoration-none |
Sample None |
Link Style by Container
Utility class to be applied on a parent container, sets the style for all child links.
| CSS Attribute |
Value |
Description |
Base: 0px+
|
Sample
|
| color |
black |
Add class to parent element to make child link elements black (e.g. footer links) |
.link-area-black |
Black Link
|
| text-decoration |
none /
underline (on hover) |
For brands that show underlined links by default, add class to parent element to make child elements show underlined link only on hover |
.link-area-underline-on-hover |
Black Link
|
Position
Specifies the position type and coordinates.
| CSS Attribute |
Value |
Base: 0px+
|
SM: 576px+
|
MD: 761px+
|
LG: 1024px+
|
XL: 1476px+
|
| position |
absolute |
.position-absolute |
.position-sm-absolute |
.position-md-absolute |
.position-lg-absolute |
.position-xl-absolute |
| top |
0 |
.top-0 |
.top-sm-0 |
.top-md-0 |
.top-lg-0 |
.top-xl-0 |
| top |
auto |
.top-auto |
.top-sm-auto |
.top-md-auto |
.top-lg-auto |
.top-xl-auto |
| right |
0 |
.right-0 |
.right-sm-0 |
.right-md-0 |
.right-lg-0 |
.right-xl-0 |
| right |
auto |
.right-auto |
.right-sm-auto |
.right-md-auto |
.right-lg-auto |
.right-xl-auto |
| bottom |
0 |
.bottom-0 |
.bottom-sm-0 |
.bottom-md-0 |
.bottom-lg-0 |
.bottom-xl-0 |
| bottom |
auto |
.bottom-auto |
.bottom-sm-auto |
.bottom-md-auto |
.bottom-lg-auto |
.bottom-xl-auto |
| left |
0 |
.left-0 |
.left-sm-0 |
.left-md-0 |
.left-lg-0 |
.left-xl-0 |
| left |
auto |
.left-auto |
.left-sm-auto |
.left-md-auto |
.left-lg-auto |
.left-xl-auto |
Border Width
Sets the border width.
| CSS Attribute |
Value |
Base: 0px+
|
SM: 576px+
|
MD: 761px+
|
LG: 1024px+
|
XL: 1476px+
|
| border-width |
1px |
.border-width-1 |
- |
- |
- |
- |
| border-width |
2px |
.border-width-2 |
- |
- |
- |
- |
| border-width |
3px |
.border-width-3 |
- |
- |
- |
- |
Width
Sets a width in percentage.
| CSS Attribute |
Value |
Base: 0px+
|
SM: 576px+
|
MD: 761px+
|
LG: 1024px+
|
XL: 1476px+
|
| width |
25% |
.w-25 |
.w-sm-25 |
.w-md-25 |
.w-lg-25 |
.w-xl-25 |
| width |
50% |
.w-50 |
.w-sm-50 |
.w-md-50 |
.w-lg-50 |
.w-xl-50 |
| width |
75% |
.w-75 |
.w-sm-75 |
.w-md-75 |
.w-lg-75 |
.w-xl-75 |
| width |
100% |
.w-100 |
.w-sm-100 |
.w-md-100 |
.w-lg-100 |
.w-xl-100 |
| width |
auto |
.w-auto |
.w-sm-auto |
.w-md-auto |
.w-lg-auto |
.w-xl-auto |
Brand Fonts
Each brand is allocated 6 custom fonts detailed in the typography section.
Utility classes are available for each custom font that set the correct:
-
font-family
-
font-weight
-
font-style
|
CSS Attribute
|
Description |
Base: 0px+
|
Sample |
| font-family |
Brand Font Base
Universal "Neue Helvetica W05" font
|
.brand-font-0 |
Sample |
| font-family |
Brand Font 1: "Lexend" |
.brand-font-1 |
Sample |
| font-family |
Brand Font 2: "Lexend" |
.brand-font-2 |
Sample |
| font-family |
Brand Font 3: "Lexend" |
.brand-font-3 |
Sample |
| font-family |
Brand Font 4: "Lexend" |
.brand-font-4 |
Sample |
| font-family |
Brand Font 5: "Inter Tight" |
.brand-font-5 |
Sample |
| font-family |
Brand Font 6: "Inter Tight" |
.brand-font-6 |
Sample |
| font-family |
Primary Brand Font: "Lexend"
Common class defines one of the defined brand-specific fonts as the primary brand font. |
.brand-font-primary |
Sample |
| font-family |
Primary Brand Font (Bold): "Lexend"
Common class defines one of the defined brand-specific fonts as the primary bold brand font.
|
.brand-font-primary-bold |
Sample |
Font Size
Sets the font-size.
| CSS Attribute |
Value |
Pixel Equilivent |
Base: 0px+
|
SM: 576px+
|
MD: 761px+
|
LG: 1024px+
|
XL: 1476px+
|
| font-size |
.625rem |
10px |
.font-size-xs |
- |
- |
- |
- |
| font-size |
.75rem |
12px |
.font-size-0p75 |
.font-size-sm-0p75 |
.font-size-md-0p75 |
.font-size-lg-0p75 |
.font-size-xl-0p75 |
| font-size |
.75rem |
12px |
.font-size-sm |
- |
- |
- |
- |
| font-size |
.8rem |
12.8px |
.font-size-0p8 |
.font-size-sm-0p8 |
.font-size-md-0p8 |
.font-size-lg-0p8 |
.font-size-xl-0p8 |
| font-size |
.875rem |
14px |
.font-size-md |
- |
- |
- |
- |
| font-size |
.9rem |
14.4px |
.font-size-0p9 |
.font-size-sm-0p9 |
.font-size-md-0p9 |
.font-size-lg-0p9 |
.font-size-xl-0p9 |
| font-size |
1rem |
16px |
.font-size-1 |
.font-size-sm-1 |
.font-size-md-1 |
.font-size-lg-1 |
.font-size-xl-1 |
| font-size |
1rem |
16px |
.font-size-base |
- |
- |
- |
- |
| font-size |
1.1rem |
17.6px |
.font-size-1p1 |
.font-size-sm-1p1 |
.font-size-md-1p1 |
.font-size-lg-1p1 |
.font-size-xl-1p1 |
| font-size |
1.125rem |
18px |
.font-size-lg |
- |
- |
- |
- |
| font-size |
1.2rem |
19.2px |
.font-size-1p2 |
.font-size-sm-1p2 |
.font-size-md-1p2 |
.font-size-lg-1p2 |
.font-size-xl-1p2 |
| font-size |
1.3rem |
20.8px |
.font-size-1p3 |
.font-size-sm-1p3 |
.font-size-md-1p3 |
.font-size-lg-1p3 |
.font-size-xl-1p3 |
| font-size |
1.4rem |
22.4px |
.font-size-1p4 |
.font-size-sm-1p4 |
.font-size-md-1p4 |
.font-size-lg-1p4 |
.font-size-xl-1p4 |
| font-size |
1.5rem |
24px |
.font-size-1p5 |
.font-size-sm-1p5 |
.font-size-md-1p5 |
.font-size-lg-1p5 |
.font-size-xl-1p5 |
| font-size |
1.6rem |
25.6px |
.font-size-1p6 |
.font-size-sm-1p6 |
.font-size-md-1p6 |
.font-size-lg-1p6 |
.font-size-xl-1p6 |
| font-size |
1.7rem |
27.2px |
.font-size-1p7 |
.font-size-sm-1p7 |
.font-size-md-1p7 |
.font-size-lg-1p7 |
.font-size-xl-1p7 |
| font-size |
1.8rem |
28.8px |
.font-size-1p8 |
.font-size-sm-1p8 |
.font-size-md-1p8 |
.font-size-lg-1p8 |
.font-size-xl-1p8 |
| font-size |
1.9rem |
30.4px |
.font-size-1p9 |
.font-size-sm-1p9 |
.font-size-md-1p9 |
.font-size-lg-1p9 |
.font-size-xl-1p9 |
| font-size |
2rem |
32px |
.font-size-2 |
.font-size-sm-2 |
.font-size-md-2 |
.font-size-lg-2 |
.font-size-xl-2 |
| font-size |
2.1rem |
33.6px |
.font-size-2p1 |
.font-size-sm-2p1 |
.font-size-md-2p1 |
.font-size-lg-2p1 |
.font-size-xl-2p1 |
| font-size |
2.2rem |
35.2px |
.font-size-2p2 |
.font-size-sm-2p2 |
.font-size-md-2p2 |
.font-size-lg-2p2 |
.font-size-xl-2p2 |
| font-size |
2.3rem |
36.8px |
.font-size-2p3 |
.font-size-sm-2p3 |
.font-size-md-2p3 |
.font-size-lg-2p3 |
.font-size-xl-2p3 |
| font-size |
2.4rem |
38.4px |
.font-size-2p4 |
.font-size-sm-2p4 |
.font-size-md-2p4 |
.font-size-lg-2p4 |
.font-size-xl-2p4 |
| font-size |
2.5rem |
40px |
.font-size-2p5 |
.font-size-sm-2p5 |
.font-size-md-2p5 |
.font-size-lg-2p5 |
.font-size-xl-2p5 |
| font-size |
2.6rem |
41.6px |
.font-size-2p6 |
.font-size-sm-2p6 |
.font-size-md-2p6 |
.font-size-lg-2p6 |
.font-size-xl-2p6 |
| font-size |
2.7rem |
43.2px |
.font-size-2p7 |
.font-size-sm-2p7 |
.font-size-md-2p7 |
.font-size-lg-2p7 |
.font-size-xl-2p7 |
| font-size |
2.8rem |
44.8px |
.font-size-2p8 |
.font-size-sm-2p8 |
.font-size-md-2p8 |
.font-size-lg-2p8 |
.font-size-xl-2p8 |
| font-size |
2.9rem |
46.4px |
.font-size-2p9 |
.font-size-sm-2p9 |
.font-size-md-2p9 |
.font-size-lg-2p9 |
.font-size-xl-2p9 |
| font-size |
3rem |
48px |
.font-size-3 |
.font-size-sm-3 |
.font-size-md-3 |
.font-size-lg-3 |
.font-size-xl-3 |
| font-size |
3.1rem |
49.6px |
.font-size-3p1 |
.font-size-sm-3p1 |
.font-size-md-3p1 |
.font-size-lg-3p1 |
.font-size-xl-3p1 |
| font-size |
3.2rem |
51.2px |
.font-size-3p2 |
.font-size-sm-3p2 |
.font-size-md-3p2 |
.font-size-lg-3p2 |
.font-size-xl-3p2 |
| font-size |
3.3rem |
52.8px |
.font-size-3p3 |
.font-size-sm-3p3 |
.font-size-md-3p3 |
.font-size-lg-3p3 |
.font-size-xl-3p3 |
| font-size |
3.4rem |
54.4px |
.font-size-3p4 |
.font-size-sm-3p4 |
.font-size-md-3p4 |
.font-size-lg-3p4 |
.font-size-xl-3p4 |
| font-size |
3.5rem |
56px |
.font-size-3p5 |
.font-size-sm-3p5 |
.font-size-md-3p5 |
.font-size-lg-3p5 |
.font-size-xl-3p5 |
| font-size |
3.6rem |
57.6px |
.font-size-3p6 |
.font-size-sm-3p6 |
.font-size-md-3p6 |
.font-size-lg-3p6 |
.font-size-xl-3p6 |
| font-size |
3.7rem |
59.2px |
.font-size-3p7 |
.font-size-sm-3p7 |
.font-size-md-3p7 |
.font-size-lg-3p7 |
.font-size-xl-3p7 |
| font-size |
3.8rem |
60.8px |
.font-size-3p8 |
.font-size-sm-3p8 |
.font-size-md-3p8 |
.font-size-lg-3p8 |
.font-size-xl-3p8 |
| font-size |
3.9rem |
62.4px |
.font-size-3p9 |
.font-size-sm-3p9 |
.font-size-md-3p9 |
.font-size-lg-3p9 |
.font-size-xl-3p9 |
| font-size |
4rem |
64px |
.font-size-4 |
.font-size-sm-4 |
.font-size-md-4 |
.font-size-lg-4 |
.font-size-xl-4 |
| font-size |
4.1rem |
65.6px |
.font-size-4p1 |
.font-size-sm-4p1 |
.font-size-md-4p1 |
.font-size-lg-4p1 |
.font-size-xl-4p1 |
| font-size |
4.2rem |
67.2px |
.font-size-4p2 |
.font-size-sm-4p2 |
.font-size-md-4p2 |
.font-size-lg-4p2 |
.font-size-xl-4p2 |
| font-size |
4.3rem |
68.8px |
.font-size-4p3 |
.font-size-sm-4p3 |
.font-size-md-4p3 |
.font-size-lg-4p3 |
.font-size-xl-4p3 |
| font-size |
4.4rem |
70.4px |
.font-size-4p4 |
.font-size-sm-4p4 |
.font-size-md-4p4 |
.font-size-lg-4p4 |
.font-size-xl-4p4 |
| font-size |
4.5rem |
72px |
.font-size-4p5 |
.font-size-sm-4p5 |
.font-size-md-4p5 |
.font-size-lg-4p5 |
.font-size-xl-4p5 |
| font-size |
4.6rem |
73.6px |
.font-size-4p6 |
.font-size-sm-4p6 |
.font-size-md-4p6 |
.font-size-lg-4p6 |
.font-size-xl-4p6 |
| font-size |
4.7rem |
75.2px |
.font-size-4p7 |
.font-size-sm-4p7 |
.font-size-md-4p7 |
.font-size-lg-4p7 |
.font-size-xl-4p7 |
| font-size |
4.8rem |
76.8px |
.font-size-4p8 |
.font-size-sm-4p8 |
.font-size-md-4p8 |
.font-size-lg-4p8 |
.font-size-xl-4p8 |
| font-size |
4.9rem |
78.4px |
.font-size-4p9 |
.font-size-sm-4p9 |
.font-size-md-4p9 |
.font-size-lg-4p9 |
.font-size-xl-4p9 |
| font-size |
5rem |
80px |
.font-size-5 |
.font-size-sm-5 |
.font-size-md-5 |
.font-size-lg-5 |
.font-size-xl-5 |
| font-size |
5.1rem |
81.6px |
.font-size-5p1 |
.font-size-sm-5p1 |
.font-size-md-5p1 |
.font-size-lg-5p1 |
.font-size-xl-5p1 |
| font-size |
5.2rem |
83.2px |
.font-size-5p2 |
.font-size-sm-5p2 |
.font-size-md-5p2 |
.font-size-lg-5p2 |
.font-size-xl-5p2 |
| font-size |
5.3rem |
84.8px |
.font-size-5p3 |
.font-size-sm-5p3 |
.font-size-md-5p3 |
.font-size-lg-5p3 |
.font-size-xl-5p3 |
| font-size |
5.4rem |
86.4px |
.font-size-5p4 |
.font-size-sm-5p4 |
.font-size-md-5p4 |
.font-size-lg-5p4 |
.font-size-xl-5p4 |
| font-size |
5.5rem |
88px |
.font-size-5p5 |
.font-size-sm-5p5 |
.font-size-md-5p5 |
.font-size-lg-5p5 |
.font-size-xl-5p5 |
| font-size |
5.6rem |
89.6px |
.font-size-5p6 |
.font-size-sm-5p6 |
.font-size-md-5p6 |
.font-size-lg-5p6 |
.font-size-xl-5p6 |
| font-size |
5.7rem |
91.2px |
.font-size-5p7 |
.font-size-sm-5p7 |
.font-size-md-5p7 |
.font-size-lg-5p7 |
.font-size-xl-5p7 |
| font-size |
5.8rem |
92.8px |
.font-size-5p8 |
.font-size-sm-5p8 |
.font-size-md-5p8 |
.font-size-lg-5p8 |
.font-size-xl-5p8 |
| font-size |
5.9rem |
94.4px |
.font-size-5p9 |
.font-size-sm-5p9 |
.font-size-md-5p9 |
.font-size-lg-5p9 |
.font-size-xl-5p9 |
| font-size |
6rem |
96px |
.font-size-6 |
.font-size-sm-6 |
.font-size-md-6 |
.font-size-lg-6 |
.font-size-xl-6 |
| font-size |
7rem |
112px |
.font-size-7 |
.font-size-sm-7 |
.font-size-md-7 |
.font-size-lg-7 |
.font-size-xl-7 |
| font-size |
8rem |
128px |
.font-size-8 |
.font-size-sm-8 |
.font-size-md-8 |
.font-size-lg-8 |
.font-size-xl-8 |
| font-size |
9rem |
144px |
.font-size-9 |
.font-size-sm-9 |
.font-size-md-9 |
.font-size-lg-9 |
.font-size-xl-9 |
| font-size |
10rem |
160px |
.font-size-10 |
.font-size-sm-10 |
.font-size-md-10 |
.font-size-lg-10 |
.font-size-xl-10 |
| font-size |
11rem |
176px |
.font-size-11 |
.font-size-sm-11 |
.font-size-md-11 |
.font-size-lg-11 |
.font-size-xl-11 |
| font-size |
12rem |
192px |
.font-size-12 |
.font-size-sm-12 |
.font-size-md-12 |
.font-size-lg-12 |
.font-size-xl-12 |
| font-size |
13rem |
208px |
.font-size-13 |
.font-size-sm-13 |
.font-size-md-13 |
.font-size-lg-13 |
.font-size-xl-13 |
| font-size |
14rem |
224px |
.font-size-14 |
.font-size-sm-14 |
.font-size-md-14 |
.font-size-lg-14 |
.font-size-xl-14 |
| font-size |
15rem |
240px |
.font-size-15 |
.font-size-sm-15 |
.font-size-md-15 |
.font-size-lg-15 |
.font-size-xl-15 |
| font-size |
16rem |
256px |
.font-size-16 |
.font-size-sm-16 |
.font-size-md-16 |
.font-size-lg-16 |
.font-size-xl-16 |
| font-size |
17rem |
272px |
.font-size-17 |
.font-size-sm-17 |
.font-size-md-17 |
.font-size-lg-17 |
.font-size-xl-17 |
| font-size |
18rem |
288px |
.font-size-18 |
.font-size-sm-18 |
.font-size-md-18 |
.font-size-lg-18 |
.font-size-xl-18 |
| font-size |
19rem |
304px |
.font-size-19 |
.font-size-sm-19 |
.font-size-md-19 |
.font-size-lg-19 |
.font-size-xl-19 |
| font-size |
20rem |
320px |
.font-size-20 |
.font-size-sm-20 |
.font-size-md-20 |
.font-size-lg-20 |
.font-size-xl-20 |
Line Height
Sets the line-height.
| CSS Attribute |
Value |
Base: 0px+
|
SM: 576px+
|
MD: 761px+
|
LG: 1024px+
|
XL: 1476px+
|
| line-height |
1.5 |
.line-height-base |
- |
- |
- |
- |
| line-height |
0.75 |
.line-height-0p75 |
.line-height-sm-0p75 |
.line-height-md-0p75 |
.line-height-lg-0p75 |
.line-height-xl-0p75 |
| line-height |
0.8 |
.line-height-0p8 |
.line-height-sm-0p8 |
.line-height-md-0p8 |
.line-height-lg-0p8 |
.line-height-xl-0p8 |
| line-height |
0.9 |
.line-height-0p9 |
.line-height-sm-0p9 |
.line-height-md-0p9 |
.line-height-lg-0p9 |
.line-height-xl-0p9 |
| line-height |
1 |
.line-height-1 |
.line-height-sm-1 |
.line-height-md-1 |
.line-height-lg-1 |
.line-height-xl-1 |
| line-height |
1.1 |
.line-height-1p1 |
.line-height-sm-1p1 |
.line-height-md-1p1 |
.line-height-lg-1p1 |
.line-height-xl-1p1 |
| line-height |
1.2 |
.line-height-1p2 |
.line-height-sm-1p2 |
.line-height-md-1p2 |
.line-height-lg-1p2 |
.line-height-xl-1p2 |
| line-height |
1.3 |
.line-height-1p3 |
.line-height-sm-1p3 |
.line-height-md-1p3 |
.line-height-lg-1p3 |
.line-height-xl-1p3 |
| line-height |
1.4 |
.line-height-1p4 |
.line-height-sm-1p4 |
.line-height-md-1p4 |
.line-height-lg-1p4 |
.line-height-xl-1p4 |
| line-height |
1.5 |
.line-height-1p5 |
.line-height-sm-1p5 |
.line-height-md-1p5 |
.line-height-lg-1p5 |
.line-height-xl-1p5 |
| line-height |
1.6 |
.line-height-1p6 |
.line-height-sm-1p6 |
.line-height-md-1p6 |
.line-height-lg-1p6 |
.line-height-xl-1p6 |
| line-height |
1.7 |
.line-height-1p7 |
.line-height-sm-1p7 |
.line-height-md-1p7 |
.line-height-lg-1p7 |
.line-height-xl-1p7 |
| line-height |
1.1 |
.line-height-1p8 |
.line-height-sm-1p8 |
.line-height-md-1p8 |
.line-height-lg-1p8 |
.line-height-xl-1p8 |
| line-height |
1.9 |
.line-height-1p9 |
.line-height-sm-1p9 |
.line-height-md-1p9 |
.line-height-lg-1p9 |
.line-height-xl-1p9 |
| line-height |
2 |
.line-height-2 |
.line-height-sm-2 |
.line-height-md-2 |
.line-height-lg-2 |
.line-height-xl-2 |
Opacity
Control the opacity of elements.
| CSS Attribute |
Value |
Base: 0px+
|
Sample
|
| opacity |
0 |
.opacity-0 |
Sample |
| opacity |
.25 |
.opacity-25 |
Sample |
| opacity |
.5 |
.opacity-50 |
Sample |
| opacity |
.75 |
.opacity-75 |
Sample |
| opacity |
1 |
.opacity-100 |
Sample |
Pointer Events
Enable or disable pointer events. Useful for absoutely positioned items that shouldn't be clickable.
| CSS Attribute |
Value |
Base: 0px+
|
SM: 576px+
|
MD: 761px+
|
LG: 1024px+
|
XL: 1476px+
|
| pointer-events |
none |
.pe-none |
- |
- |
- |
- |
| pointer-events |
auto |
.pe-auto |
- |
- |
- |
- |
Spacers (Margin and Padding)
Design Systems has customized and expanded our spacers which differs from default spacing values in Bootstrap 4.5.
The selected margin class uses my-* which adds margin to the element's Y-axis (margin-top and margin-bottom). The selected padding class below uses px-*, which adds padding to the element's X-axis (padding-left and padding-right). For full documentation on how to use spacer classes, including viewport-specific classes, click here.
The base element is in yellow with the horizontal arrows symbol ( ↹ ). The arrows indicate the direction from which the padding will be applied. The base element is wrapped by an immediate parent with a green border. Along the Y-axis, the space between the yellow base element and the green border line indicates the margin-top and margin-bottom that has been applied.
|
Selected Spacing Classes
|
Value |
Pixel Equilivent |
Example
|
.my-0 and .px-0 |
0 |
0px |
↹
|
.my-1 and .px-1 |
.25rem |
4px |
↹
|
.my-2 and .px-2 |
.5rem |
8px |
↹
|
.my-3 and .px-3 |
.75rem |
12px |
↹
|
.my-4 and .px-4 |
1rem |
16px |
↹
|
.my-5 and .px-5 |
1.5rem |
24px |
↹
|
.my-6 and .px-6 |
2rem |
32px |
↹
|
.my-7 and .px-7 |
3rem |
48px |
↹
|
Marketing Modules are reusable components built on top of the Design System. They are primarily used for marketing content and recommendations.
The CSS/JS for these modules runs out of Adobe Target globally to the entire website with the intent that these modules can be implemented on any page.
The HTML can then be implemented either in an Adobe Target test, or within a content asset.
Each module shown via the link below includes the relevant HTML necessary for implementation.