0
# Typography
1

2
PrimeFlex provides comprehensive typography utilities for text styling, including alignment, decoration, transformation, font weights, sizes, and line heights. All typography utilities support responsive breakpoints.
3

4
## Text Alignment
5

6
```scss { .api }
7
.text-left { text-align: left; }
8
.text-center { text-align: center; }
9
.text-right { text-align: right; }
10
.text-justify { text-align: justify; }
11
```
12

13
## Text Decoration
14

15
```scss { .api }
16
.underline { text-decoration: underline; }
17
.line-through { text-decoration: line-through; }
18
.no-underline { text-decoration: none; }
19
```
20

21
## Text Transform
22

23
```scss { .api }
24
.lowercase { text-transform: lowercase; }
25
.uppercase { text-transform: uppercase; }
26
.capitalize { text-transform: capitalize; }
27
```
28

29
## Text Overflow
30

31
```scss { .api }
32
.text-overflow-clip { text-overflow: clip; }
33
.text-overflow-ellipsis { text-overflow: ellipsis; }
34
```
35

36
## Font Weight
37

38
```scss { .api }
39
.font-light { font-weight: 300; }
40
.font-normal { font-weight: 400; }
41
.font-medium { font-weight: 500; }
42
.font-semibold { font-weight: 600; }
43
.font-bold { font-weight: 700; }
44
```
45

46
## Font Size
47

48
```scss { .api }
49
.text-xs { font-size: 0.75rem; }       /* 12px */
50
.text-sm { font-size: 0.875rem; }      /* 14px */
51
.text-base { font-size: 1rem; }        /* 16px */
52
.text-lg { font-size: 1.125rem; }      /* 18px */
53
.text-xl { font-size: 1.25rem; }       /* 20px */
54
.text-2xl { font-size: 1.5rem; }       /* 24px */
55
.text-3xl { font-size: 1.875rem; }     /* 30px */
56
.text-4xl { font-size: 2.25rem; }      /* 36px */
57
.text-5xl { font-size: 3rem; }         /* 48px */
58
.text-6xl { font-size: 3.75rem; }      /* 60px */
59
.text-7xl { font-size: 4.5rem; }       /* 72px */
60
.text-8xl { font-size: 6rem; }         /* 96px */
61
```
62

63
## Line Height
64

65
```scss { .api }
66
.line-height-1 { line-height: 1; }
67
.line-height-2 { line-height: 1.25; }
68
.line-height-3 { line-height: 1.5; }
69
.line-height-4 { line-height: 1.75; }
70
.line-height-5 { line-height: 2; }
71
.line-height-6 { line-height: 2.25; }
72
.line-height-7 { line-height: 2.5; }
73
.line-height-8 { line-height: 2.75; }
74
```
75

76
## White Space
77

78
```scss { .api }
79
.whitespace-normal { white-space: normal; }
80
.whitespace-nowrap { white-space: nowrap; }
81
.whitespace-pre { white-space: pre; }
82
.whitespace-pre-line { white-space: pre-line; }
83
.whitespace-pre-wrap { white-space: pre-wrap; }
84
```
85

86
## Responsive Variants
87

88
All typography utilities support responsive breakpoints:
89

90
```scss { .api }
91
// Small screens (≥576px)
92
.sm\\:text-center { /* text-align: center at sm+ */ }
93
.sm\\:text-lg { /* font-size: 1.125rem at sm+ */ }
94
.sm\\:font-bold { /* font-weight: 700 at sm+ */ }
95
// ... all typography classes with sm: prefix
96

97
// Medium screens (≥768px)
98
.md\\:text-left { /* text-align: left at md+ */ }
99
.md\\:text-2xl { /* font-size: 1.5rem at md+ */ }
100
.md\\:line-height-3 { /* line-height: 1.5 at md+ */ }
101
// ... all typography classes with md: prefix
102

103
// Large screens (≥992px)
104
.lg\\:text-right { /* text-align: right at lg+ */ }
105
.lg\\:text-4xl { /* font-size: 2.25rem at lg+ */ }
106
.lg\\:font-semibold { /* font-weight: 600 at lg+ */ }
107
// ... all typography classes with lg: prefix
108

109
// Extra large screens (≥1200px)
110
.xl\\:text-center { /* text-align: center at xl+ */ }
111
.xl\\:text-6xl { /* font-size: 3.75rem at xl+ */ }
112
.xl\\:uppercase { /* text-transform: uppercase at xl+ */ }
113
// ... all typography classes with xl: prefix
114
```
115

