@adminkit/core 3.4.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +216 -148
  3. package/dist/charts-chartjs.html +666 -0
  4. package/dist/css/app.css +5 -5
  5. package/dist/css/app.d.css.ts +3 -0
  6. package/dist/fonts/inter-cyrillic-300-normal-BnqRxXuy.woff2 +0 -0
  7. package/dist/fonts/inter-cyrillic-400-normal-obahsSVq.woff2 +0 -0
  8. package/dist/fonts/inter-cyrillic-600-normal-CWCymEST.woff2 +0 -0
  9. package/dist/fonts/inter-cyrillic-ext-300-normal-CgCALhwJ.woff2 +0 -0
  10. package/dist/fonts/inter-cyrillic-ext-400-normal-BQZuk6qB.woff2 +0 -0
  11. package/dist/fonts/inter-cyrillic-ext-600-normal-Dfes3d0z.woff2 +0 -0
  12. package/dist/fonts/inter-greek-300-normal-DmGD3g_f.woff2 +0 -0
  13. package/dist/fonts/inter-greek-400-normal-B4URO6DV.woff2 +0 -0
  14. package/dist/fonts/inter-greek-600-normal-plRanbMR.woff2 +0 -0
  15. package/dist/fonts/inter-greek-ext-300-normal-l2DDyC6M.woff2 +0 -0
  16. package/dist/fonts/inter-greek-ext-400-normal-DGGRlc-M.woff2 +0 -0
  17. package/dist/fonts/inter-greek-ext-600-normal-DRtmH8MT.woff2 +0 -0
  18. package/dist/fonts/inter-latin-300-normal-BVlfKGgI.woff2 +0 -0
  19. package/dist/fonts/inter-latin-400-normal-C38fXH4l.woff2 +0 -0
  20. package/dist/fonts/inter-latin-600-normal-LgqL8muc.woff2 +0 -0
  21. package/dist/fonts/inter-latin-ext-300-normal-CPgO9Ksf.woff2 +0 -0
  22. package/dist/fonts/inter-latin-ext-400-normal-C1nco2VV.woff2 +0 -0
  23. package/dist/fonts/inter-latin-ext-600-normal-D2bJ5OIk.woff2 +0 -0
  24. package/dist/fonts/inter-vietnamese-300-normal-Bdr24Bqb.woff2 +0 -0
  25. package/dist/fonts/inter-vietnamese-400-normal-DMkecbls.woff2 +0 -0
  26. package/dist/fonts/inter-vietnamese-600-normal-Cc8MFFhd.woff2 +0 -0
  27. package/dist/icons-lucide.html +7249 -0
  28. package/dist/img/screenshots/pro/ai-chat-dark-800.webp +0 -0
  29. package/dist/img/screenshots/pro/ai-chat-dark.webp +0 -0
  30. package/dist/img/screenshots/pro/ai-chat-light-800.webp +0 -0
  31. package/dist/img/screenshots/pro/ai-chat-light.webp +0 -0
  32. package/dist/img/screenshots/pro/ai-usage-dark-800.webp +0 -0
  33. package/dist/img/screenshots/pro/ai-usage-dark.webp +0 -0
  34. package/dist/img/screenshots/pro/ai-usage-light-800.webp +0 -0
  35. package/dist/img/screenshots/pro/ai-usage-light.webp +0 -0
  36. package/dist/img/screenshots/pro/analytics-dark-800.webp +0 -0
  37. package/dist/img/screenshots/pro/analytics-dark.webp +0 -0
  38. package/dist/img/screenshots/pro/analytics-light-800.webp +0 -0
  39. package/dist/img/screenshots/pro/analytics-light.webp +0 -0
  40. package/dist/img/screenshots/pro/calendar-dark-800.webp +0 -0
  41. package/dist/img/screenshots/pro/calendar-dark.webp +0 -0
  42. package/dist/img/screenshots/pro/calendar-light-800.webp +0 -0
  43. package/dist/img/screenshots/pro/calendar-light.webp +0 -0
  44. package/dist/img/screenshots/pro/crm-dark-800.webp +0 -0
  45. package/dist/img/screenshots/pro/crm-dark.webp +0 -0
  46. package/dist/img/screenshots/pro/crm-light-800.webp +0 -0
  47. package/dist/img/screenshots/pro/crm-light.webp +0 -0
  48. package/dist/img/screenshots/pro/crypto-dark-800.webp +0 -0
  49. package/dist/img/screenshots/pro/crypto-dark.webp +0 -0
  50. package/dist/img/screenshots/pro/crypto-light-800.webp +0 -0
  51. package/dist/img/screenshots/pro/crypto-light.webp +0 -0
  52. package/dist/img/screenshots/pro/datatables-dark-800.webp +0 -0
  53. package/dist/img/screenshots/pro/datatables-dark.webp +0 -0
  54. package/dist/img/screenshots/pro/datatables-light-800.webp +0 -0
  55. package/dist/img/screenshots/pro/datatables-light.webp +0 -0
  56. package/dist/img/screenshots/pro/ecommerce-dark-800.webp +0 -0
  57. package/dist/img/screenshots/pro/ecommerce-dark.webp +0 -0
  58. package/dist/img/screenshots/pro/ecommerce-light-800.webp +0 -0
  59. package/dist/img/screenshots/pro/ecommerce-light.webp +0 -0
  60. package/dist/img/screenshots/pro/settings-dark-800.webp +0 -0
  61. package/dist/img/screenshots/pro/settings-dark.webp +0 -0
  62. package/dist/img/screenshots/pro/settings-light-800.webp +0 -0
  63. package/dist/img/screenshots/pro/settings-light.webp +0 -0
  64. package/dist/index.html +918 -0
  65. package/dist/js/app.d.ts +78 -0
  66. package/dist/js/app.js +4 -3
  67. package/dist/js/head.js +1 -0
  68. package/dist/js/icons-all.js +1 -0
  69. package/dist/maps-google.html +469 -0
  70. package/dist/pages-404.html +46 -0
  71. package/dist/pages-500.html +46 -0
  72. package/dist/pages-blank.html +423 -0
  73. package/dist/pages-invoice.html +715 -0
  74. package/dist/pages-pricing.html +730 -0
  75. package/dist/pages-profile.html +787 -0
  76. package/dist/pages-sign-in.html +76 -0
  77. package/dist/pages-sign-up.html +73 -0
  78. package/dist/tables-bootstrap.html +856 -0
  79. package/dist/ui-alerts.html +745 -0
  80. package/dist/ui-buttons.html +529 -0
  81. package/dist/ui-cards.html +469 -0
  82. package/dist/ui-forms.html +584 -0
  83. package/dist/ui-modals.html +800 -0
  84. package/dist/ui-typography.html +560 -0
  85. package/dist/upgrade-to-pro.html +788 -0
  86. package/package.json +114 -88
  87. package/dist/css/app.css.map +0 -1
  88. package/dist/fonts/.gitkeep +0 -0
  89. package/dist/img/photos/unsplash-3.jpg +0 -0
  90. package/dist/js/app.js.LICENSE.txt +0 -514
  91. package/dist/js/app.js.map +0 -1
