Mixin: Typography
The Icon Sprite mixin creates a sprite that can be used in your SASS files.
Where to Find
- You can find these mixins in
integration/snippets/mixins/typo.scss. - To see all of the typography style code, see here.
Common Typography Mixin
This sets the base color and family for all the specific typography mixins.
1// This is common typography mixin
2@mixin title-common {
3 font-family: $font-barlow-sans;
4 color: color('pure-black');
5}Specific Typeograpy Style Mixins
These mixins set the font size, line height, weight, spacing and mobile font. To see a demo of the typography styles, see here.
1// Use this mixin for h1 or to simulate h1
2@mixin title-1 {
3 @include title-common;
4 font-size: $h1-font-size-mobile;
5 line-height: 1.2;
6 font-weight: $font-weight-normal;
7 letter-spacing: -0.05em;
8 @include media-breakpoint-up(lg) {
9 font-size: $h1-font-size;
10 }
11}
12
13// Use this mixin for h2 or to simulate h2
14@mixin title-2 {
15 @include title-common;
16 font-size: $h2-font-size-mobile;
17 line-height: 1.2;
18 font-weight: $font-weight-medium;
19 letter-spacing: -0.03em;
20 @include media-breakpoint-up(lg) {
21 font-size: $h2-font-size;
22 }
23}
24
25// Use this mixin for h3 or to simulate h3
26@mixin title-3 {
27 @include title-common;
28 font-size: $h3-font-size-mobile;
29 line-height: 1.1;
30 font-weight: $font-weight-medium;
31 letter-spacing: -0.03em;
32 @include media-breakpoint-up(lg) {
33 font-size: $h3-font-size;
34 letter-spacing: -0.05em;
35 }
36}
37
38// Use this mixin for h4 or to simulate h4
39@mixin title-4 {
40 @include title-common;
41 font-size: $h4-font-size-mobile;
42 line-height: 1.1;
43 font-weight: $font-weight-medium;
44 letter-spacing: -0.03em;
45 @include media-breakpoint-up(lg) {
46 font-size: $h4-font-size;
47 }
48}
49
50// Use this mixin for h5 or to simulate h5
51@mixin title-5 {
52 @include title-common;
53 font-size: $h5-font-size-mobile;
54 line-height: 1.1;
55 font-weight: $font-weight-medium;
56 letter-spacing: -0.03em;
57 @include media-breakpoint-up(lg) {
58 font-size: $h5-font-size;
59 }
60}
61
62// Use this mixin for h6 or to simulate h6
63@mixin title-6 {
64 @include title-common;
65 font-size: $h6-font-size-mobile;
66 line-height: 1.2;
67 font-weight: $font-weight-normal;
68 letter-spacing: -0.02em;
69 @include media-breakpoint-up(lg) {
70 font-size: $h6-font-size;
71 }
72}
73
74// Use this mixin for h7 or to simulate h7
75@mixin title-7 {
76 @include title-common;
77 font-size: 18px;
78 line-height: 24px;
79 font-weight: $font-weight-medium;
80 letter-spacing: -0.4px;
81 @include media-breakpoint-up(lg) {
82 font-size: 20px;
83 }
84}
85
86// Use this mixin for subtitle content
87@mixin subtitle {
88 font-size: 14px;
89 line-height: 1.6;
90 letter-spacing: 0em;
91 @include media-breakpoint-up(lg) {
92 font-size: 20px;
93 }
94}
95// Use this mixin for big body content
96@mixin body-big {
97 font-size: 14px;
98 line-height: 1.6;
99 letter-spacing: 0em;
100 @include media-breakpoint-up(lg) {
101 font-size: 18px;
102 }
103}
104@mixin body {
105 font-size: 14px;
106 line-height: 1.6;
107 letter-spacing: 0em;
108 @include media-breakpoint-up(lg) {
109 font-size: 16px;
110 }
111}
112@mixin body-small {
113 font-size: 12px;
114 line-height: 1.6;
115 letter-spacing: 0em;
116 @include media-breakpoint-up(lg) {
117 font-size: 14px;
118 }
119}
120@mixin tag-1 {
121 font-weight: $font-weight-medium;
122 font-size: 12px;
123 line-height: 14.4px;
124 font-family: $font-barlow-sans;
125 color: color('in-blue');
126 text-transform: uppercase;
127 letter-spacing: 2.4px;
128}
129@mixin tag-2 {
130 font-family: $font-barlow-sans;
131 line-height: 1;
132 font-size: 14px;
133 color: color('pure-navy');
134 font-weight: $font-weight-semi-bold;
135 letter-spacing: 0.05em;
136 @include media-breakpoint-up(lg) {
137 font-size: 16px;
138 }
139}
140@mixin tag-3 {
141 font-family: $font-barlow-sans;
142 line-height: 18px;
143 font-size: 14px;
144 color: color('pure-white');
145 font-weight: $font-weight-semi-bold;
146 letter-spacing: 3.6px;
147 @include media-breakpoint-up(lg) {
148 font-size: 18px;
149 }
150}