116
## Usage Examples
117

118
### Responsive Headings
119

120
```html
121
<div class="text-center mb-6">
122
  <h1 class="m-0 mb-3 text-2xl md:text-4xl lg:text-6xl font-bold text-primary">
123
    Responsive Heading
124
  </h1>
125
  <p class="m-0 text-base md:text-lg text-color-secondary line-height-3">
126
    Subtitle that scales with screen size
127
  </p>
128
</div>
129
```
130

131
### Article Content
132

133
```html
134
<article class="max-w-4xl mx-auto p-4">
135
  <header class="mb-6">
136
    <h1 class="m-0 mb-2 text-3xl md:text-4xl font-bold text-color line-height-2">
137
      Article Title
138
    </h1>
139
    <p class="m-0 text-sm text-color-secondary uppercase font-medium">
140
      Published on March 15, 2024
141
    </p>
142
  </header>
143
  
144
  <div class="text-base text-color line-height-3">
145
    <p class="mb-4">
146
      This is the article content with proper typography styling. 
147
      The text uses a comfortable line height for reading.
148
    </p>
149
    
150
    <blockquote class="border-left-3 border-primary pl-4 py-2 my-4 bg-primary-50 text-primary-800 font-medium italic">
151
      "This is a blockquote with emphasis styling and proper spacing."
152
    </blockquote>
153
    
154
    <p class="mb-4">
155
      More content continues here with consistent spacing and typography.
156
    </p>
157
  </div>
158
</article>
159
```
160

161
### Navigation Menu
162

163
```html
164
<nav class="flex align-items-center justify-content-between p-4 bg-white shadow-1">
165
  <div class="text-xl font-bold text-primary">
166
    Brand Name
167
  </div>
168
  
169
  <ul class="flex list-none m-0 p-0 gap-4">
170
    <li>
171
      <a href="#" class="text-color no-underline font-medium hover:text-primary hover:underline">
172
        Home
173
      </a>
174
    </li>
175
    <li>
176
      <a href="#" class="text-color no-underline font-medium hover:text-primary hover:underline">
177
        About
178
      </a>
179
    </li>
180
    <li>
181
      <a href="#" class="text-color no-underline font-medium hover:text-primary hover:underline">
182
        Contact
183
      </a>
184
    </li>
185
  </ul>
186
</nav>
187
```
188

189
### Card Typography
190

191
```html
192
<div class="p-4 surface-card border-round shadow-2">
193
  <div class="flex align-items-center gap-3 mb-3">
194
    <div class="w-3rem h-3rem bg-primary border-circle flex align-items-center justify-content-center">
195
      <span class="text-white font-bold text-lg">JD</span>
196
    </div>
197
    <div>
198
      <h3 class="m-0 text-lg font-semibold text-color">John Doe</h3>
199
      <span class="text-sm text-color-secondary">Software Engineer</span>
200
    </div>
201
  </div>
202
  
203
  <p class="m-0 text-base text-color line-height-3">
204
    "This is a testimonial with proper typography hierarchy and spacing."
205
  </p>
206
  
207
  <div class="flex align-items-center justify-content-between mt-4">
208
    <span class="text-xs text-color-secondary uppercase font-medium">
209
      2 hours ago
210
    </span>
211
    <div class="text-yellow-500">
212
      ★★★★★
213
    </div>
214
  </div>
215
</div>
216
```
217

218
### Form Labels and Text
219

220
```html
221
<form class="p-4 surface-section border-round">
222
  <div class="mb-4">
223
    <label class="block mb-2 text-sm font-semibold text-color">
224
      Full Name *
225
    </label>
226
    <input type="text" class="w-full p-3 border-1 border-surface-300 border-round text-base">
227
    <small class="text-xs text-red-500 mt-1 block">
228
      This field is required
229
    </small>
230
  </div>
231
  
232
  <div class="mb-4">
233
    <label class="block mb-2 text-sm font-semibold text-color">
234
      Description
235
    </label>
236
    <textarea rows="4" class="w-full p-3 border-1 border-surface-300 border-round text-base" 
237
              placeholder="Enter description..."></textarea>
238
    <small class="text-xs text-color-secondary mt-1 block">
239
      Maximum 500 characters
240
    </small>
241
  </div>
242
  
243
  <button type="submit" class="px-4 py-2 bg-primary text-white border-none border-round font-medium">
244
    Submit Form
245
  </button>
246
</form>
247
```
248

