timelines.html 119 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-beta17
  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>Timelines - 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?1674944402" rel="stylesheet"/>
  18. <link href="../dist/css/tabler-flags.min.css?1674944402" rel="stylesheet"/>
  19. <link href="../dist/css/tabler-payments.min.css?1674944402" rel="stylesheet"/>
  20. <link href="../dist/css/tabler-vendors.min.css?1674944402" rel="stylesheet"/>
  21. <link href="../dist/css/demo.min.css?1674944402" 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?1674944402"></script>
  34. <div class="page">
  35. <!-- Navbar -->
  36. <header class="navbar navbar-expand-md navbar-light 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 0 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 navbar-light">
  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 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="../empty.html">
  205. Empty page
  206. </a>
  207. <a class="dropdown-item" href="../accordion.html">
  208. Accordion
  209. </a>
  210. <a class="dropdown-item" href="../blank.html">
  211. Blank page
  212. </a>
  213. <a class="dropdown-item" href="../badges.html">
  214. Badges
  215. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  216. </a>
  217. <a class="dropdown-item" href="../buttons.html">
  218. Buttons
  219. </a>
  220. <div class="dropend">
  221. <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  222. Cards
  223. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  224. </a>
  225. <div class="dropdown-menu">
  226. <a href="../cards.html" class="dropdown-item">
  227. Sample cards
  228. </a>
  229. <a href="../card-actions.html" class="dropdown-item">
  230. Card actions
  231. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  232. </a>
  233. <a href="../cards-masonry.html" class="dropdown-item">
  234. Cards Masonry
  235. </a>
  236. </div>
  237. </div>
  238. <a class="dropdown-item" href="../colors.html">
  239. Colors
  240. </a>
  241. <a class="dropdown-item" href="../datagrid.html">
  242. Data grid
  243. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  244. </a>
  245. <a class="dropdown-item" href="../datatables.html">
  246. Datatables
  247. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  248. </a>
  249. <a class="dropdown-item" href="../dropdowns.html">
  250. Dropdowns
  251. </a>
  252. <a class="dropdown-item" href="../modals.html">
  253. Modals
  254. </a>
  255. <a class="dropdown-item" href="../maps.html">
  256. Maps
  257. </a>
  258. <a class="dropdown-item" href="../map-fullsize.html">
  259. Map fullsize
  260. </a>
  261. <a class="dropdown-item" href="../maps-vector.html">
  262. Vector maps
  263. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  264. </a>
  265. <a class="dropdown-item" href="../navigation.html">
  266. Navigation
  267. </a>
  268. <a class="dropdown-item" href="../charts.html">
  269. Charts
  270. </a>
  271. </div>
  272. <div class="dropdown-menu-column">
  273. <a class="dropdown-item" href="../pagination.html">
  274. <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
  275. Pagination
  276. </a>
  277. <a class="dropdown-item" href="../placeholder.html">
  278. Placeholder
  279. </a>
  280. <a class="dropdown-item" href="../steps.html">
  281. Steps
  282. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  283. </a>
  284. <a class="dropdown-item" href="../tabs.html">
  285. Tabs
  286. </a>
  287. <a class="dropdown-item" href="../tables.html">
  288. Tables
  289. </a>
  290. <a class="dropdown-item" href="../carousel.html">
  291. Carousel
  292. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  293. </a>
  294. <a class="dropdown-item" href="../lists.html">
  295. Lists
  296. </a>
  297. <a class="dropdown-item" href="../typography.html">
  298. Typography
  299. </a>
  300. <a class="dropdown-item" href="../offcanvas.html">
  301. Offcanvas
  302. </a>
  303. <a class="dropdown-item" href="../markdown.html">
  304. Markdown
  305. </a>
  306. <a class="dropdown-item" href="../dropzone.html">
  307. Dropzone
  308. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  309. </a>
  310. <a class="dropdown-item" href="../lightbox.html">
  311. Lightbox
  312. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  313. </a>
  314. <a class="dropdown-item" href="../tinymce.html">
  315. TinyMCE
  316. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  317. </a>
  318. <a class="dropdown-item" href="../inline-player.html">
  319. Inline player
  320. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  321. </a>
  322. <div class="dropend">
  323. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  324. Authentication
  325. </a>
  326. <div class="dropdown-menu">
  327. <a href="../sign-in.html" class="dropdown-item">
  328. Sign in
  329. </a>
  330. <a href="../sign-in-link.html" class="dropdown-item">
  331. Sign in link
  332. </a>
  333. <a href="../sign-in-illustration.html" class="dropdown-item">
  334. Sign in with illustration
  335. </a>
  336. <a href="../sign-in-cover.html" class="dropdown-item">
  337. Sign in with cover
  338. </a>
  339. <a href="../sign-up.html" class="dropdown-item">
  340. Sign up
  341. </a>
  342. <a href="../forgot-password.html" class="dropdown-item">
  343. Forgot password
  344. </a>
  345. <a href="../terms-of-service.html" class="dropdown-item">
  346. Terms of service
  347. </a>
  348. <a href="../auth-lock.html" class="dropdown-item">
  349. Lock screen
  350. </a>
  351. </div>
  352. </div>
  353. <div class="dropend">
  354. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  355. <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
  356. <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>
  357. Error pages
  358. </a>
  359. <div class="dropdown-menu">
  360. <a href="../error-404.html" class="dropdown-item">
  361. 404 page
  362. </a>
  363. <a href="../error-500.html" class="dropdown-item">
  364. 500 page
  365. </a>
  366. <a href="../error-maintenance.html" class="dropdown-item">
  367. Maintenance page
  368. </a>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. </div>
  374. </li>
  375. <li class="nav-item">
  376. <a class="nav-link" href="../form-elements.html" >
  377. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
  378. <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>
  379. </span>
  380. <span class="nav-link-title">
  381. Form elements
  382. </span>
  383. </a>
  384. </li>
  385. <li class="nav-item dropdown">
  386. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  387. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
  388. <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>
  389. </span>
  390. <span class="nav-link-title">
  391. Extra
  392. </span>
  393. </a>
  394. <div class="dropdown-menu">
  395. <div class="dropdown-menu-columns">
  396. <div class="dropdown-menu-column">
  397. <a class="dropdown-item" href="../activity.html">
  398. Activity
  399. </a>
  400. <a class="dropdown-item" href="../gallery.html">
  401. Gallery
  402. </a>
  403. <a class="dropdown-item" href="../invoice.html">
  404. Invoice
  405. </a>
  406. <a class="dropdown-item" href="../search-results.html">
  407. Search results
  408. </a>
  409. <a class="dropdown-item" href="../pricing.html">
  410. Pricing cards
  411. </a>
  412. <a class="dropdown-item" href="../pricing-table.html">
  413. Pricing table
  414. </a>
  415. <a class="dropdown-item" href="../faq.html">
  416. FAQ
  417. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  418. </a>
  419. <a class="dropdown-item" href="../users.html">
  420. Users
  421. </a>
  422. <a class="dropdown-item" href="../license.html">
  423. License
  424. </a>
  425. <a class="dropdown-item" href="../logs.html">
  426. Logs
  427. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  428. </a>
  429. </div>
  430. <div class="dropdown-menu-column">
  431. <a class="dropdown-item" href="../music.html">
  432. Music
  433. </a>
  434. <a class="dropdown-item" href="../photogrid.html">
  435. Photogrid
  436. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  437. </a>
  438. <a class="dropdown-item" href="../tasks.html">
  439. Tasks
  440. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  441. </a>
  442. <a class="dropdown-item" href="../uptime.html">
  443. Uptime monitor
  444. </a>
  445. <a class="dropdown-item" href="../widgets.html">
  446. Widgets
  447. </a>
  448. <a class="dropdown-item" href="../wizard.html">
  449. Wizard
  450. </a>
  451. <a class="dropdown-item" href="../settings.html">
  452. Settings
  453. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  454. </a>
  455. <a class="dropdown-item" href="../trial-ended.html">
  456. Trial ended
  457. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  458. </a>
  459. <a class="dropdown-item" href="../job-listing.html">
  460. Job listing
  461. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  462. </a>
  463. <a class="dropdown-item" href="../page-loader.html">
  464. Page loader
  465. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  466. </a>
  467. </div>
  468. </div>
  469. </div>
  470. </li>
  471. <li class="nav-item dropdown">
  472. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  473. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
  474. <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>
  475. </span>
  476. <span class="nav-link-title">
  477. Layout
  478. </span>
  479. </a>
  480. <div class="dropdown-menu">
  481. <div class="dropdown-menu-columns">
  482. <div class="dropdown-menu-column">
  483. <a class="dropdown-item" href="../layout-horizontal.html">
  484. Horizontal
  485. </a>
  486. <a class="dropdown-item" href="../layout-boxed.html">
  487. Boxed
  488. <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
  489. </a>
  490. <a class="dropdown-item" href="../layout-vertical.html">
  491. Vertical
  492. </a>
  493. <a class="dropdown-item" href="../layout-vertical-transparent.html">
  494. Vertical transparent
  495. </a>
  496. <a class="dropdown-item" href="../layout-vertical-right.html">
  497. Right vertical
  498. </a>
  499. <a class="dropdown-item" href="../layout-condensed.html">
  500. Condensed
  501. </a>
  502. <a class="dropdown-item" href="../layout-combo.html">
  503. Combined
  504. </a>
  505. </div>
  506. <div class="dropdown-menu-column">
  507. <a class="dropdown-item" href="../layout-navbar-dark.html">
  508. Navbar dark
  509. </a>
  510. <a class="dropdown-item" href="../layout-navbar-sticky.html">
  511. Navbar sticky
  512. </a>
  513. <a class="dropdown-item" href="../layout-navbar-overlap.html">
  514. Navbar overlap
  515. </a>
  516. <a class="dropdown-item" href="../layout-rtl.html">
  517. RTL mode
  518. </a>
  519. <a class="dropdown-item" href="../layout-fluid.html">
  520. Fluid
  521. </a>
  522. <a class="dropdown-item" href="../layout-fluid-vertical.html">
  523. Fluid vertical
  524. </a>
  525. </div>
  526. </div>
  527. </div>
  528. </li>
  529. <li class="nav-item">
  530. <a class="nav-link" href="../icons.html" >
  531. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
  532. <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>
  533. </span>
  534. <span class="nav-link-title">
  535. 3222 icons
  536. </span>
  537. </a>
  538. </li>
  539. <li class="nav-item active dropdown">
  540. <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  541. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
  542. <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>
  543. </span>
  544. <span class="nav-link-title">
  545. Help
  546. </span>
  547. </a>
  548. <div class="dropdown-menu">
  549. <a class="dropdown-item" href="../docs/">
  550. Documentation
  551. </a>
  552. <a class="dropdown-item" href="../changelog.html">
  553. Changelog
  554. </a>
  555. <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
  556. Source code
  557. </a>
  558. <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
  559. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  560. <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>
  561. Sponsor project!
  562. </a>
  563. </div>
  564. </li>
  565. </ul>
  566. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  567. <form action="../" method="get" autocomplete="off" novalidate>
  568. <div class="input-icon">
  569. <span class="input-icon-addon">
  570. <!-- Download SVG icon from http://tabler-icons.io/i/search -->
  571. <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>
  572. </span>
  573. <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
  574. </div>
  575. </form>
  576. </div>
  577. </div>
  578. </div>
  579. </div>
  580. </header>
  581. <div class="page-wrapper">
  582. <!-- Page header -->
  583. <div class="page-header d-print-none">
  584. <div class="container-xl">
  585. <div class="row g-2 align-items-center">
  586. <div class="col">
  587. <h2 class="page-title">
  588. Documentation
  589. </h2>
  590. </div>
  591. </div>
  592. </div>
  593. </div>
  594. <!-- Page body -->
  595. <div class="page-body">
  596. <div class="container-xl">
  597. <div class="row gx-lg-5">
  598. <div class="d-none d-lg-block col-lg-3">
  599. <ul class="nav nav-pills nav-vertical">
  600. <li class="nav-item">
  601. <a href="../docs/" class="nav-link">
  602. Introduction
  603. </a>
  604. </li>
  605. <li class="nav-item">
  606. <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  607. Getting started
  608. <span class="nav-link-toggle"></span>
  609. </a>
  610. <ul class="nav nav-pills collapse" id="menu-base">
  611. <li class="nav-item">
  612. <a href="../docs/getting-started.html" class="nav-link">
  613. Getting Started
  614. </a>
  615. </li>
  616. <li class="nav-item">
  617. <a href="../docs/download.html" class="nav-link">
  618. Download
  619. </a>
  620. </li>
  621. <li class="nav-item">
  622. <a href="../docs/browser-support.html" class="nav-link">
  623. Browser Support
  624. </a>
  625. </li>
  626. </ul>
  627. </li>
  628. <li class="nav-item">
  629. <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  630. Content
  631. <span class="nav-link-toggle"></span>
  632. </a>
  633. <ul class="nav nav-pills collapse" id="menu-content">
  634. <li class="nav-item">
  635. <a href="../docs/colors.html" class="nav-link">
  636. Colors
  637. </a>
  638. </li>
  639. <li class="nav-item">
  640. <a href="../docs/typography.html" class="nav-link">
  641. Typography
  642. </a>
  643. </li>
  644. <li class="nav-item">
  645. <a href="../docs/icons.html" class="nav-link">
  646. Icons
  647. </a>
  648. </li>
  649. <li class="nav-item">
  650. <a href="../docs/customize.html" class="nav-link">
  651. Customize Tabler
  652. </a>
  653. </li>
  654. </ul>
  655. </li>
  656. <li class="nav-item">
  657. <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  658. Layout
  659. <span class="nav-link-toggle"></span>
  660. </a>
  661. <ul class="nav nav-pills collapse" id="menu-layout">
  662. <li class="nav-item">
  663. <a href="../docs/page-headers.html" class="nav-link">
  664. Page headers
  665. </a>
  666. </li>
  667. </ul>
  668. </li>
  669. <li class="nav-item">
  670. <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  671. Form components
  672. <span class="nav-link-toggle"></span>
  673. </a>
  674. <ul class="nav nav-pills collapse" id="menu-forms">
  675. <li class="nav-item">
  676. <a href="../docs/form-elements.html" class="nav-link">
  677. Form elements
  678. </a>
  679. </li>
  680. <li class="nav-item">
  681. <a href="../docs/form-helpers.html" class="nav-link">
  682. Form helpers
  683. </a>
  684. </li>
  685. <li class="nav-item">
  686. <a href="../docs/form-validation.html" class="nav-link">
  687. Validation states
  688. </a>
  689. </li>
  690. <li class="nav-item">
  691. <a href="../docs/form-image-check.html" class="nav-link">
  692. Image check
  693. </a>
  694. </li>
  695. <li class="nav-item">
  696. <a href="../docs/form-color-check.html" class="nav-link">
  697. Color check
  698. </a>
  699. </li>
  700. <li class="nav-item">
  701. <a href="../docs/form-selectboxes.html" class="nav-link">
  702. Form selectboxes
  703. </a>
  704. </li>
  705. <li class="nav-item">
  706. <a href="../docs/form-fieldset.html" class="nav-link">
  707. Form fieldset
  708. </a>
  709. </li>
  710. </ul>
  711. </li>
  712. <li class="nav-item">
  713. <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  714. Components
  715. <span class="nav-link-toggle"></span>
  716. </a>
  717. <ul class="nav nav-pills collapse" id="menu-components">
  718. <li class="nav-item">
  719. <a href="../docs/alerts.html" class="nav-link">
  720. Alerts
  721. </a>
  722. </li>
  723. <li class="nav-item">
  724. <a href="../docs/avatars.html" class="nav-link">
  725. Avatars
  726. </a>
  727. </li>
  728. <li class="nav-item">
  729. <a href="../docs/badges.html" class="nav-link">
  730. Badges
  731. </a>
  732. </li>
  733. <li class="nav-item">
  734. <a href="../docs/breadcrumb.html" class="nav-link">
  735. Breadcrumb
  736. </a>
  737. </li>
  738. <li class="nav-item">
  739. <a href="../docs/buttons.html" class="nav-link">
  740. Buttons
  741. </a>
  742. </li>
  743. <li class="nav-item">
  744. <a href="../docs/cards.html" class="nav-link">
  745. Cards
  746. </a>
  747. </li>
  748. <li class="nav-item">
  749. <a href="../docs/carousel.html" class="nav-link">
  750. Carousel
  751. </a>
  752. </li>
  753. <li class="nav-item">
  754. <a href="../docs/datagrid.html" class="nav-link">
  755. Data grid
  756. </a>
  757. </li>
  758. <li class="nav-item">
  759. <a href="../docs/dropdowns.html" class="nav-link">
  760. Dropdowns
  761. </a>
  762. </li>
  763. <li class="nav-item">
  764. <a href="../docs/divider.html" class="nav-link">
  765. Divider
  766. </a>
  767. </li>
  768. <li class="nav-item">
  769. <a href="../docs/empty.html" class="nav-link">
  770. Empty states
  771. </a>
  772. </li>
  773. <li class="nav-item">
  774. <a href="../docs/modals.html" class="nav-link">
  775. Modals
  776. </a>
  777. </li>
  778. <li class="nav-item">
  779. <a href="../docs/page-headers.html" class="nav-link">
  780. Page headers
  781. </a>
  782. </li>
  783. <li class="nav-item">
  784. <a href="../docs/progress.html" class="nav-link">
  785. Progress
  786. </a>
  787. </li>
  788. <li class="nav-item">
  789. <a href="../docs/range-slider.html" class="nav-link">
  790. Range slider
  791. </a>
  792. </li>
  793. <li class="nav-item">
  794. <a href="../docs/ribbons.html" class="nav-link">
  795. Ribbons
  796. </a>
  797. </li>
  798. <li class="nav-item">
  799. <a href="../docs/placeholder.html" class="nav-link">
  800. Placeholder
  801. </a>
  802. </li>
  803. <li class="nav-item">
  804. <a href="../docs/spinners.html" class="nav-link">
  805. Spinners
  806. </a>
  807. </li>
  808. <li class="nav-item">
  809. <a href="../docs/statuses.html" class="nav-link">
  810. Statuses
  811. </a>
  812. </li>
  813. <li class="nav-item">
  814. <a href="../docs/steps.html" class="nav-link">
  815. Steps
  816. </a>
  817. </li>
  818. <li class="nav-item">
  819. <a href="../docs/switch-icon.html" class="nav-link">
  820. Switch icon
  821. </a>
  822. </li>
  823. <li class="nav-item">
  824. <a href="../docs/tables.html" class="nav-link">
  825. Tables
  826. </a>
  827. </li>
  828. <li class="nav-item">
  829. <a href="../docs/tabs.html" class="nav-link">
  830. Tabs
  831. </a>
  832. </li>
  833. <li class="nav-item">
  834. <a href="../docs/timelines.html" class="nav-link">
  835. Timelines
  836. </a>
  837. </li>
  838. <li class="nav-item">
  839. <a href="../docs/toasts.html" class="nav-link">
  840. Toasts
  841. </a>
  842. </li>
  843. <li class="nav-item">
  844. <a href="../docs/tracking.html" class="nav-link">
  845. Tracking
  846. </a>
  847. </li>
  848. <li class="nav-item">
  849. <a href="../docs/tooltips.html" class="nav-link">
  850. Tooltips
  851. </a>
  852. </li>
  853. <li class="nav-item">
  854. <a href="../docs/popover.html" class="nav-link">
  855. Popover
  856. </a>
  857. </li>
  858. </ul>
  859. </li>
  860. <li class="nav-item">
  861. <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  862. Utilities
  863. <span class="nav-link-toggle"></span>
  864. </a>
  865. <ul class="nav nav-pills collapse" id="menu-utils">
  866. <li class="nav-item">
  867. <a href="../docs/borders.html" class="nav-link">
  868. Borders
  869. </a>
  870. </li>
  871. <li class="nav-item">
  872. <a href="../docs/cursors.html" class="nav-link">
  873. Cursors
  874. </a>
  875. </li>
  876. <li class="nav-item">
  877. <a href="../docs/interactions.html" class="nav-link">
  878. Interactions
  879. </a>
  880. </li>
  881. </ul>
  882. </li>
  883. <li class="nav-item">
  884. <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  885. Plugins
  886. <span class="nav-link-toggle"></span>
  887. </a>
  888. <ul class="nav nav-pills collapse" id="menu-plugins">
  889. <li class="nav-item">
  890. <a href="../docs/autosize.html" class="nav-link">
  891. Autosize
  892. </a>
  893. </li>
  894. <li class="nav-item">
  895. <a href="../docs/input-mask.html" class="nav-link">
  896. Form input mask
  897. </a>
  898. </li>
  899. <li class="nav-item">
  900. <a href="../docs/flags.html" class="nav-link">
  901. Flags
  902. </a>
  903. </li>
  904. <li class="nav-item">
  905. <a href="../docs/payments.html" class="nav-link">
  906. Payments
  907. </a>
  908. </li>
  909. <li class="nav-item">
  910. <a href="../docs/charts.html" class="nav-link">
  911. Charts
  912. </a>
  913. </li>
  914. <li class="nav-item">
  915. <a href="../docs/dropzone.html" class="nav-link">
  916. Dropzone
  917. </a>
  918. </li>
  919. <li class="nav-item">
  920. <a href="../docs/inline-player.html" class="nav-link">
  921. Inline player
  922. </a>
  923. </li>
  924. <li class="nav-item">
  925. <a href="../docs/tinymce.html" class="nav-link">
  926. TinyMCE
  927. </a>
  928. </li>
  929. </ul>
  930. </li>
  931. <li class="nav-item">
  932. <a href="../changelog.html" class="nav-link">
  933. Changelog
  934. <span class="badge bg-primary-lt ms-auto">1.0.0-beta17</span>
  935. </a>
  936. </li>
  937. </ul>
  938. </div>
  939. <div class="col-lg-9">
  940. <div class="card card-lg">
  941. <div class="card-body">
  942. <div class="markdown">
  943. <div>
  944. <div class="d-flex mb-3">
  945. <h1 class="m-0">Timelines</h1>
  946. </div>
  947. <p class="h3 fw-normal mb-4 text-muted">A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.</p>
  948. </div>
  949. <h2 id="timeline">Timeline</h2>
  950. <p>The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.</p>
  951. <div class="example no_toc_section example-bg">
  952. <div class="example-content">
  953. <div class="example-column example-column-2">
  954. <ul class="timeline">
  955. <li class="timeline-event">
  956. <div class="timeline-event-icon bg-twitter-lt"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
  957. <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
  958. </div>
  959. <div class="card timeline-event-card">
  960. <div class="card-body">
  961. <div class="text-muted float-end">10 hrs ago</div>
  962. <h4>+1150 Followers</h4>
  963. <p class="text-muted">You’re getting more and more followers, keep it up!</p>
  964. </div>
  965. </div>
  966. </li>
  967. <li class="timeline-event">
  968. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/briefcase -->
  969. <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="M3 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" /><path d="M12 12l0 .01" /><path d="M3 13a20 20 0 0 0 18 0" /></svg>
  970. </div>
  971. <div class="card timeline-event-card">
  972. <div class="card-body">
  973. <div class="text-muted float-end">2 hrs ago</div>
  974. <h4>+3 New Products were added!</h4>
  975. <p class="text-muted">Congratulations!</p>
  976. </div>
  977. </div>
  978. </li>
  979. <li class="timeline-event">
  980. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/check -->
  981. <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 12l5 5l10 -10" /></svg>
  982. </div>
  983. <div class="card timeline-event-card">
  984. <div class="card-body">
  985. <div class="text-muted float-end">1 day ago</div>
  986. <h4>Database backup completed!</h4>
  987. <p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p>
  988. </div>
  989. </div>
  990. </li>
  991. <li class="timeline-event">
  992. <div class="timeline-event-icon bg-facebook-lt"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
  993. <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="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
  994. </div>
  995. <div class="card timeline-event-card">
  996. <div class="card-body">
  997. <div class="text-muted float-end">1 day ago</div>
  998. <h4>+290 Page Likes</h4>
  999. <p class="text-muted">This is great, keep it up!</p>
  1000. </div>
  1001. </div>
  1002. </li>
  1003. <li class="timeline-event">
  1004. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/user-plus -->
  1005. <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 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 11h6m-3 -3v6" /></svg>
  1006. </div>
  1007. <div class="card timeline-event-card">
  1008. <div class="card-body">
  1009. <div class="text-muted float-end">2 days ago</div>
  1010. <h4>+3 Friend Requests</h4>
  1011. <div class="avatar-list mt-3">
  1012. <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
  1013. <span class="badge bg-success"></span></span>
  1014. <span class="avatar">
  1015. <span class="badge bg-success"></span>JL</span>
  1016. <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
  1017. <span class="badge bg-success"></span></span>
  1018. </div>
  1019. </div>
  1020. </div>
  1021. </li>
  1022. <li class="timeline-event">
  1023. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/photo -->
  1024. <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="M15 8l.01 0" /><path d="M4 4m0 3a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3z" /><path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5" /><path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2" /></svg>
  1025. </div>
  1026. <div class="card timeline-event-card">
  1027. <div class="card-body">
  1028. <div class="text-muted float-end">3 days ago</div>
  1029. <h4>+2 New photos</h4>
  1030. <div class="mt-3">
  1031. <div class="row g-2">
  1032. <div class="col-6">
  1033. <div class="media media-2x1 rounded">
  1034. <a class="media-content" style="background-image: url(../static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg
  1035. )"></a>
  1036. </div>
  1037. </div>
  1038. <div class="col-6">
  1039. <div class="media media-2x1 rounded">
  1040. <a class="media-content" style="background-image: url(../static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg
  1041. )"></a>
  1042. </div>
  1043. </div>
  1044. </div>
  1045. </div>
  1046. </div>
  1047. </div>
  1048. </li>
  1049. <li class="timeline-event">
  1050. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
  1051. <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
  1052. </div>
  1053. <div class="card timeline-event-card">
  1054. <div class="card-body">
  1055. <div class="text-muted float-end">2 weeks ago</div>
  1056. <h4>System updated to v2.02</h4>
  1057. <p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity
  1058. page</a>.</p>
  1059. </div>
  1060. </div>
  1061. </li>
  1062. </ul>
  1063. </div>
  1064. </div>
  1065. </div>
  1066. <div class="example-code">
  1067. <figure class="highlight">
  1068. <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"timeline"</span><span class="nt">&gt;</span>
  1069. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1070. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon bg-twitter-lt"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --&gt;</span>
  1071. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1072. <span class="nt">&lt;/div&gt;</span>
  1073. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1074. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1075. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>10 hrs ago<span class="nt">&lt;/div&gt;</span>
  1076. <span class="nt">&lt;h4&gt;</span>+1150 Followers<span class="nt">&lt;/h4&gt;</span>
  1077. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>You’re getting more and more followers, keep it up!<span class="nt">&lt;/p&gt;</span>
  1078. <span class="nt">&lt;/div&gt;</span>
  1079. <span class="nt">&lt;/div&gt;</span>
  1080. <span class="nt">&lt;/li&gt;</span>
  1081. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1082. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/briefcase --&gt;</span>
  1083. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 12l0 .01"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 13a20 20 0 0 0 18 0"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1084. <span class="nt">&lt;/div&gt;</span>
  1085. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1086. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1087. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/div&gt;</span>
  1088. <span class="nt">&lt;h4&gt;</span>+3 New Products were added!<span class="nt">&lt;/h4&gt;</span>
  1089. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Congratulations!<span class="nt">&lt;/p&gt;</span>
  1090. <span class="nt">&lt;/div&gt;</span>
  1091. <span class="nt">&lt;/div&gt;</span>
  1092. <span class="nt">&lt;/li&gt;</span>
  1093. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1094. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
  1095. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12l5 5l10 -10"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1096. <span class="nt">&lt;/div&gt;</span>
  1097. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1098. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1099. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1100. <span class="nt">&lt;h4&gt;</span>Database backup completed!<span class="nt">&lt;/h4&gt;</span>
  1101. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Download the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>latest backup<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  1102. <span class="nt">&lt;/div&gt;</span>
  1103. <span class="nt">&lt;/div&gt;</span>
  1104. <span class="nt">&lt;/li&gt;</span>
  1105. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1106. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon bg-facebook-lt"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --&gt;</span>
  1107. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1108. <span class="nt">&lt;/div&gt;</span>
  1109. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1110. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1111. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1112. <span class="nt">&lt;h4&gt;</span>+290 Page Likes<span class="nt">&lt;/h4&gt;</span>
  1113. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is great, keep it up!<span class="nt">&lt;/p&gt;</span>
  1114. <span class="nt">&lt;/div&gt;</span>
  1115. <span class="nt">&lt;/div&gt;</span>
  1116. <span class="nt">&lt;/li&gt;</span>
  1117. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1118. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user-plus --&gt;</span>
  1119. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M16 11h6m-3 -3v6"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1120. <span class="nt">&lt;/div&gt;</span>
  1121. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1122. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1123. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
  1124. <span class="nt">&lt;h4&gt;</span>+3 Friend Requests<span class="nt">&lt;/h4&gt;</span>
  1125. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list mt-3"</span><span class="nt">&gt;</span>
  1126. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;</span>
  1127. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;&lt;/span&gt;</span>
  1128. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
  1129. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
  1130. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;</span>
  1131. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;&lt;/span&gt;</span>
  1132. <span class="nt">&lt;/div&gt;</span>
  1133. <span class="nt">&lt;/div&gt;</span>
  1134. <span class="nt">&lt;/div&gt;</span>
  1135. <span class="nt">&lt;/li&gt;</span>
  1136. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1137. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/photo --&gt;</span>
  1138. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M15 8l.01 0"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M4 4m0 3a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3z"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M4 15l4 -4a3 5 0 0 1 3 0l5 5"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M14 14l1 -1a3 5 0 0 1 3 0l2 2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1139. <span class="nt">&lt;/div&gt;</span>
  1140. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1141. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1142. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
  1143. <span class="nt">&lt;h4&gt;</span>+2 New photos<span class="nt">&lt;/h4&gt;</span>
  1144. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-3"</span><span class="nt">&gt;</span>
  1145. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
  1146. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1147. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1148. <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-content"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/a&gt;</span>
  1149. <span class="nt">&lt;/div&gt;</span>
  1150. <span class="nt">&lt;/div&gt;</span>
  1151. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1152. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1153. <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-content"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/a&gt;</span>
  1154. <span class="nt">&lt;/div&gt;</span>
  1155. <span class="nt">&lt;/div&gt;</span>
  1156. <span class="nt">&lt;/div&gt;</span>
  1157. <span class="nt">&lt;/div&gt;</span>
  1158. <span class="nt">&lt;/div&gt;</span>
  1159. <span class="nt">&lt;/div&gt;</span>
  1160. <span class="nt">&lt;/li&gt;</span>
  1161. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1162. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
  1163. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1164. <span class="nt">&lt;/div&gt;</span>
  1165. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1166. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1167. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>2 weeks ago<span class="nt">&lt;/div&gt;</span>
  1168. <span class="nt">&lt;h4&gt;</span>System updated to v2.02<span class="nt">&lt;/h4&gt;</span>
  1169. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Check the complete changelog at the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>activity
  1170. page<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  1171. <span class="nt">&lt;/div&gt;</span>
  1172. <span class="nt">&lt;/div&gt;</span>
  1173. <span class="nt">&lt;/li&gt;</span>
  1174. <span class="nt">&lt;/ul&gt;</span></code></pre>
  1175. </figure>
  1176. </div>
  1177. <h2 id="simple-timeline">Simple timeline</h2>
  1178. <p>Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.</p>
  1179. <div class="example no_toc_section example-bg">
  1180. <div class="example-content">
  1181. <div class="example-column example-column-2">
  1182. <ul class="timeline timeline-simple">
  1183. <li class="timeline-event">
  1184. <div class="timeline-event-icon bg-twitter-lt"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
  1185. <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
  1186. </div>
  1187. <div class="card timeline-event-card">
  1188. <div class="card-body">
  1189. <div class="text-muted float-end">10 hrs ago</div>
  1190. <h4>+1150 Followers</h4>
  1191. <p class="text-muted">You’re getting more and more followers, keep it up!</p>
  1192. </div>
  1193. </div>
  1194. </li>
  1195. <li class="timeline-event">
  1196. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/briefcase -->
  1197. <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="M3 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /><path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" /><path d="M12 12l0 .01" /><path d="M3 13a20 20 0 0 0 18 0" /></svg>
  1198. </div>
  1199. <div class="card timeline-event-card">
  1200. <div class="card-body">
  1201. <div class="text-muted float-end">2 hrs ago</div>
  1202. <h4>+3 New Products were added!</h4>
  1203. <p class="text-muted">Congratulations!</p>
  1204. </div>
  1205. </div>
  1206. </li>
  1207. <li class="timeline-event">
  1208. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/check -->
  1209. <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 12l5 5l10 -10" /></svg>
  1210. </div>
  1211. <div class="card timeline-event-card">
  1212. <div class="card-body">
  1213. <div class="text-muted float-end">1 day ago</div>
  1214. <h4>Database backup completed!</h4>
  1215. <p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p>
  1216. </div>
  1217. </div>
  1218. </li>
  1219. <li class="timeline-event">
  1220. <div class="timeline-event-icon bg-facebook-lt"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
  1221. <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="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
  1222. </div>
  1223. <div class="card timeline-event-card">
  1224. <div class="card-body">
  1225. <div class="text-muted float-end">1 day ago</div>
  1226. <h4>+290 Page Likes</h4>
  1227. <p class="text-muted">This is great, keep it up!</p>
  1228. </div>
  1229. </div>
  1230. </li>
  1231. <li class="timeline-event">
  1232. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/user-plus -->
  1233. <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 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 11h6m-3 -3v6" /></svg>
  1234. </div>
  1235. <div class="card timeline-event-card">
  1236. <div class="card-body">
  1237. <div class="text-muted float-end">2 days ago</div>
  1238. <h4>+3 Friend Requests</h4>
  1239. <div class="avatar-list mt-3">
  1240. <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
  1241. <span class="badge bg-success"></span></span>
  1242. <span class="avatar">
  1243. <span class="badge bg-success"></span>JL</span>
  1244. <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
  1245. <span class="badge bg-success"></span></span>
  1246. </div>
  1247. </div>
  1248. </div>
  1249. </li>
  1250. <li class="timeline-event">
  1251. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/photo -->
  1252. <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="M15 8l.01 0" /><path d="M4 4m0 3a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3z" /><path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5" /><path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2" /></svg>
  1253. </div>
  1254. <div class="card timeline-event-card">
  1255. <div class="card-body">
  1256. <div class="text-muted float-end">3 days ago</div>
  1257. <h4>+2 New photos</h4>
  1258. <div class="mt-3">
  1259. <div class="row g-2">
  1260. <div class="col-6">
  1261. <div class="media media-2x1 rounded">
  1262. <a class="media-content" style="background-image: url(../static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg
  1263. )"></a>
  1264. </div>
  1265. </div>
  1266. <div class="col-6">
  1267. <div class="media media-2x1 rounded">
  1268. <a class="media-content" style="background-image: url(../static/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg
  1269. )"></a>
  1270. </div>
  1271. </div>
  1272. </div>
  1273. </div>
  1274. </div>
  1275. </div>
  1276. </li>
  1277. <li class="timeline-event">
  1278. <div class="timeline-event-icon"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
  1279. <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
  1280. </div>
  1281. <div class="card timeline-event-card">
  1282. <div class="card-body">
  1283. <div class="text-muted float-end">2 weeks ago</div>
  1284. <h4>System updated to v2.02</h4>
  1285. <p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity
  1286. page</a>.</p>
  1287. </div>
  1288. </div>
  1289. </li>
  1290. </ul>
  1291. </div>
  1292. </div>
  1293. </div>
  1294. <div class="example-code">
  1295. <figure class="highlight">
  1296. <pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"timeline timeline-simple"</span><span class="nt">&gt;</span>
  1297. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1298. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon bg-twitter-lt"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --&gt;</span>
  1299. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c0 -.249 1.51 -2.772 1.818 -4.013z"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1300. <span class="nt">&lt;/div&gt;</span>
  1301. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1302. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1303. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>10 hrs ago<span class="nt">&lt;/div&gt;</span>
  1304. <span class="nt">&lt;h4&gt;</span>+1150 Followers<span class="nt">&lt;/h4&gt;</span>
  1305. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>You’re getting more and more followers, keep it up!<span class="nt">&lt;/p&gt;</span>
  1306. <span class="nt">&lt;/div&gt;</span>
  1307. <span class="nt">&lt;/div&gt;</span>
  1308. <span class="nt">&lt;/li&gt;</span>
  1309. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1310. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/briefcase --&gt;</span>
  1311. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 12l0 .01"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 13a20 20 0 0 0 18 0"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1312. <span class="nt">&lt;/div&gt;</span>
  1313. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1314. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1315. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/div&gt;</span>
  1316. <span class="nt">&lt;h4&gt;</span>+3 New Products were added!<span class="nt">&lt;/h4&gt;</span>
  1317. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Congratulations!<span class="nt">&lt;/p&gt;</span>
  1318. <span class="nt">&lt;/div&gt;</span>
  1319. <span class="nt">&lt;/div&gt;</span>
  1320. <span class="nt">&lt;/li&gt;</span>
  1321. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1322. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
  1323. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M5 12l5 5l10 -10"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1324. <span class="nt">&lt;/div&gt;</span>
  1325. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1326. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1327. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1328. <span class="nt">&lt;h4&gt;</span>Database backup completed!<span class="nt">&lt;/h4&gt;</span>
  1329. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Download the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>latest backup<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  1330. <span class="nt">&lt;/div&gt;</span>
  1331. <span class="nt">&lt;/div&gt;</span>
  1332. <span class="nt">&lt;/li&gt;</span>
  1333. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1334. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon bg-facebook-lt"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --&gt;</span>
  1335. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1336. <span class="nt">&lt;/div&gt;</span>
  1337. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1338. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1339. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1340. <span class="nt">&lt;h4&gt;</span>+290 Page Likes<span class="nt">&lt;/h4&gt;</span>
  1341. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is great, keep it up!<span class="nt">&lt;/p&gt;</span>
  1342. <span class="nt">&lt;/div&gt;</span>
  1343. <span class="nt">&lt;/div&gt;</span>
  1344. <span class="nt">&lt;/li&gt;</span>
  1345. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1346. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user-plus --&gt;</span>
  1347. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M16 11h6m-3 -3v6"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1348. <span class="nt">&lt;/div&gt;</span>
  1349. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1350. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1351. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
  1352. <span class="nt">&lt;h4&gt;</span>+3 Friend Requests<span class="nt">&lt;/h4&gt;</span>
  1353. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list mt-3"</span><span class="nt">&gt;</span>
  1354. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;</span>
  1355. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;&lt;/span&gt;</span>
  1356. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
  1357. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
  1358. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;</span>
  1359. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">&gt;&lt;/span&gt;&lt;/span&gt;</span>
  1360. <span class="nt">&lt;/div&gt;</span>
  1361. <span class="nt">&lt;/div&gt;</span>
  1362. <span class="nt">&lt;/div&gt;</span>
  1363. <span class="nt">&lt;/li&gt;</span>
  1364. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1365. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/photo --&gt;</span>
  1366. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M15 8l.01 0"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M4 4m0 3a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3z"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M4 15l4 -4a3 5 0 0 1 3 0l5 5"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M14 14l1 -1a3 5 0 0 1 3 0l2 2"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1367. <span class="nt">&lt;/div&gt;</span>
  1368. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1369. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1370. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
  1371. <span class="nt">&lt;h4&gt;</span>+2 New photos<span class="nt">&lt;/h4&gt;</span>
  1372. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-3"</span><span class="nt">&gt;</span>
  1373. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
  1374. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1375. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1376. <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-content"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/a&gt;</span>
  1377. <span class="nt">&lt;/div&gt;</span>
  1378. <span class="nt">&lt;/div&gt;</span>
  1379. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1380. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1381. <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-content"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/a&gt;</span>
  1382. <span class="nt">&lt;/div&gt;</span>
  1383. <span class="nt">&lt;/div&gt;</span>
  1384. <span class="nt">&lt;/div&gt;</span>
  1385. <span class="nt">&lt;/div&gt;</span>
  1386. <span class="nt">&lt;/div&gt;</span>
  1387. <span class="nt">&lt;/div&gt;</span>
  1388. <span class="nt">&lt;/li&gt;</span>
  1389. <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"timeline-event"</span><span class="nt">&gt;</span>
  1390. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"timeline-event-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
  1391. <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">"icon"</span> <span class="na">width=</span><span class="s">"24"</span> <span class="na">height=</span><span class="s">"24"</span> <span class="na">viewBox=</span><span class="s">"0 0 24 24"</span> <span class="na">stroke-width=</span><span class="s">"2"</span> <span class="na">stroke=</span><span class="s">"currentColor"</span> <span class="na">fill=</span><span class="s">"none"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;path</span> <span class="na">stroke=</span><span class="s">"none"</span> <span class="na">d=</span><span class="s">"M0 0h24v24H0z"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"</span> <span class="nt">/&gt;&lt;path</span> <span class="na">d=</span><span class="s">"M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1392. <span class="nt">&lt;/div&gt;</span>
  1393. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card timeline-event-card"</span><span class="nt">&gt;</span>
  1394. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1395. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted float-end"</span><span class="nt">&gt;</span>2 weeks ago<span class="nt">&lt;/div&gt;</span>
  1396. <span class="nt">&lt;h4&gt;</span>System updated to v2.02<span class="nt">&lt;/h4&gt;</span>
  1397. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Check the complete changelog at the <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>activity
  1398. page<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  1399. <span class="nt">&lt;/div&gt;</span>
  1400. <span class="nt">&lt;/div&gt;</span>
  1401. <span class="nt">&lt;/li&gt;</span>
  1402. <span class="nt">&lt;/ul&gt;</span></code></pre>
  1403. </figure>
  1404. </div>
  1405. </div>
  1406. </div>
  1407. </div>
  1408. </div>
  1409. </div>
  1410. </div>
  1411. </div>
  1412. <footer class="footer footer-transparent d-print-none">
  1413. <div class="container-xl">
  1414. <div class="row text-center align-items-center flex-row-reverse">
  1415. <div class="col-lg-auto ms-lg-auto">
  1416. <ul class="list-inline list-inline-dots mb-0">
  1417. <li class="list-inline-item"><a href="../docs/" class="link-secondary">Documentation</a></li>
  1418. <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
  1419. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  1420. <li class="list-inline-item">
  1421. <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
  1422. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  1423. <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>
  1424. Sponsor
  1425. </a>
  1426. </li>
  1427. </ul>
  1428. </div>
  1429. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  1430. <ul class="list-inline list-inline-dots mb-0">
  1431. <li class="list-inline-item">
  1432. Copyright &copy; 2023
  1433. <a href=".." class="link-secondary">Tabler</a>.
  1434. All rights reserved.
  1435. </li>
  1436. <li class="list-inline-item">
  1437. <a href="../changelog.html" class="link-secondary" rel="noopener">
  1438. v1.0.0-beta17
  1439. </a>
  1440. </li>
  1441. </ul>
  1442. </div>
  1443. </div>
  1444. </div>
  1445. </footer>
  1446. </div>
  1447. </div>
  1448. <!-- Libs JS -->
  1449. <!-- Tabler Core -->
  1450. <script src="../dist/js/tabler.min.js?1674944402" defer></script>
  1451. <script src="../dist/js/demo.min.js?1674944402" defer></script>
  1452. </body>
  1453. </html>