typography.html 47 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-beta19
  5. * @link https://tabler.io
  6. * Copyright 2018-2023 The Tabler Authors
  7. * Copyright 2018-2023 codecalm.net Paweł Kuna
  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  9. -->
  10. <html lang="en">
  11. <head>
  12. <meta charset="utf-8"/>
  13. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  14. <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  15. <title>Typography - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
  16. <!-- CSS files -->
  17. <link href="./dist/css/tabler.min.css?1684106062" rel="stylesheet"/>
  18. <link href="./dist/css/tabler-flags.min.css?1684106062" rel="stylesheet"/>
  19. <link href="./dist/css/tabler-payments.min.css?1684106062" rel="stylesheet"/>
  20. <link href="./dist/css/tabler-vendors.min.css?1684106062" rel="stylesheet"/>
  21. <link href="./dist/css/demo.min.css?1684106062" rel="stylesheet"/>
  22. <style>
  23. @import url('https://rsms.me/inter/inter.css');
  24. :root {
  25. --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  26. }
  27. body {
  28. font-feature-settings: "cv03", "cv04", "cv11";
  29. }
  30. </style>
  31. </head>
  32. <body >
  33. <script src="./dist/js/demo-theme.min.js?1684106062"></script>
  34. <div class="page">
  35. <!-- Navbar -->
  36. <header class="navbar navbar-expand-md d-print-none" >
  37. <div class="container-xl">
  38. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
  39. <span class="navbar-toggler-icon"></span>
  40. </button>
  41. <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
  42. <a href=".">
  43. <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
  44. </a>
  45. </h1>
  46. <div class="navbar-nav flex-row order-md-last">
  47. <div class="nav-item d-none d-md-flex me-3">
  48. <div class="btn-list">
  49. <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
  50. <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
  51. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
  52. Source code
  53. </a>
  54. <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
  55. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  56. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  57. Sponsor
  58. </a>
  59. </div>
  60. </div>
  61. <div class="d-none d-md-flex">
  62. <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
  63. data-bs-placement="bottom">
  64. <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
  65. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
  66. </a>
  67. <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
  68. data-bs-placement="bottom">
  69. <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
  70. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
  71. </a>
  72. <div class="nav-item dropdown d-none d-md-flex me-3">
  73. <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
  74. <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
  75. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
  76. <span class="badge bg-red"></span>
  77. </a>
  78. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
  79. <div class="card">
  80. <div class="card-header">
  81. <h3 class="card-title">Last updates</h3>
  82. </div>
  83. <div class="list-group list-group-flush list-group-hoverable">
  84. <div class="list-group-item">
  85. <div class="row align-items-center">
  86. <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
  87. <div class="col text-truncate">
  88. <a href="#" class="text-body d-block">Example 1</a>
  89. <div class="d-block text-muted text-truncate mt-n1">
  90. Change deprecated html tags to text decoration classes (#29604)
  91. </div>
  92. </div>
  93. <div class="col-auto">
  94. <a href="#" class="list-group-item-actions">
  95. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  96. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  97. </a>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="list-group-item">
  102. <div class="row align-items-center">
  103. <div class="col-auto"><span class="status-dot d-block"></span></div>
  104. <div class="col text-truncate">
  105. <a href="#" class="text-body d-block">Example 2</a>
  106. <div class="d-block text-muted text-truncate mt-n1">
  107. justify-content:between ⇒ justify-content:space-between (#29734)
  108. </div>
  109. </div>
  110. <div class="col-auto">
  111. <a href="#" class="list-group-item-actions show">
  112. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  113. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  114. </a>
  115. </div>
  116. </div>
  117. </div>
  118. <div class="list-group-item">
  119. <div class="row align-items-center">
  120. <div class="col-auto"><span class="status-dot d-block"></span></div>
  121. <div class="col text-truncate">
  122. <a href="#" class="text-body d-block">Example 3</a>
  123. <div class="d-block text-muted text-truncate mt-n1">
  124. Update change-version.js (#29736)
  125. </div>
  126. </div>
  127. <div class="col-auto">
  128. <a href="#" class="list-group-item-actions">
  129. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  130. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  131. </a>
  132. </div>
  133. </div>
  134. </div>
  135. <div class="list-group-item">
  136. <div class="row align-items-center">
  137. <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
  138. <div class="col text-truncate">
  139. <a href="#" class="text-body d-block">Example 4</a>
  140. <div class="d-block text-muted text-truncate mt-n1">
  141. Regenerate package-lock.json (#29730)
  142. </div>
  143. </div>
  144. <div class="col-auto">
  145. <a href="#" class="list-group-item-actions">
  146. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  147. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  148. </a>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <div class="nav-item dropdown">
  158. <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
  159. <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
  160. <div class="d-none d-xl-block ps-2">
  161. <div>Paweł Kuna</div>
  162. <div class="mt-1 small text-muted">UI Designer</div>
  163. </div>
  164. </a>
  165. <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
  166. <a href="#" class="dropdown-item">Status</a>
  167. <a href="./profile.html" class="dropdown-item">Profile</a>
  168. <a href="#" class="dropdown-item">Feedback</a>
  169. <div class="dropdown-divider"></div>
  170. <a href="./settings.html" class="dropdown-item">Settings</a>
  171. <a href="./sign-in.html" class="dropdown-item">Logout</a>
  172. </div>
  173. </div>
  174. </div>
  175. </div>
  176. </header>
  177. <header class="navbar-expand-md">
  178. <div class="collapse navbar-collapse" id="navbar-menu">
  179. <div class="navbar">
  180. <div class="container-xl">
  181. <ul class="navbar-nav">
  182. <li class="nav-item">
  183. <a class="nav-link" href="./" >
  184. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
  185. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
  186. </span>
  187. <span class="nav-link-title">
  188. Home
  189. </span>
  190. </a>
  191. </li>
  192. <li class="nav-item active dropdown">
  193. <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  194. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
  195. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
  196. </span>
  197. <span class="nav-link-title">
  198. Interface
  199. </span>
  200. </a>
  201. <div class="dropdown-menu">
  202. <div class="dropdown-menu-columns">
  203. <div class="dropdown-menu-column">
  204. <a class="dropdown-item" href="./accordion.html">
  205. Accordion
  206. </a>
  207. <a class="dropdown-item" href="./blank.html">
  208. Blank page
  209. </a>
  210. <a class="dropdown-item" href="./badges.html">
  211. Badges
  212. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  213. </a>
  214. <a class="dropdown-item" href="./buttons.html">
  215. Buttons
  216. </a>
  217. <div class="dropend">
  218. <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  219. Cards
  220. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  221. </a>
  222. <div class="dropdown-menu">
  223. <a href="./cards.html" class="dropdown-item">
  224. Sample cards
  225. </a>
  226. <a href="./card-actions.html" class="dropdown-item">
  227. Card actions
  228. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  229. </a>
  230. <a href="./cards-masonry.html" class="dropdown-item">
  231. Cards Masonry
  232. </a>
  233. </div>
  234. </div>
  235. <a class="dropdown-item" href="./colors.html">
  236. Colors
  237. </a>
  238. <a class="dropdown-item" href="./datagrid.html">
  239. Data grid
  240. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  241. </a>
  242. <a class="dropdown-item" href="./datatables.html">
  243. Datatables
  244. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  245. </a>
  246. <a class="dropdown-item" href="./dropdowns.html">
  247. Dropdowns
  248. </a>
  249. <a class="dropdown-item" href="./modals.html">
  250. Modals
  251. </a>
  252. <a class="dropdown-item" href="./maps.html">
  253. Maps
  254. </a>
  255. <a class="dropdown-item" href="./map-fullsize.html">
  256. Map fullsize
  257. </a>
  258. <a class="dropdown-item" href="./maps-vector.html">
  259. Vector maps
  260. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  261. </a>
  262. <a class="dropdown-item" href="./navigation.html">
  263. Navigation
  264. </a>
  265. <a class="dropdown-item" href="./charts.html">
  266. Charts
  267. </a>
  268. <a class="dropdown-item" href="./pagination.html">
  269. <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
  270. Pagination
  271. </a>
  272. </div>
  273. <div class="dropdown-menu-column">
  274. <a class="dropdown-item" href="./placeholder.html">
  275. Placeholder
  276. </a>
  277. <a class="dropdown-item" href="./steps.html">
  278. Steps
  279. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  280. </a>
  281. <a class="dropdown-item" href="./stars-rating.html">
  282. Stars rating
  283. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  284. </a>
  285. <a class="dropdown-item" href="./tabs.html">
  286. Tabs
  287. </a>
  288. <a class="dropdown-item" href="./tables.html">
  289. Tables
  290. </a>
  291. <a class="dropdown-item" href="./carousel.html">
  292. Carousel
  293. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  294. </a>
  295. <a class="dropdown-item" href="./lists.html">
  296. Lists
  297. </a>
  298. <a class="dropdown-item active" href="./typography.html">
  299. Typography
  300. </a>
  301. <a class="dropdown-item" href="./offcanvas.html">
  302. Offcanvas
  303. </a>
  304. <a class="dropdown-item" href="./markdown.html">
  305. Markdown
  306. </a>
  307. <a class="dropdown-item" href="./dropzone.html">
  308. Dropzone
  309. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  310. </a>
  311. <a class="dropdown-item" href="./lightbox.html">
  312. Lightbox
  313. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  314. </a>
  315. <a class="dropdown-item" href="./tinymce.html">
  316. TinyMCE
  317. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  318. </a>
  319. <a class="dropdown-item" href="./inline-player.html">
  320. Inline player
  321. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  322. </a>
  323. <div class="dropend">
  324. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  325. Authentication
  326. </a>
  327. <div class="dropdown-menu">
  328. <a href="./sign-in.html" class="dropdown-item">
  329. Sign in
  330. </a>
  331. <a href="./sign-in-link.html" class="dropdown-item">
  332. Sign in link
  333. </a>
  334. <a href="./sign-in-illustration.html" class="dropdown-item">
  335. Sign in with illustration
  336. </a>
  337. <a href="./sign-in-cover.html" class="dropdown-item">
  338. Sign in with cover
  339. </a>
  340. <a href="./sign-up.html" class="dropdown-item">
  341. Sign up
  342. </a>
  343. <a href="./forgot-password.html" class="dropdown-item">
  344. Forgot password
  345. </a>
  346. <a href="./terms-of-service.html" class="dropdown-item">
  347. Terms of service
  348. </a>
  349. <a href="./auth-lock.html" class="dropdown-item">
  350. Lock screen
  351. </a>
  352. </div>
  353. </div>
  354. <div class="dropend">
  355. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  356. <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
  357. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 14l6 0" /></svg>
  358. Error pages
  359. </a>
  360. <div class="dropdown-menu">
  361. <a href="./error-404.html" class="dropdown-item">
  362. 404 page
  363. </a>
  364. <a href="./error-500.html" class="dropdown-item">
  365. 500 page
  366. </a>
  367. <a href="./error-maintenance.html" class="dropdown-item">
  368. Maintenance page
  369. </a>
  370. </div>
  371. </div>
  372. </div>
  373. </div>
  374. </div>
  375. </li>
  376. <li class="nav-item">
  377. <a class="nav-link" href="./form-elements.html" >
  378. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
  379. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
  380. </span>
  381. <span class="nav-link-title">
  382. Form elements
  383. </span>
  384. </a>
  385. </li>
  386. <li class="nav-item dropdown">
  387. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  388. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
  389. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  390. </span>
  391. <span class="nav-link-title">
  392. Extra
  393. </span>
  394. </a>
  395. <div class="dropdown-menu">
  396. <div class="dropdown-menu-columns">
  397. <div class="dropdown-menu-column">
  398. <a class="dropdown-item" href="./empty.html">
  399. Empty page
  400. </a>
  401. <a class="dropdown-item" href="./cookie-banner.html">
  402. Cookie banner
  403. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  404. </a>
  405. <a class="dropdown-item" href="./activity.html">
  406. Activity
  407. </a>
  408. <a class="dropdown-item" href="./gallery.html">
  409. Gallery
  410. </a>
  411. <a class="dropdown-item" href="./invoice.html">
  412. Invoice
  413. </a>
  414. <a class="dropdown-item" href="./search-results.html">
  415. Search results
  416. </a>
  417. <a class="dropdown-item" href="./pricing.html">
  418. Pricing cards
  419. </a>
  420. <a class="dropdown-item" href="./pricing-table.html">
  421. Pricing table
  422. </a>
  423. <a class="dropdown-item" href="./faq.html">
  424. FAQ
  425. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  426. </a>
  427. <a class="dropdown-item" href="./users.html">
  428. Users
  429. </a>
  430. <a class="dropdown-item" href="./license.html">
  431. License
  432. </a>
  433. </div>
  434. <div class="dropdown-menu-column">
  435. <a class="dropdown-item" href="./logs.html">
  436. Logs
  437. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  438. </a>
  439. <a class="dropdown-item" href="./music.html">
  440. Music
  441. </a>
  442. <a class="dropdown-item" href="./photogrid.html">
  443. Photogrid
  444. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  445. </a>
  446. <a class="dropdown-item" href="./tasks.html">
  447. Tasks
  448. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  449. </a>
  450. <a class="dropdown-item" href="./uptime.html">
  451. Uptime monitor
  452. </a>
  453. <a class="dropdown-item" href="./widgets.html">
  454. Widgets
  455. </a>
  456. <a class="dropdown-item" href="./wizard.html">
  457. Wizard
  458. </a>
  459. <a class="dropdown-item" href="./settings.html">
  460. Settings
  461. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  462. </a>
  463. <a class="dropdown-item" href="./trial-ended.html">
  464. Trial ended
  465. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  466. </a>
  467. <a class="dropdown-item" href="./job-listing.html">
  468. Job listing
  469. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  470. </a>
  471. <a class="dropdown-item" href="./page-loader.html">
  472. Page loader
  473. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  474. </a>
  475. </div>
  476. </div>
  477. </div>
  478. </li>
  479. <li class="nav-item dropdown">
  480. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  481. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
  482. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
  483. </span>
  484. <span class="nav-link-title">
  485. Layout
  486. </span>
  487. </a>
  488. <div class="dropdown-menu">
  489. <div class="dropdown-menu-columns">
  490. <div class="dropdown-menu-column">
  491. <a class="dropdown-item" href="./layout-horizontal.html">
  492. Horizontal
  493. </a>
  494. <a class="dropdown-item" href="./layout-boxed.html">
  495. Boxed
  496. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  497. </a>
  498. <a class="dropdown-item" href="./layout-vertical.html">
  499. Vertical
  500. </a>
  501. <a class="dropdown-item" href="./layout-vertical-transparent.html">
  502. Vertical transparent
  503. </a>
  504. <a class="dropdown-item" href="./layout-vertical-right.html">
  505. Right vertical
  506. </a>
  507. <a class="dropdown-item" href="./layout-condensed.html">
  508. Condensed
  509. </a>
  510. <a class="dropdown-item" href="./layout-combo.html">
  511. Combined
  512. </a>
  513. </div>
  514. <div class="dropdown-menu-column">
  515. <a class="dropdown-item" href="./layout-navbar-dark.html">
  516. Navbar dark
  517. </a>
  518. <a class="dropdown-item" href="./layout-navbar-sticky.html">
  519. Navbar sticky
  520. </a>
  521. <a class="dropdown-item" href="./layout-navbar-overlap.html">
  522. Navbar overlap
  523. </a>
  524. <a class="dropdown-item" href="./layout-rtl.html">
  525. RTL mode
  526. </a>
  527. <a class="dropdown-item" href="./layout-fluid.html">
  528. Fluid
  529. </a>
  530. <a class="dropdown-item" href="./layout-fluid-vertical.html">
  531. Fluid vertical
  532. </a>
  533. </div>
  534. </div>
  535. </div>
  536. </li>
  537. <li class="nav-item">
  538. <a class="nav-link" href="./icons.html" >
  539. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
  540. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
  541. </span>
  542. <span class="nav-link-title">
  543. 4158 icons
  544. </span>
  545. </a>
  546. </li>
  547. <li class="nav-item dropdown">
  548. <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  549. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
  550. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
  551. </span>
  552. <span class="nav-link-title">
  553. Help
  554. </span>
  555. </a>
  556. <div class="dropdown-menu">
  557. <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
  558. Documentation
  559. </a>
  560. <a class="dropdown-item" href="./changelog.html">
  561. Changelog
  562. </a>
  563. <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
  564. Source code
  565. </a>
  566. <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
  567. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  568. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  569. Sponsor project!
  570. </a>
  571. </div>
  572. </li>
  573. </ul>
  574. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  575. <form action="./" method="get" autocomplete="off" novalidate>
  576. <div class="input-icon">
  577. <span class="input-icon-addon">
  578. <!-- Download SVG icon from http://tabler-icons.io/i/search -->
  579. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
  580. </span>
  581. <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
  582. </div>
  583. </form>
  584. </div>
  585. </div>
  586. </div>
  587. </div>
  588. </header>
  589. <div class="page-wrapper">
  590. <!-- Page header -->
  591. <div class="page-header d-print-none">
  592. <div class="container-xl">
  593. <div class="row g-2 align-items-center">
  594. <div class="col">
  595. <h2 class="page-title">
  596. Typography
  597. </h2>
  598. </div>
  599. </div>
  600. </div>
  601. </div>
  602. <!-- Page body -->
  603. <div class="page-body">
  604. <div class="container-xl">
  605. <div class="card card-lg">
  606. <div class="card-body ">
  607. <div class="row g-4">
  608. <div class="col-12 markdown">
  609. <h1>1/1 Text</h1>
  610. <p>I'm not a witch. Now, look here, my good man. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! Well, I didn't vote for you. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Bring her forward! He hasn't got shit all over him. He hasn't got shit all over him. We shall say 'Ni' again to you, if you do not appease us.</p>
  611. <p>Well, we did do the nose. Why? Now, look here, my good man. Be quiet! Well, what do you want?</p>
  612. </div>
  613. <div class="col-md-6 markdown">
  614. <h2>1/2 Text</h2>
  615. <p>What do you mean? We shall say 'Ni' again to you, if you do not appease us. I have to push the pram a lot. No, no, no! Yes, yes. A bit. But she's got a wart. What a strange person.</p>
  616. </div>
  617. <div class="col-md-6 markdown">
  618. <h2>1/2 Text</h2>
  619. <p>And this isn't my nose. This is a false one. We found them. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
  620. </div>
  621. <div class="col-md-4 markdown">
  622. <h3>1/3 Text</h3>
  623. <p>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Why? Well, what do you want? …Are you suggesting that coconuts migrate?</p>
  624. </div>
  625. <div class="col-md-8 markdown">
  626. <h3>2/3 Text</h3>
  627. <p>Well, I got better. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Found them? In Mercia?! The coconut's tropical! A newt? …Are you suggesting that coconuts migrate?</p>
  628. </div>
  629. <div class="col-md-8 markdown">
  630. <p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! We want a shrubbery!!</p>
  631. <p>Well, how'd you become king, then? Found them? In Mercia?! The coconut's tropical! Oh, ow! I am your king.</p>
  632. </div>
  633. <div class="col-md-3 markdown">
  634. <h4>Small Text</h4>
  635. <p>Well, Mercia's a temperate zone! You don't vote for kings. Now, look here, my good man. </p>
  636. <p class="text-muted small lh-base">Who's that then? Well, we did do the nose.</p>
  637. </div>
  638. <div class="col-md-4 markdown">
  639. <h3>Unordered list</h3>
  640. <ul>
  641. <li>lorem ipsum doloret</li>
  642. <li>lorem ipsum doloret
  643. <ul>
  644. <li>lorem ipsum doloret</li>
  645. <li>lorem ipsum doloret</li>
  646. </ul>
  647. </li>
  648. <li>lorem ipsum doloret</li>
  649. <li>lorem ipsum doloret</li>
  650. </ul>
  651. </div>
  652. <div class="col-md-4 markdown">
  653. <h3>Ordered list</h3>
  654. <ol>
  655. <li>lorem ipsum doloret</li>
  656. <li>lorem ipsum doloret</li>
  657. <li>lorem ipsum doloret</li>
  658. <li>lorem ipsum doloret</li>
  659. <li>lorem ipsum doloret</li>
  660. <li>lorem ipsum doloret</li>
  661. </ol>
  662. </div>
  663. <div class="col-md-4 markdown">
  664. <h3>Unstyled list</h3>
  665. <ul class="list-unstyled">
  666. <li>lorem ipsum doloret</li>
  667. <li>lorem ipsum doloret</li>
  668. <li>lorem ipsum doloret</li>
  669. <li>lorem ipsum doloret</li>
  670. <li>lorem ipsum doloret</li>
  671. <li>lorem ipsum doloret</li>
  672. </ul>
  673. </div>
  674. <div class="col-12 markdown">
  675. <h3>Blockquote</h3>
  676. <blockquote class="blockquote">
  677. <p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! The nose?</p>
  678. <footer class="blockquote-footer">Julius Cesar</footer>
  679. </blockquote>
  680. </div>
  681. <div class="col-md-4 markdown">
  682. <h3>Text elements</h3>
  683. <div>You can use the mark tag to <mark>highlight</mark> text.</div>
  684. <div><s>This line of text is meant to be treated as deleted</s></div>
  685. <div><u>This line of text will render as underlined.</u></div>
  686. <div><small>This line of text is meant to be treated as fine print.</small></div>
  687. <div>The following snippet of text is <strong>rendered as bold text.</strong></div>
  688. <div>The following snippet of text is <em>rendered as italicized text.</em></div>
  689. <div>The following snippet of text show useful keyboard shortcut: <kbd>⌘</kbd> + <kbd>C</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
  690. </div>
  691. <div class="col-md-4 markdown">
  692. <h3>Text color</h3>
  693. <div class="text-muted">This is an example of muted text.</div>
  694. <div class="text-success">This is an example of success text.</div>
  695. <div class="text-info">This is an example of info text.</div>
  696. <div class="text-warning">This is an example of warning text.</div>
  697. <div class="text-danger">This is an example of danger text.</div>
  698. </div>
  699. <div class="col-md-4 markdown">
  700. <h3>Addresses</h3>
  701. <address><strong>Twitter, Inc. <br>
  702. </strong>1355 Market Street, Suite 900 <br>
  703. San Francisco, CA 94103 <br>
  704. <abbr title="Phone">P: </abbr>(123) 456 7890
  705. </address>
  706. <address><strong>Full name <br>
  707. </strong><a href="mailto:#">first.last@example.com</a></address>
  708. </div>
  709. </div>
  710. </div>
  711. </div>
  712. </div>
  713. </div>
  714. <footer class="footer footer-transparent d-print-none">
  715. <div class="container-xl">
  716. <div class="row text-center align-items-center flex-row-reverse">
  717. <div class="col-lg-auto ms-lg-auto">
  718. <ul class="list-inline list-inline-dots mb-0">
  719. <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
  720. <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
  721. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  722. <li class="list-inline-item">
  723. <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
  724. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  725. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  726. Sponsor
  727. </a>
  728. </li>
  729. </ul>
  730. </div>
  731. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  732. <ul class="list-inline list-inline-dots mb-0">
  733. <li class="list-inline-item">
  734. Copyright &copy; 2023
  735. <a href="." class="link-secondary">Tabler</a>.
  736. All rights reserved.
  737. </li>
  738. <li class="list-inline-item">
  739. <a href="./changelog.html" class="link-secondary" rel="noopener">
  740. v1.0.0-beta19
  741. </a>
  742. </li>
  743. </ul>
  744. </div>
  745. </div>
  746. </div>
  747. </footer>
  748. </div>
  749. </div>
  750. <!-- Libs JS -->
  751. <!-- Tabler Core -->
  752. <script src="./dist/js/tabler.min.js?1684106062" defer></script>
  753. <script src="./dist/js/demo.min.js?1684106062" defer></script>
  754. </body>
  755. </html>