249
### Text Truncation
250

251
```html
252
<div class="p-4 surface-card border-round shadow-1">
253
  <h3 class="m-0 mb-2 text-lg font-semibold text-color">
254
    Card with Long Title
255
  </h3>
256
  
257
  <!-- Single line truncation -->
258
  <p class="m-0 mb-3 text-sm text-color-secondary whitespace-nowrap overflow-hidden text-overflow-ellipsis">
259
    This is a very long description that will be truncated with ellipsis when it exceeds the container width
260
  </p>
261
  
262
  <!-- Multi-line text with line height -->
263
  <p class="m-0 text-base text-color line-height-3">
264
    This is regular paragraph text that wraps normally and maintains proper line spacing for readability.
265
  </p>
266
</div>
267
```
268

269
### Status Messages
270

271
```html
272
<div class="flex flex-column gap-3">
273
  <!-- Success message -->
274
  <div class="p-3 bg-green-50 border-left-3 border-green-500 text-green-800">
275
    <span class="font-semibold text-sm uppercase">Success</span>
276
    <p class="m-0 mt-1 text-sm line-height-3">
277
      Your changes have been saved successfully.
278
    </p>
279
  </div>
280
  
281
  <!-- Warning message -->
282
  <div class="p-3 bg-yellow-50 border-left-3 border-yellow-500 text-yellow-800">
283
    <span class="font-semibold text-sm uppercase">Warning</span>
284
    <p class="m-0 mt-1 text-sm line-height-3">
285
      Please review your input before proceeding.
286
    </p>
287
  </div>
288
  
289
  <!-- Error message -->
290
  <div class="p-3 bg-red-50 border-left-3 border-red-500 text-red-800">
291
    <span class="font-semibold text-sm uppercase">Error</span>
292
    <p class="m-0 mt-1 text-sm line-height-3">
293
      An error occurred while processing your request.
294
    </p>
295
  </div>
296
</div>
297
```
298

299
### Code and Monospace Text
300

301
```html
302
<div class="p-4 surface-card border-round shadow-1">
303
  <h3 class="m-0 mb-3 text-lg font-bold text-color">
304
    Installation Guide
305
  </h3>
306
  
307
  <p class="m-0 mb-3 text-base text-color line-height-3">
308
    Install PrimeFlex using npm:
309
  </p>
310
  
311
  <code class="block p-3 bg-surface-100 border-round text-sm font-mono text-color">
312
    npm install primeflex
313
  </code>
314
  
315
  <p class="m-0 mt-3 text-sm text-color-secondary">
316
    Then import it in your project's main CSS file.
317
  </p>
318
</div>
319
```
320

321
### Pricing Table Typography
322

323
```html
324
<div class="grid">
325
  <div class="col-12 md:col-4">
326
    <div class="p-6 surface-card border-round shadow-2 text-center">
327
      <h3 class="m-0 mb-2 text-xl font-bold text-color">Basic</h3>
328
      <p class="m-0 mb-4 text-sm text-color-secondary uppercase">For individuals</p>
329
      
330
      <div class="mb-4">
331
        <span class="text-4xl font-bold text-primary">$9</span>
332
        <span class="text-sm text-color-secondary">/month</span>
333
      </div>
334
      
335
      <ul class="list-none m-0 p-0 text-left mb-6">
336
        <li class="mb-2 text-sm text-color">✓ 5 projects</li>
337
        <li class="mb-2 text-sm text-color">✓ 10GB storage</li>
338
        <li class="mb-2 text-sm text-color">✓ Email support</li>
339
      </ul>
340
      
341
      <button class="w-full p-3 bg-primary text-white border-none border-round font-semibold">
342
        Get Started
343
      </button>
344
    </div>
345
  </div>
346
</div>
347
```