@@ -0,0 +1,560 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
+ <meta name="description"
8
+ content="Bootstrap typography demo for the free AdminKit template. Headings, text utilities, blockquotes and lists for dashboards.">
9
+ <meta name="author" content="AdminKit">
10
+ <meta name="keywords" content="adminkit, bootstrap, bootstrap 5, admin, dashboard, template, responsive, css, sass, html, theme, front-end, ui kit, web">
11
+
12
+ <link rel="shortcut icon" href="./img/icons/icon-48x48.png" />
13
+
14
+ <link rel="canonical" href="https://demo-basic.adminkit.io/ui-typography" />
15
+
16
+ <title>Typography | AdminKit Demo</title>
17
+
18
+ <!-- Color mode before the first paint (src/js/head.js). Vite leaves vite-ignore tags as they are; vite.config.js builds the file. -->
19
+ <script src="js/head.js"></script>
20
+
21
+ <script type="module" crossorigin src="./js/app.js"></script>
22
+ <link rel="stylesheet" crossorigin href="./css/app.css">
23
+ <link rel="preload" href="./fonts/inter-latin-400-normal-C38fXH4l.woff2" as="font" type="font/woff2" crossorigin>
24
+ <link rel="preload" href="./fonts/inter-latin-600-normal-LgqL8muc.woff2" as="font" type="font/woff2" crossorigin>
25
+ </head>
26
+
27
+ <body>
28
+ <div class="wrapper">
29
+ <nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
30
+ <div class="sidebar-content js-simplebar">
31
+ <a class="sidebar-brand" href="index.html">
32
+ <span class="align-middle">AdminKit</span>
33
+ </a>
34
+
35
+ <ul class="sidebar-nav">
36
+ <li class="sidebar-header">
37
+ Pages
38
+ </li>
39
+
40
+ <li class="sidebar-item">
41
+ <a class="sidebar-link" href="index.html">
42
+ <i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Analytics</span>
43
+ </a>
44
+ </li>
45
+
46
+ <li class="sidebar-item">
47
+ <a class="sidebar-link" href="pages-profile.html">
48
+ <i class="align-middle" data-lucide="user"></i> <span class="align-middle">Profile</span>
49
+ </a>
50
+ </li>
51
+
52
+ <li class="sidebar-item">
53
+ <a class="sidebar-link" href="pages-invoice.html">
54
+ <i class="align-middle" data-lucide="credit-card"></i> <span class="align-middle">Invoice</span>
55
+ </a>
56
+ </li>
57
+
58
+ <li class="sidebar-item">
59
+ <a class="sidebar-link" href="pages-sign-in.html">
60
+ <i class="align-middle" data-lucide="log-in"></i> <span class="align-middle">Sign In</span>
61
+ </a>
62
+ </li>
63
+
64
+ <li class="sidebar-item">
65
+ <a class="sidebar-link" href="pages-sign-up.html">
66
+ <i class="align-middle" data-lucide="user-plus"></i> <span class="align-middle">Sign Up</span>
67
+ </a>
68
+ </li>
69
+
70
+ <li class="sidebar-item">
71
+ <a class="sidebar-link" href="pages-404.html">
72
+ <i class="align-middle" data-lucide="search-x"></i> <span class="align-middle">404 Page</span>
73
+ </a>
74
+ </li>
75
+
76
+ <li class="sidebar-item">
77
+ <a class="sidebar-link" href="pages-500.html">
78
+ <i class="align-middle" data-lucide="server-crash"></i> <span class="align-middle">500 Page</span>
79
+ </a>
80
+ </li>
81
+
82
+ <li class="sidebar-item">
83
+ <a class="sidebar-link" href="pages-pricing.html">
84
+ <i class="align-middle" data-lucide="tag"></i> <span class="align-middle">Pricing</span>
85
+ </a>
86
+ </li>
87
+
88
+ <li class="sidebar-item">
89
+ <a class="sidebar-link" href="pages-blank.html">
90
+ <i class="align-middle" data-lucide="book"></i> <span class="align-middle">Blank</span>
91
+ </a>
92
+ </li>
93
+
94
+ <li class="sidebar-header">
95
+ Tools & Components
96
+ </li>
97
+
98
+ <li class="sidebar-item">
99
+ <a class="sidebar-link" href="ui-alerts.html">
100
+ <i class="align-middle" data-lucide="bell"></i> <span class="align-middle">Alerts</span>
101
+ </a>
102
+ </li>
103
+
104
+ <li class="sidebar-item">
105
+ <a class="sidebar-link" href="ui-buttons.html">
106
+ <i class="align-middle" data-lucide="square"></i> <span class="align-middle">Buttons</span>
107
+ </a>
108
+ </li>
109
+
110
+ <li class="sidebar-item">
111
+ <a class="sidebar-link" href="ui-forms.html">
112
+ <i class="align-middle" data-lucide="square-check-big"></i> <span class="align-middle">Forms</span>
113
+ </a>
114
+ </li>
115
+
116
+ <li class="sidebar-item">
117
+ <a class="sidebar-link" href="ui-cards.html">
118
+ <i class="align-middle" data-lucide="layout-grid"></i> <span class="align-middle">Cards</span>
119
+ </a>
120
+ </li>
121
+
122
+ <li class="sidebar-item">
123
+ <a class="sidebar-link" href="ui-modals.html">
124
+ <i class="align-middle" data-lucide="app-window"></i> <span class="align-middle">Modals</span>
125
+ </a>
126
+ </li>
127
+
128
+ <li class="sidebar-item active">
129
+ <a class="sidebar-link" href="ui-typography.html">
130
+ <i class="align-middle" data-lucide="text-align-start"></i> <span class="align-middle">Typography</span>
131
+ </a>
132
+ </li>
133
+
134
+ <li class="sidebar-item">
135
+ <a class="sidebar-link" href="icons-lucide.html">
136
+ <i class="align-middle" data-lucide="coffee"></i> <span class="align-middle">Icons</span>
137
+ </a>
138
+ </li>
139
+
140
+ <li class="sidebar-item">
141
+ <a class="sidebar-link" href="tables-bootstrap.html">
142
+ <i class="align-middle" data-lucide="list"></i> <span class="align-middle">Tables</span>
143
+ </a>
144
+ </li>
145
+
146
+ <li class="sidebar-header">
147
+ Plugins & Addons
148
+ </li>
149
+
150
+ <li class="sidebar-item">
151
+ <a class="sidebar-link" href="charts-chartjs.html">
152
+ <i class="align-middle" data-lucide="chart-no-axes-column"></i> <span class="align-middle">Charts</span>
153
+ </a>
154
+ </li>
155
+
156
+ <li class="sidebar-item">
157
+ <a class="sidebar-link" href="maps-google.html">
158
+ <i class="align-middle" data-lucide="map"></i> <span class="align-middle">Maps</span>
159
+ </a>
160
+ </li>
161
+ </ul>
162
+
163
+ <div class="sidebar-cta">
164
+ <div class="sidebar-cta-content">
165
+ <strong class="d-inline-block mb-2">Upgrade to Pro</strong>
166
+ <div class="mb-3 text-sm">
167
+ AdminKit PRO, the premium version, has more components.
168
+ </div>
169
+ <div class="d-grid">
170
+ <a href="upgrade-to-pro.html" class="btn btn-primary">Upgrade to Pro</a>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </nav>
176
+
177
+ <div class="main">
178
+ <nav class="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
179
+ <button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
180
+ <i class="hamburger align-self-center"></i>
181
+ </button>
182
+
183
+ <div class="navbar-collapse collapse">
184
+ <ul class="navbar-nav navbar-align">
185
+ <li class="nav-item dropdown">
186
+ <a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
187
+ <div class="position-relative">
188
+ <span class="visually-hidden">Notifications</span>
189
+ <i class="align-middle" data-lucide="bell"></i>
190
+ <span class="indicator">4</span>
191
+ </div>
192
+ </a>
193
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="alertsDropdown">
194
+ <div class="dropdown-menu-header">
195
+ 4 New Notifications
196
+ </div>
197
+ <div class="list-group">
198
+ <a href="#" class="list-group-item">
199
+ <div class="row g-0 align-items-center">
200
+ <div class="col-2">
201
+ <i class="text-danger" data-lucide="circle-alert"></i>
202
+ </div>
203
+ <div class="col-10">
204
+ <div class="text-dark">Update completed</div>
205
+ <div class="text-body-secondary small mt-1">Restart server 12 to complete the update.</div>
206
+ <div class="text-body-secondary small mt-1">30m ago</div>
207
+ </div>
208
+ </div>
209
+ </a>
210
+ <a href="#" class="list-group-item">
211
+ <div class="row g-0 align-items-center">
212
+ <div class="col-2">
213
+ <i class="text-warning" data-lucide="bell"></i>
214
+ </div>
215
+ <div class="col-10">
216
+ <div class="text-dark">Lorem ipsum</div>
217
+ <div class="text-body-secondary small mt-1">Aliquam ex eros, imperdiet vulputate hendrerit et.</div>
218
+ <div class="text-body-secondary small mt-1">2h ago</div>
219
+ </div>
220
+ </div>
221
+ </a>
222
+ <a href="#" class="list-group-item">
223
+ <div class="row g-0 align-items-center">
224
+ <div class="col-2">
225
+ <i class="text-primary" data-lucide="house"></i>
226
+ </div>
227
+ <div class="col-10">
228
+ <div class="text-dark">Login from 192.186.1.8</div>
229
+ <div class="text-body-secondary small mt-1">5h ago</div>
230
+ </div>
231
+ </div>
232
+ </a>
233
+ <a href="#" class="list-group-item">
234
+ <div class="row g-0 align-items-center">
235
+ <div class="col-2">
236
+ <i class="text-success" data-lucide="user-plus"></i>
237
+ </div>
238
+ <div class="col-10">
239
+ <div class="text-dark">New connection</div>
240
+ <div class="text-body-secondary small mt-1">Christina accepted your request.</div>
241
+ <div class="text-body-secondary small mt-1">14h ago</div>
242
+ </div>
243
+ </div>
244
+ </a>
245
+ </div>
246
+ <div class="dropdown-menu-footer">
247
+ <a href="#" class="text-body-secondary">Show all notifications</a>
248
+ </div>
249
+ </div>
250
+ </li>
251
+ <li class="nav-item dropdown">
252
+ <a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
253
+ aria-label="Messages">
254
+ <div class="position-relative">
255
+ <i class="align-middle" data-lucide="message-square"></i>
256
+ </div>
257
+ </a>
258
+ <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end py-0" aria-labelledby="messagesDropdown">
259
+ <div class="dropdown-menu-header">
260
+ <div class="position-relative">
261
+ 4 New Messages
262
+ </div>
263
+ </div>
264
+ <div class="list-group">
265
+ <a href="#" class="list-group-item">
266
+ <div class="row g-0 align-items-center">
267
+ <div class="col-2">
268
+ <img src="./img/avatars/avatar-5.jpg" class="avatar img-fluid rounded-circle" alt="Vanessa Tucker" width="40"
269
+ height="40">
270
+ </div>
271
+ <div class="col-10 ps-2">
272
+ <div class="text-dark">Vanessa Tucker</div>
273
+ <div class="text-body-secondary small mt-1">Nam pretium turpis et arcu. Duis arcu tortor.</div>
274
+ <div class="text-body-secondary small mt-1">15m ago</div>
275
+ </div>
276
+ </div>
277
+ </a>
278
+ <a href="#" class="list-group-item">
279
+ <div class="row g-0 align-items-center">
280
+ <div class="col-2">
281
+ <img src="./img/avatars/avatar-2.jpg" class="avatar img-fluid rounded-circle" alt="William Harris" width="40"
282
+ height="40">
283
+ </div>
284
+ <div class="col-10 ps-2">
285
+ <div class="text-dark">William Harris</div>
286
+ <div class="text-body-secondary small mt-1">Curabitur ligula sapien euismod vitae.</div>
287
+ <div class="text-body-secondary small mt-1">2h ago</div>
288
+ </div>
289
+ </div>
290
+ </a>
291
+ <a href="#" class="list-group-item">
292
+ <div class="row g-0 align-items-center">
293
+ <div class="col-2">
294
+ <img src="./img/avatars/avatar-4.jpg" class="avatar img-fluid rounded-circle" alt="Christina Mason" width="40"
295
+ height="40">
296
+ </div>
297
+ <div class="col-10 ps-2">
298
+ <div class="text-dark">Christina Mason</div>
299
+ <div class="text-body-secondary small mt-1">Pellentesque auctor neque nec urna.</div>
300
+ <div class="text-body-secondary small mt-1">4h ago</div>
301
+ </div>
302
+ </div>
303
+ </a>
304
+ <a href="#" class="list-group-item">
305
+ <div class="row g-0 align-items-center">
306
+ <div class="col-2">
307
+ <img src="./img/avatars/avatar-3.jpg" class="avatar img-fluid rounded-circle" alt="Sharon Lessman" width="40"
308
+ height="40">
309
+ </div>
310
+ <div class="col-10 ps-2">
311
+ <div class="text-dark">Sharon Lessman</div>
312
+ <div class="text-body-secondary small mt-1">Aenean tellus metus, bibendum sed, posuere ac, mattis non.</div>
313
+ <div class="text-body-secondary small mt-1">5h ago</div>
314
+ </div>
315
+ </div>
316
+ </a>
317
+ </div>
318
+ <div class="dropdown-menu-footer">
319
+ <a href="#" class="text-body-secondary">Show all messages</a>
320
+ </div>
321
+ </div>
322
+ </li>
323
+ <li class="nav-item dropdown">
324
+ <a class="nav-icon dropdown-toggle" href="#" id="colorModeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
325
+ aria-label="Color mode" data-color-mode-toggle>
326
+ <span data-color-mode-icon="light" hidden><i class="align-middle" data-lucide="sun"></i></span>
327
+ <span data-color-mode-icon="dark" hidden><i class="align-middle" data-lucide="moon"></i></span>
328
+ <span data-color-mode-icon="auto"><i class="align-middle" data-lucide="sun-moon"></i></span>
329
+ </a>
330
+ <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="colorModeDropdown">
331
+ <li>
332
+ <button type="button" class="dropdown-item" data-color-mode-value="light" aria-pressed="false">
333
+ <i class="align-middle me-1" data-lucide="sun"></i> Light
334
+ </button>
335
+ </li>
336
+ <li>
337
+ <button type="button" class="dropdown-item" data-color-mode-value="dark" aria-pressed="false">
338
+ <i class="align-middle me-1" data-lucide="moon"></i> Dark
339
+ </button>
340
+ </li>
341
+ <li>
342
+ <button type="button" class="dropdown-item" data-color-mode-value="auto" aria-pressed="false">
343
+ <i class="align-middle me-1" data-lucide="sun-moon"></i> Auto
344
+ </button>
345
+ </li>
346
+ </ul>
347
+ </li>
348
+ <li class="nav-item dropdown">
349
+ <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
350
+ aria-label="Account">
351
+ <i class="align-middle" data-lucide="settings"></i>
352
+ </a>
353
+
354
+ <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
355
+ <img src="./img/avatars/avatar.jpg" class="avatar img-fluid rounded me-1" alt="Charles Hall" width="40" height="40" /> <span
356
+ class="text-dark">Charles Hall</span>
357
+ </a>
358
+ <div class="dropdown-menu dropdown-menu-end">
359
+ <a class="dropdown-item" href="pages-profile.html"><i class="align-middle me-1" data-lucide="user"></i> Profile</a>
360
+ <a class="dropdown-item" href="#"><i class="align-middle me-1" data-lucide="chart-pie"></i> Analytics</a>
361
+ <div class="dropdown-divider"></div>
362
+ <a class="dropdown-item" href="index.html"><i class="align-middle me-1" data-lucide="settings"></i> Settings & Privacy</a>
363
+ <a class="dropdown-item" href="#"><i class="align-middle me-1" data-lucide="circle-question-mark"></i> Help Center</a>
364
+ <div class="dropdown-divider"></div>
365
+ <a class="dropdown-item" href="#">Log out</a>
366
+ </div>
367
+ </li>
368
+ </ul>
369
+ </div>
370
+ </nav>
371
+
372
+ <main class="content ak-reveal-cards">
373
+ <div class="container-fluid p-0">
374
+ <div class="mb-3">
375
+ <h1 class="h3 d-inline align-middle">Typography</h1>
376
+ <a class="badge bg-dark text-light ms-2 d-print-none" href="upgrade-to-pro.html">
377
+ Get more typography examples
378
+ </a>
379
+ </div>
380
+ <div class="row">
381
+ <div class="col-12 col-lg-6">
382
+ <div class="card">
383
+ <div class="card-header">
384
+ <h2 class="card-title">Headings</h2>
385
+ <p class="h6 card-subtitle text-body-secondary">All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>,
386
+ are available.</p>
387
+ </div>
388
+ <div class="card-body">
389
+ <h1>This is a heading h1</h1>
390
+ <p class="text-body-secondary">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
391
+ amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio
392
+ et ante tincidunt tempus. Donec vitae sapien ut libero.</p>
393
+ <h2>This is a heading h2</h2>
394
+ <p class="text-body-secondary">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
395
+ amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
396
+ <h3>This is a heading h3</h3>
397
+ <p class="text-body-secondary">Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet
398
+ adipiscing sem neque sed ipsum. Nam quam nunc, vel.</p>
399
+ <h4>This is a heading h4</h4>
400
+ <p class="text-body-secondary">Etiam rhoncus. Maecenas tempus, tellus condimentum rhoncus, sem quam libero, sit amet
401
+ adipiscing sem neque sed ipsum. Nam quam nunc, vel.</p>
402
+ <h5>This is a heading h5</h5>
403
+ <p class="text-body-secondary">Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.</p>
404
+ <h6>This is a heading h6</h6>
405
+ <p class="text-body-secondary">Sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.</p>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="card">
410
+ <div class="card-header">
411
+ <h2 class="card-title">Coloured text</h2>
412
+ <p class="h6 card-subtitle text-body-secondary">Contextual text classes.</p>
413
+ </div>
414
+ <div class="card-body">
415
+ <p class="text-primary">This line of text contains the text-primary class.</p>
416
+ <p class="text-secondary">This line of text contains the text-secondary class.</p>
417
+ <p class="text-success">This line of text contains the text-success class.</p>
418
+ <p class="text-danger">This line of text contains the text-danger class.</p>
419
+ <p class="text-warning">This line of text contains the text-warning class.</p>
420
+ <p class="text-info">This line of text contains the text-info class.</p>
421
+ </div>
422
+ </div>
423
+ </div>
424
+ <div class="col-12 col-lg-6">
425
+ <div class="card">
426
+ <div class="card-header">
427
+ <h2 class="card-title">Inline text</h2>
428
+ <p class="h6 card-subtitle text-body-secondary">Styling for common inline HTML5 elements.</p>
429
+ </div>
430
+ <div class="card-body">
431
+ <p>You can use the mark-tag to <mark>highlight</mark> text.</p>
432
+ <p><del>This line of text can be treated as deleted text.</del></p>
433
+ <p><ins>This line of text can be treated as an addition to the document.</ins></p>
434
+ <p><strong>Bold text using the strong-tag</strong></p>
435
+ <p><em>Italicized text using the em-tag</em></p>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="card">
440
+ <div class="card-header">
441
+ <h2 class="card-title">Blockquotes</h2>
442
+ <p class="h6 card-subtitle text-body-secondary">For quoting blocks of content from another source within your document.</p>
443
+ </div>
444
+ <div class="card-body">
445
+ <blockquote>
446
+ <p>
447
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
448
+ erat a ante.
449
+ </p>
450
+ <footer>
451
+ Someone famous in <cite title="Source Title">Source Title</cite>
452
+ </footer>
453
+ </blockquote>
454
+ <p class="text-body-secondary m-b-15 m-t-20">
455
+ Add <code>.blockquote-reverse</code>
456
+ for a blockquote with right-aligned content.
457
+ </p>
458
+ <blockquote class="blockquote-reverse m-b-0">
459
+ <p>
460
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
461
+ erat a ante.
462
+ </p>
463
+ <footer>
464
+ Someone famous in <cite title="Source Title">Source Title</cite>
465
+ </footer>
466
+ </blockquote>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="card">
471
+ <div class="card-header">
472
+ <h2 class="card-title">List unordered</h2>
473
+ <p class="h6 card-subtitle text-body-secondary">The unordered list items are marked with bullets.</p>
474
+ </div>
475
+ <div class="card-body">
476
+ <ul>
477
+ <li>
478
+ Lorem ipsum dolor sit amet
479
+ </li>
480
+ <li>
481
+ Consectetur adipiscing elit
482
+ </li>
483
+ <li>
484
+ Nulla volutpat aliquam velit
485
+ </li>
486
+ <li>
487
+ Phasellus iaculis neque
488
+ </li>
489
+ <li>
490
+ Eget porttitor lorem
491
+ </li>
492
+ </ul>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="card">
497
+ <div class="card-header">
498
+ <h2 class="card-title">List ordered</h2>
499
+ <p class="h6 card-subtitle text-body-secondary">The ordered list items are marked with numbers.</p>
500
+ </div>
501
+ <div class="card-body">
502
+ <ol>
503
+ <li>
504
+ Lorem ipsum dolor sit amet
505
+ </li>
506
+ <li>
507
+ Consectetur adipiscing elit
508
+ </li>
509
+ <li>
510
+ Nulla volutpat aliquam velit
511
+ </li>
512
+ <li>
513
+ Phasellus iaculis neque
514
+ </li>
515
+ <li>
516
+ Eget porttitor lorem
517
+ </li>
518
+ </ol>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </main>
525
+
526
+ <footer class="footer ak-reveal">
527
+ <div class="container-fluid">
528
+ <div class="row text-body-secondary">
529
+ <div class="col-6 text-start">
530
+ <p class="mb-0">
531
+ <a class="text-body-secondary" href="https://adminkit.io/" target="_blank"><strong>AdminKit</strong></a> - <a
532
+ class="text-body-secondary" href="https://adminkit.io/" target="_blank"><strong>Bootstrap Admin Template</strong></a> &copy;
533
+ 2026
534
+ </p>
535
+ </div>
536
+ <div class="col-6 text-end">
537
+ <ul class="list-inline">
538
+ <li class="list-inline-item">
539
+ <a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Support</a>
540
+ </li>
541
+ <li class="list-inline-item">
542
+ <a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Help Center</a>
543
+ </li>
544
+ <li class="list-inline-item">
545
+ <a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Privacy</a>
546
+ </li>
547
+ <li class="list-inline-item">
548
+ <a class="text-body-secondary" href="https://adminkit.io/" target="_blank">Terms</a>
549
+ </li>
550
+ </ul>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </footer>
555
+ </div>
556
+ </div>
557
+
558
+ </body>
559
+
560
+ </html>