timelines.html 117 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-beta14
  5. * @link https://tabler.io
  6. * Copyright 2018-2022 The Tabler Authors
  7. * Copyright 2018-2022 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?1666304673" rel="stylesheet"/>
  18. <link href="../dist/css/tabler-flags.min.css?1666304673" rel="stylesheet"/>
  19. <link href="../dist/css/tabler-payments.min.css?1666304673" rel="stylesheet"/>
  20. <link href="../dist/css/tabler-vendors.min.css?1666304673" rel="stylesheet"/>
  21. <link href="../dist/css/demo.min.css?1666304673" rel="stylesheet"/>
  22. <style>
  23. @import url('https://rsms.me/inter/inter.css');
  24. :root {
  25. --tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  26. }
  27. </style>
  28. </head>
  29. <body >
  30. <script src="../dist/js/demo-theme.min.js?1666304673"></script>
  31. <div class="page">
  32. <!-- Navbar -->
  33. <header class="navbar navbar-expand-md navbar-light d-print-none">
  34. <div class="container-xl">
  35. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
  36. <span class="navbar-toggler-icon"></span>
  37. </button>
  38. <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
  39. <a href="..">
  40. <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
  41. </a>
  42. </h1>
  43. <div class="navbar-nav flex-row order-md-last">
  44. <div class="nav-item d-none d-md-flex me-3">
  45. <div class="btn-list">
  46. <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
  47. <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
  48. <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>
  49. Source code
  50. </a>
  51. <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
  52. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  53. <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.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  54. Sponsor
  55. </a>
  56. </div>
  57. </div>
  58. <div class="d-none d-md-flex">
  59. <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
  60. data-bs-placement="bottom">
  61. <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
  62. <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>
  63. </a>
  64. <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
  65. data-bs-placement="bottom">
  66. <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
  67. <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"/><circle cx="12" cy="12" r="4" /><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>
  68. </a>
  69. <div class="nav-item dropdown d-none d-md-flex me-3">
  70. <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
  71. <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
  72. <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>
  73. <span class="badge bg-red"></span>
  74. </a>
  75. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
  76. <div class="card">
  77. <div class="card-header">
  78. <h3 class="card-title">Last updates</h3>
  79. </div>
  80. <div class="list-group list-group-flush list-group-hoverable">
  81. <div class="list-group-item">
  82. <div class="row align-items-center">
  83. <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
  84. <div class="col text-truncate">
  85. <a href="#" class="text-body d-block">Example 1</a>
  86. <div class="d-block text-muted text-truncate mt-n1">
  87. Change deprecated html tags to text decoration classes (#29604)
  88. </div>
  89. </div>
  90. <div class="col-auto">
  91. <a href="#" class="list-group-item-actions">
  92. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  93. <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>
  94. </a>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="list-group-item">
  99. <div class="row align-items-center">
  100. <div class="col-auto"><span class="status-dot d-block"></span></div>
  101. <div class="col text-truncate">
  102. <a href="#" class="text-body d-block">Example 2</a>
  103. <div class="d-block text-muted text-truncate mt-n1">
  104. justify-content:between ⇒ justify-content:space-between (#29734)
  105. </div>
  106. </div>
  107. <div class="col-auto">
  108. <a href="#" class="list-group-item-actions show">
  109. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  110. <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>
  111. </a>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="list-group-item">
  116. <div class="row align-items-center">
  117. <div class="col-auto"><span class="status-dot d-block"></span></div>
  118. <div class="col text-truncate">
  119. <a href="#" class="text-body d-block">Example 3</a>
  120. <div class="d-block text-muted text-truncate mt-n1">
  121. Update change-version.js (#29736)
  122. </div>
  123. </div>
  124. <div class="col-auto">
  125. <a href="#" class="list-group-item-actions">
  126. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  127. <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>
  128. </a>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="list-group-item">
  133. <div class="row align-items-center">
  134. <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
  135. <div class="col text-truncate">
  136. <a href="#" class="text-body d-block">Example 4</a>
  137. <div class="d-block text-muted text-truncate mt-n1">
  138. Regenerate package-lock.json (#29730)
  139. </div>
  140. </div>
  141. <div class="col-auto">
  142. <a href="#" class="list-group-item-actions">
  143. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  144. <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>
  145. </a>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="nav-item dropdown">
  155. <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
  156. <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
  157. <div class="d-none d-xl-block ps-2">
  158. <div>Paweł Kuna</div>
  159. <div class="mt-1 small text-muted">UI Designer</div>
  160. </div>
  161. </a>
  162. <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
  163. <a href="#" class="dropdown-item">Status</a>
  164. <a href="#" class="dropdown-item">Profile</a>
  165. <a href="#" class="dropdown-item">Feedback</a>
  166. <div class="dropdown-divider"></div>
  167. <a href="../settings.html" class="dropdown-item">Settings</a>
  168. <a href="../sign-in.html" class="dropdown-item">Logout</a>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </header>
  174. <div class="navbar-expand-md">
  175. <div class="collapse navbar-collapse" id="navbar-menu">
  176. <div class="navbar navbar-light">
  177. <div class="container-xl">
  178. <ul class="navbar-nav">
  179. <li class="nav-item">
  180. <a class="nav-link" href="../index.html" >
  181. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
  182. <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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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>
  183. </span>
  184. <span class="nav-link-title">
  185. Home
  186. </span>
  187. </a>
  188. </li>
  189. <li class="nav-item dropdown">
  190. <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  191. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
  192. <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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
  193. </span>
  194. <span class="nav-link-title">
  195. Interface
  196. </span>
  197. </a>
  198. <div class="dropdown-menu">
  199. <div class="dropdown-menu-columns">
  200. <div class="dropdown-menu-column">
  201. <a class="dropdown-item" href="../empty.html">
  202. Empty page
  203. </a>
  204. <a class="dropdown-item" href="../accordion.html">
  205. Accordion
  206. </a>
  207. <a class="dropdown-item" href="../blank.html">
  208. Blank page
  209. </a>
  210. <a class="dropdown-item" href="../buttons.html">
  211. Buttons
  212. </a>
  213. <div class="dropend">
  214. <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  215. Cards
  216. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  217. </a>
  218. <div class="dropdown-menu">
  219. <a href="../cards.html" class="dropdown-item">
  220. Sample cards
  221. </a>
  222. <a href="../card-actions.html" class="dropdown-item">
  223. Card actions
  224. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  225. </a>
  226. <a href="../cards-masonry.html" class="dropdown-item">
  227. Cards Masonry
  228. </a>
  229. </div>
  230. </div>
  231. <a class="dropdown-item" href="../colors.html">
  232. Colors
  233. </a>
  234. <a class="dropdown-item" href="../datagrid.html">
  235. Data grid
  236. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  237. </a>
  238. <a class="dropdown-item" href="../datatables.html">
  239. Datatables
  240. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  241. </a>
  242. <a class="dropdown-item" href="../dropdowns.html">
  243. Dropdowns
  244. </a>
  245. <a class="dropdown-item" href="../modals.html">
  246. Modals
  247. </a>
  248. <a class="dropdown-item" href="../maps.html">
  249. Maps
  250. </a>
  251. <a class="dropdown-item" href="../map-fullsize.html">
  252. Map fullsize
  253. </a>
  254. <a class="dropdown-item" href="../maps-vector.html">
  255. Vector maps
  256. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  257. </a>
  258. <a class="dropdown-item" href="../navigation.html">
  259. Navigation
  260. </a>
  261. <a class="dropdown-item" href="../charts.html">
  262. Charts
  263. </a>
  264. </div>
  265. <div class="dropdown-menu-column">
  266. <a class="dropdown-item" href="../pagination.html">
  267. <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
  268. Pagination
  269. </a>
  270. <a class="dropdown-item" href="../placeholder.html">
  271. Placeholder
  272. </a>
  273. <a class="dropdown-item" href="../tabs.html">
  274. Tabs
  275. </a>
  276. <a class="dropdown-item" href="../tables.html">
  277. Tables
  278. </a>
  279. <a class="dropdown-item" href="../carousel.html">
  280. Carousel
  281. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  282. </a>
  283. <a class="dropdown-item" href="../lists.html">
  284. Lists
  285. </a>
  286. <a class="dropdown-item" href="../typography.html">
  287. Typography
  288. </a>
  289. <a class="dropdown-item" href="../offcanvas.html">
  290. Offcanvas
  291. </a>
  292. <a class="dropdown-item" href="../markdown.html">
  293. Markdown
  294. </a>
  295. <a class="dropdown-item" href="../dropzone.html">
  296. Dropzone
  297. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  298. </a>
  299. <a class="dropdown-item" href="../lightbox.html">
  300. Lightbox
  301. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  302. </a>
  303. <a class="dropdown-item" href="../tinymce.html">
  304. TinyMCE
  305. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  306. </a>
  307. <a class="dropdown-item" href="../inline-player.html">
  308. Inline player
  309. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  310. </a>
  311. <div class="dropend">
  312. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  313. Authentication
  314. </a>
  315. <div class="dropdown-menu">
  316. <a href="../sign-in.html" class="dropdown-item">
  317. Sign in
  318. </a>
  319. <a href="../sign-in-illustration.html" class="dropdown-item">
  320. Sign in with illustration
  321. </a>
  322. <a href="../sign-in-cover.html" class="dropdown-item">
  323. Sign in with cover
  324. </a>
  325. <a href="../sign-up.html" class="dropdown-item">
  326. Sign up
  327. </a>
  328. <a href="../forgot-password.html" class="dropdown-item">
  329. Forgot password
  330. </a>
  331. <a href="../terms-of-service.html" class="dropdown-item">
  332. Terms of service
  333. </a>
  334. <a href="../auth-lock.html" class="dropdown-item">
  335. Lock screen
  336. </a>
  337. </div>
  338. </div>
  339. <div class="dropend">
  340. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  341. <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
  342. <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" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
  343. Error pages
  344. </a>
  345. <div class="dropdown-menu">
  346. <a href="../error-404.html" class="dropdown-item">
  347. 404 page
  348. </a>
  349. <a href="../error-500.html" class="dropdown-item">
  350. 500 page
  351. </a>
  352. <a href="../error-maintenance.html" class="dropdown-item">
  353. Maintenance page
  354. </a>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </li>
  361. <li class="nav-item">
  362. <a class="nav-link" href="../form-elements.html" >
  363. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
  364. <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"/><polyline points="9 11 12 14 20 6" /><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>
  365. </span>
  366. <span class="nav-link-title">
  367. Form elements
  368. </span>
  369. </a>
  370. </li>
  371. <li class="nav-item dropdown">
  372. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  373. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
  374. <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>
  375. </span>
  376. <span class="nav-link-title">
  377. Extra
  378. </span>
  379. </a>
  380. <div class="dropdown-menu">
  381. <div class="dropdown-menu-columns">
  382. <div class="dropdown-menu-column">
  383. <a class="dropdown-item" href="../activity.html">
  384. Activity
  385. </a>
  386. <a class="dropdown-item" href="../gallery.html">
  387. Gallery
  388. </a>
  389. <a class="dropdown-item" href="../invoice.html">
  390. Invoice
  391. </a>
  392. <a class="dropdown-item" href="../search-results.html">
  393. Search results
  394. </a>
  395. <a class="dropdown-item" href="../pricing.html">
  396. Pricing cards
  397. </a>
  398. <a class="dropdown-item" href="../pricing-table.html">
  399. Pricing table
  400. </a>
  401. <a class="dropdown-item" href="../faq.html">
  402. FAQ
  403. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  404. </a>
  405. <a class="dropdown-item" href="../users.html">
  406. Users
  407. </a>
  408. <a class="dropdown-item" href="../license.html">
  409. License
  410. </a>
  411. </div>
  412. <div class="dropdown-menu-column">
  413. <a class="dropdown-item" href="../logs.html">
  414. Logs
  415. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  416. </a>
  417. <a class="dropdown-item" href="../music.html">
  418. Music
  419. </a>
  420. <a class="dropdown-item" href="../tasks.html">
  421. Tasks
  422. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  423. </a>
  424. <a class="dropdown-item" href="../uptime.html">
  425. Uptime monitor
  426. </a>
  427. <a class="dropdown-item" href="../widgets.html">
  428. Widgets
  429. </a>
  430. <a class="dropdown-item" href="../wizard.html">
  431. Wizard
  432. </a>
  433. <a class="dropdown-item" href="../settings.html">
  434. Settings
  435. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  436. </a>
  437. <a class="dropdown-item" href="../job-listing.html">
  438. Job listing
  439. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  440. </a>
  441. </div>
  442. </div>
  443. </div>
  444. </li>
  445. <li class="nav-item dropdown">
  446. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  447. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
  448. <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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
  449. </span>
  450. <span class="nav-link-title">
  451. Layout
  452. </span>
  453. </a>
  454. <div class="dropdown-menu">
  455. <div class="dropdown-menu-columns">
  456. <div class="dropdown-menu-column">
  457. <a class="dropdown-item" href="../layout-horizontal.html">
  458. Horizontal
  459. </a>
  460. <a class="dropdown-item" href="../layout-boxed.html">
  461. Boxed
  462. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  463. </a>
  464. <a class="dropdown-item" href="../layout-vertical.html">
  465. Vertical
  466. </a>
  467. <a class="dropdown-item" href="../layout-vertical-transparent.html">
  468. Vertical transparent
  469. </a>
  470. <a class="dropdown-item" href="../layout-vertical-right.html">
  471. Right vertical
  472. </a>
  473. <a class="dropdown-item" href="../layout-condensed.html">
  474. Condensed
  475. </a>
  476. <a class="dropdown-item" href="../layout-combo.html">
  477. Combined
  478. </a>
  479. </div>
  480. <div class="dropdown-menu-column">
  481. <a class="dropdown-item" href="../layout-navbar-dark.html">
  482. Navbar dark
  483. </a>
  484. <a class="dropdown-item" href="../layout-navbar-sticky.html">
  485. Navbar sticky
  486. </a>
  487. <a class="dropdown-item" href="../layout-navbar-overlap.html">
  488. Navbar overlap
  489. </a>
  490. <a class="dropdown-item" href="../layout-rtl.html">
  491. RTL mode
  492. </a>
  493. <a class="dropdown-item" href="../layout-fluid.html">
  494. Fluid
  495. </a>
  496. <a class="dropdown-item" href="../layout-fluid-vertical.html">
  497. Fluid vertical
  498. </a>
  499. </div>
  500. </div>
  501. </div>
  502. </li>
  503. <li class="nav-item">
  504. <a class="nav-link" href="../icons.html" >
  505. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
  506. <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" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
  507. </span>
  508. <span class="nav-link-title">
  509. 2853 icons
  510. </span>
  511. </a>
  512. </li>
  513. <li class="nav-item active dropdown">
  514. <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  515. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
  516. <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"/><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
  517. </span>
  518. <span class="nav-link-title">
  519. Help
  520. </span>
  521. </a>
  522. <div class="dropdown-menu">
  523. <a class="dropdown-item" href="../docs/index.html">
  524. Documentation
  525. </a>
  526. <a class="dropdown-item" href="../changelog.html">
  527. Changelog
  528. </a>
  529. <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
  530. Source code
  531. </a>
  532. <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
  533. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  534. <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.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  535. Sponsor project!
  536. </a>
  537. </div>
  538. </li>
  539. </ul>
  540. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  541. <form action="../" method="get" autocomplete="off" novalidate>
  542. <div class="input-icon">
  543. <span class="input-icon-addon">
  544. <!-- Download SVG icon from http://tabler-icons.io/i/search -->
  545. <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"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
  546. </span>
  547. <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
  548. </div>
  549. </form>
  550. </div>
  551. </div>
  552. </div>
  553. </div>
  554. </div>
  555. <div class="page-wrapper">
  556. <!-- Page header -->
  557. <div class="page-header d-print-none">
  558. <div class="container-xl">
  559. <div class="row g-2 align-items-center">
  560. <div class="col">
  561. <h2 class="page-title">
  562. Documentation
  563. </h2>
  564. </div>
  565. </div>
  566. </div>
  567. </div>
  568. <!-- Page body -->
  569. <div class="page-body">
  570. <div class="container-xl">
  571. <div class="row gx-lg-5">
  572. <div class="d-none d-lg-block col-lg-3">
  573. <ul class="nav nav-pills nav-vertical">
  574. <li class="nav-item">
  575. <a href="../docs/" class="nav-link">
  576. Introduction
  577. </a>
  578. </li>
  579. <li class="nav-item">
  580. <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  581. Getting started
  582. <span class="nav-link-toggle"></span>
  583. </a>
  584. <ul class="nav nav-pills collapse" id="menu-base">
  585. <li class="nav-item">
  586. <a href="../docs/getting-started.html" class="nav-link">
  587. Getting Started
  588. </a>
  589. </li>
  590. <li class="nav-item">
  591. <a href="../docs/download.html" class="nav-link">
  592. Download
  593. </a>
  594. </li>
  595. <li class="nav-item">
  596. <a href="../docs/browser-support.html" class="nav-link">
  597. Browser Support
  598. </a>
  599. </li>
  600. </ul>
  601. </li>
  602. <li class="nav-item">
  603. <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  604. Content
  605. <span class="nav-link-toggle"></span>
  606. </a>
  607. <ul class="nav nav-pills collapse" id="menu-content">
  608. <li class="nav-item">
  609. <a href="../docs/colors.html" class="nav-link">
  610. Colors
  611. </a>
  612. </li>
  613. <li class="nav-item">
  614. <a href="../docs/typography.html" class="nav-link">
  615. Typography
  616. </a>
  617. </li>
  618. <li class="nav-item">
  619. <a href="../docs/icons.html" class="nav-link">
  620. Icons
  621. </a>
  622. </li>
  623. <li class="nav-item">
  624. <a href="../docs/customize.html" class="nav-link">
  625. Customize Tabler
  626. </a>
  627. </li>
  628. </ul>
  629. </li>
  630. <li class="nav-item">
  631. <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  632. Layout
  633. <span class="nav-link-toggle"></span>
  634. </a>
  635. <ul class="nav nav-pills collapse" id="menu-layout">
  636. <li class="nav-item">
  637. <a href="../docs/page-headers.html" class="nav-link">
  638. Page headers
  639. </a>
  640. </li>
  641. </ul>
  642. </li>
  643. <li class="nav-item">
  644. <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  645. Form components
  646. <span class="nav-link-toggle"></span>
  647. </a>
  648. <ul class="nav nav-pills collapse" id="menu-forms">
  649. <li class="nav-item">
  650. <a href="../docs/form-elements.html" class="nav-link">
  651. Form elements
  652. </a>
  653. </li>
  654. <li class="nav-item">
  655. <a href="../docs/form-helpers.html" class="nav-link">
  656. Form helpers
  657. </a>
  658. </li>
  659. <li class="nav-item">
  660. <a href="../docs/form-validation.html" class="nav-link">
  661. Validation states
  662. </a>
  663. </li>
  664. <li class="nav-item">
  665. <a href="../docs/form-image-check.html" class="nav-link">
  666. Image check
  667. </a>
  668. </li>
  669. <li class="nav-item">
  670. <a href="../docs/form-color-check.html" class="nav-link">
  671. Color check
  672. </a>
  673. </li>
  674. <li class="nav-item">
  675. <a href="../docs/form-selectboxes.html" class="nav-link">
  676. Form selectboxes
  677. </a>
  678. </li>
  679. <li class="nav-item">
  680. <a href="../docs/form-fieldset.html" class="nav-link">
  681. Form fieldset
  682. </a>
  683. </li>
  684. </ul>
  685. </li>
  686. <li class="nav-item">
  687. <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  688. Components
  689. <span class="nav-link-toggle"></span>
  690. </a>
  691. <ul class="nav nav-pills collapse" id="menu-components">
  692. <li class="nav-item">
  693. <a href="../docs/alerts.html" class="nav-link">
  694. Alerts
  695. </a>
  696. </li>
  697. <li class="nav-item">
  698. <a href="../docs/avatars.html" class="nav-link">
  699. Avatars
  700. </a>
  701. </li>
  702. <li class="nav-item">
  703. <a href="../docs/badges.html" class="nav-link">
  704. Badges
  705. </a>
  706. </li>
  707. <li class="nav-item">
  708. <a href="../docs/breadcrumb.html" class="nav-link">
  709. Breadcrumb
  710. </a>
  711. </li>
  712. <li class="nav-item">
  713. <a href="../docs/buttons.html" class="nav-link">
  714. Buttons
  715. </a>
  716. </li>
  717. <li class="nav-item">
  718. <a href="../docs/cards.html" class="nav-link">
  719. Cards
  720. </a>
  721. </li>
  722. <li class="nav-item">
  723. <a href="../docs/carousel.html" class="nav-link">
  724. Carousel
  725. </a>
  726. </li>
  727. <li class="nav-item">
  728. <a href="../docs/datagrid.html" class="nav-link">
  729. Data grid
  730. </a>
  731. </li>
  732. <li class="nav-item">
  733. <a href="../docs/dropdowns.html" class="nav-link">
  734. Dropdowns
  735. </a>
  736. </li>
  737. <li class="nav-item">
  738. <a href="../docs/divider.html" class="nav-link">
  739. Divider
  740. </a>
  741. </li>
  742. <li class="nav-item">
  743. <a href="../docs/empty.html" class="nav-link">
  744. Empty states
  745. </a>
  746. </li>
  747. <li class="nav-item">
  748. <a href="../docs/modals.html" class="nav-link">
  749. Modals
  750. </a>
  751. </li>
  752. <li class="nav-item">
  753. <a href="../docs/page-headers.html" class="nav-link">
  754. Page headers
  755. </a>
  756. </li>
  757. <li class="nav-item">
  758. <a href="../docs/progress.html" class="nav-link">
  759. Progress
  760. </a>
  761. </li>
  762. <li class="nav-item">
  763. <a href="../docs/range-slider.html" class="nav-link">
  764. Range slider
  765. </a>
  766. </li>
  767. <li class="nav-item">
  768. <a href="../docs/ribbons.html" class="nav-link">
  769. Ribbons
  770. </a>
  771. </li>
  772. <li class="nav-item">
  773. <a href="../docs/placeholder.html" class="nav-link">
  774. Placeholder
  775. </a>
  776. </li>
  777. <li class="nav-item">
  778. <a href="../docs/spinners.html" class="nav-link">
  779. Spinners
  780. </a>
  781. </li>
  782. <li class="nav-item">
  783. <a href="../docs/statuses.html" class="nav-link">
  784. Statuses
  785. </a>
  786. </li>
  787. <li class="nav-item">
  788. <a href="../docs/steps.html" class="nav-link">
  789. Steps
  790. </a>
  791. </li>
  792. <li class="nav-item">
  793. <a href="../docs/switch-icon.html" class="nav-link">
  794. Switch icon
  795. </a>
  796. </li>
  797. <li class="nav-item">
  798. <a href="../docs/tables.html" class="nav-link">
  799. Tables
  800. </a>
  801. </li>
  802. <li class="nav-item">
  803. <a href="../docs/tabs.html" class="nav-link">
  804. Tabs
  805. </a>
  806. </li>
  807. <li class="nav-item">
  808. <a href="../docs/timelines.html" class="nav-link">
  809. Timelines
  810. </a>
  811. </li>
  812. <li class="nav-item">
  813. <a href="../docs/toasts.html" class="nav-link">
  814. Toasts
  815. </a>
  816. </li>
  817. <li class="nav-item">
  818. <a href="../docs/tracking.html" class="nav-link">
  819. Tracking
  820. </a>
  821. </li>
  822. <li class="nav-item">
  823. <a href="../docs/tooltips.html" class="nav-link">
  824. Tooltips
  825. </a>
  826. </li>
  827. <li class="nav-item">
  828. <a href="../docs/popover.html" class="nav-link">
  829. Popover
  830. </a>
  831. </li>
  832. </ul>
  833. </li>
  834. <li class="nav-item">
  835. <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  836. Utilities
  837. <span class="nav-link-toggle"></span>
  838. </a>
  839. <ul class="nav nav-pills collapse" id="menu-utils">
  840. <li class="nav-item">
  841. <a href="../docs/borders.html" class="nav-link">
  842. Borders
  843. </a>
  844. </li>
  845. <li class="nav-item">
  846. <a href="../docs/cursors.html" class="nav-link">
  847. Cursors
  848. </a>
  849. </li>
  850. <li class="nav-item">
  851. <a href="../docs/interactions.html" class="nav-link">
  852. Interactions
  853. </a>
  854. </li>
  855. </ul>
  856. </li>
  857. <li class="nav-item">
  858. <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  859. Plugins
  860. <span class="nav-link-toggle"></span>
  861. </a>
  862. <ul class="nav nav-pills collapse" id="menu-plugins">
  863. <li class="nav-item">
  864. <a href="../docs/autosize.html" class="nav-link">
  865. Autosize
  866. </a>
  867. </li>
  868. <li class="nav-item">
  869. <a href="../docs/input-mask.html" class="nav-link">
  870. Form input mask
  871. </a>
  872. </li>
  873. <li class="nav-item">
  874. <a href="../docs/flags.html" class="nav-link">
  875. Flags
  876. </a>
  877. </li>
  878. <li class="nav-item">
  879. <a href="../docs/payments.html" class="nav-link">
  880. Payments
  881. </a>
  882. </li>
  883. <li class="nav-item">
  884. <a href="../docs/charts.html" class="nav-link">
  885. Charts
  886. </a>
  887. </li>
  888. <li class="nav-item">
  889. <a href="../docs/dropzone.html" class="nav-link">
  890. Dropzone
  891. </a>
  892. </li>
  893. <li class="nav-item">
  894. <a href="../docs/inline-player.html" class="nav-link">
  895. Inline player
  896. </a>
  897. </li>
  898. <li class="nav-item">
  899. <a href="../docs/tinymce.html" class="nav-link">
  900. TinyMCE
  901. </a>
  902. </li>
  903. </ul>
  904. </li>
  905. <li class="nav-item">
  906. <a href="../changelog.html" class="nav-link">
  907. Changelog
  908. <span class="badge bg-primary-lt ms-auto">1.0.0-beta14</span>
  909. </a>
  910. </li>
  911. </ul>
  912. </div>
  913. <div class="col-lg-9">
  914. <div class="card card-lg">
  915. <div class="card-body">
  916. <div class="markdown">
  917. <div>
  918. <div class="d-flex mb-3">
  919. <h1 class="m-0">Timelines</h1>
  920. </div>
  921. <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>
  922. </div>
  923. <h2 id="timeline">Timeline</h2>
  924. <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>
  925. <div class="example no_toc_section">
  926. <div class="example-content">
  927. <div class="card">
  928. <div class="card-header">
  929. <h3 class="card-title">Timeline</h3>
  930. </div>
  931. <div class="card-body">
  932. <ul class="list list-timeline">
  933. <li>
  934. <div class="list-timeline-icon bg-twitter"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
  935. <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.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
  936. </div>
  937. <div class="list-timeline-content">
  938. <div class="list-timeline-time">10 hrs ago</div>
  939. <p class="list-timeline-title">+1150 Followers</p>
  940. <p class="text-muted">You’re getting more and more followers, keep it up!</p>
  941. </div>
  942. </li>
  943. <li>
  944. <div class="list-timeline-icon bg-red"><!-- Download SVG icon from http://tabler-icons.io/i/briefcase -->
  945. <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" /><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" /><line x1="12" y1="12" x2="12" y2="12.01" /><path d="M3 13a20 20 0 0 0 18 0" /></svg>
  946. </div>
  947. <div class="list-timeline-content">
  948. <div class="list-timeline-time">2 hrs ago</div>
  949. <p class="list-timeline-title">+3 New Products were added!</p>
  950. <p class="text-muted">Congratulations!</p>
  951. </div>
  952. </li>
  953. <li>
  954. <div class="list-timeline-icon bg-success"><!-- Download SVG icon from http://tabler-icons.io/i/check -->
  955. <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>
  956. </div>
  957. <div class="list-timeline-content">
  958. <div class="list-timeline-time">1 day ago</div>
  959. <p class="list-timeline-title">Database backup completed!</p>
  960. <p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p>
  961. </div>
  962. </li>
  963. <li>
  964. <div class="list-timeline-icon bg-facebook"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
  965. <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>
  966. </div>
  967. <div class="list-timeline-content">
  968. <div class="list-timeline-time">1 day ago</div>
  969. <p class="list-timeline-title">+290 Page Likes</p>
  970. <p class="text-muted">This is great, keep it up!</p>
  971. </div>
  972. </li>
  973. <li>
  974. <div class="list-timeline-icon bg-teal"><!-- Download SVG icon from http://tabler-icons.io/i/user-plus -->
  975. <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" /><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 11h6m-3 -3v6" /></svg>
  976. </div>
  977. <div class="list-timeline-content">
  978. <div class="list-timeline-time">2 days ago</div>
  979. <p class="list-timeline-title">+3 Friend Requests</p>
  980. <div class="avatar-list mt-3">
  981. <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
  982. <span class="badge bg-success"></span></span>
  983. <span class="avatar">
  984. <span class="badge bg-success"></span>JL</span>
  985. <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
  986. <span class="badge bg-success"></span></span>
  987. </div>
  988. </div>
  989. </li>
  990. <li>
  991. <div class="list-timeline-icon bg-yellow"><!-- Download SVG icon from http://tabler-icons.io/i/photo -->
  992. <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" /><line x1="15" y1="8" x2="15.01" y2="8" /><rect x="4" y="4" width="16" height="16" rx="3" /><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>
  993. </div>
  994. <div class="list-timeline-content">
  995. <div class="list-timeline-time">3 days ago</div>
  996. <p class="list-timeline-title">+2 New photos</p>
  997. <div class="mt-3">
  998. <div class="row g-2">
  999. <div class="col-6">
  1000. <div class="media media-2x1 rounded">
  1001. <a class="media-content" style="background-image: url(../static/photos/6d35d9a2bd6c63c2.jpg
  1002. )"></a>
  1003. </div>
  1004. </div>
  1005. <div class="col-6">
  1006. <div class="media media-2x1 rounded">
  1007. <a class="media-content" style="background-image: url(../static/photos/6f6e2ef709fef97a.jpg
  1008. )"></a>
  1009. </div>
  1010. </div>
  1011. </div>
  1012. </div>
  1013. </div>
  1014. </li>
  1015. <li>
  1016. <div class="list-timeline-icon"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
  1017. <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" /><circle cx="12" cy="12" r="3" /></svg>
  1018. </div>
  1019. <div class="list-timeline-content">
  1020. <div class="list-timeline-time">2 weeks ago</div>
  1021. <p class="list-timeline-title">System updated to v2.02</p>
  1022. <p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity
  1023. page</a>.</p>
  1024. </div>
  1025. </li>
  1026. </ul>
  1027. </div>
  1028. </div>
  1029. </div>
  1030. </div>
  1031. <div class="example-code">
  1032. <figure class="highlight">
  1033. <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  1034. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
  1035. <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Timeline<span class="nt">&lt;/h3&gt;</span>
  1036. <span class="nt">&lt;/div&gt;</span>
  1037. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1038. <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list list-timeline"</span><span class="nt">&gt;</span>
  1039. <span class="nt">&lt;li&gt;</span>
  1040. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-twitter"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --&gt;</span>
  1041. <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.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1042. <span class="nt">&lt;/div&gt;</span>
  1043. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1044. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>10 hrs ago<span class="nt">&lt;/div&gt;</span>
  1045. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+1150 Followers<span class="nt">&lt;/p&gt;</span>
  1046. <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>
  1047. <span class="nt">&lt;/div&gt;</span>
  1048. <span class="nt">&lt;/li&gt;</span>
  1049. <span class="nt">&lt;li&gt;</span>
  1050. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-red"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/briefcase --&gt;</span>
  1051. <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;rect</span> <span class="na">x=</span><span class="s">"3"</span> <span class="na">y=</span><span class="s">"7"</span> <span class="na">width=</span><span class="s">"18"</span> <span class="na">height=</span><span class="s">"13"</span> <span class="na">rx=</span><span class="s">"2"</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;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"12"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12.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>
  1052. <span class="nt">&lt;/div&gt;</span>
  1053. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1054. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/div&gt;</span>
  1055. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+3 New Products were added!<span class="nt">&lt;/p&gt;</span>
  1056. <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>
  1057. <span class="nt">&lt;/div&gt;</span>
  1058. <span class="nt">&lt;/li&gt;</span>
  1059. <span class="nt">&lt;li&gt;</span>
  1060. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-success"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
  1061. <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>
  1062. <span class="nt">&lt;/div&gt;</span>
  1063. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1064. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1065. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>Database backup completed!<span class="nt">&lt;/p&gt;</span>
  1066. <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>
  1067. <span class="nt">&lt;/div&gt;</span>
  1068. <span class="nt">&lt;/li&gt;</span>
  1069. <span class="nt">&lt;li&gt;</span>
  1070. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-facebook"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --&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">"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>
  1072. <span class="nt">&lt;/div&gt;</span>
  1073. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1074. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1075. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+290 Page Likes<span class="nt">&lt;/p&gt;</span>
  1076. <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>
  1077. <span class="nt">&lt;/div&gt;</span>
  1078. <span class="nt">&lt;/li&gt;</span>
  1079. <span class="nt">&lt;li&gt;</span>
  1080. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-teal"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user-plus --&gt;</span>
  1081. <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;circle</span> <span class="na">cx=</span><span class="s">"9"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</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>
  1082. <span class="nt">&lt;/div&gt;</span>
  1083. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1084. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
  1085. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+3 Friend Requests<span class="nt">&lt;/p&gt;</span>
  1086. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list mt-3"</span><span class="nt">&gt;</span>
  1087. <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>
  1088. <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>
  1089. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
  1090. <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>
  1091. <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>
  1092. <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>
  1093. <span class="nt">&lt;/div&gt;</span>
  1094. <span class="nt">&lt;/div&gt;</span>
  1095. <span class="nt">&lt;/li&gt;</span>
  1096. <span class="nt">&lt;li&gt;</span>
  1097. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-yellow"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/photo --&gt;</span>
  1098. <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;line</span> <span class="na">x1=</span><span class="s">"15"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"15.01"</span> <span class="na">y2=</span><span class="s">"8"</span> <span class="nt">/&gt;&lt;rect</span> <span class="na">x=</span><span class="s">"4"</span> <span class="na">y=</span><span class="s">"4"</span> <span class="na">width=</span><span class="s">"16"</span> <span class="na">height=</span><span class="s">"16"</span> <span class="na">rx=</span><span class="s">"3"</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>
  1099. <span class="nt">&lt;/div&gt;</span>
  1100. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1101. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
  1102. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+2 New photos<span class="nt">&lt;/p&gt;</span>
  1103. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-3"</span><span class="nt">&gt;</span>
  1104. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
  1105. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1106. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1107. <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>
  1108. <span class="nt">&lt;/div&gt;</span>
  1109. <span class="nt">&lt;/div&gt;</span>
  1110. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1111. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1112. <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>
  1113. <span class="nt">&lt;/div&gt;</span>
  1114. <span class="nt">&lt;/div&gt;</span>
  1115. <span class="nt">&lt;/div&gt;</span>
  1116. <span class="nt">&lt;/div&gt;</span>
  1117. <span class="nt">&lt;/div&gt;</span>
  1118. <span class="nt">&lt;/li&gt;</span>
  1119. <span class="nt">&lt;li&gt;</span>
  1120. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
  1121. <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;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1122. <span class="nt">&lt;/div&gt;</span>
  1123. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1124. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>2 weeks ago<span class="nt">&lt;/div&gt;</span>
  1125. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>System updated to v2.02<span class="nt">&lt;/p&gt;</span>
  1126. <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
  1127. page<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  1128. <span class="nt">&lt;/div&gt;</span>
  1129. <span class="nt">&lt;/li&gt;</span>
  1130. <span class="nt">&lt;/ul&gt;</span>
  1131. <span class="nt">&lt;/div&gt;</span>
  1132. <span class="nt">&lt;/div&gt;</span></code></pre>
  1133. </figure>
  1134. </div>
  1135. <h2 id="simple-timeline">Simple timeline</h2>
  1136. <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>
  1137. <div class="example no_toc_section">
  1138. <div class="example-content">
  1139. <div class="card">
  1140. <div class="card-header">
  1141. <h3 class="card-title">Timeline</h3>
  1142. </div>
  1143. <div class="card-body">
  1144. <ul class="list list-timeline list-timeline-simple">
  1145. <li>
  1146. <div class="list-timeline-icon bg-twitter"><!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
  1147. <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.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
  1148. </div>
  1149. <div class="list-timeline-content">
  1150. <div class="list-timeline-time">10 hrs ago</div>
  1151. <p class="list-timeline-title">+1150 Followers</p>
  1152. <p class="text-muted">You’re getting more and more followers, keep it up!</p>
  1153. </div>
  1154. </li>
  1155. <li>
  1156. <div class="list-timeline-icon bg-red"><!-- Download SVG icon from http://tabler-icons.io/i/briefcase -->
  1157. <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" /><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" /><line x1="12" y1="12" x2="12" y2="12.01" /><path d="M3 13a20 20 0 0 0 18 0" /></svg>
  1158. </div>
  1159. <div class="list-timeline-content">
  1160. <div class="list-timeline-time">2 hrs ago</div>
  1161. <p class="list-timeline-title">+3 New Products were added!</p>
  1162. <p class="text-muted">Congratulations!</p>
  1163. </div>
  1164. </li>
  1165. <li>
  1166. <div class="list-timeline-icon bg-success"><!-- Download SVG icon from http://tabler-icons.io/i/check -->
  1167. <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>
  1168. </div>
  1169. <div class="list-timeline-content">
  1170. <div class="list-timeline-time">1 day ago</div>
  1171. <p class="list-timeline-title">Database backup completed!</p>
  1172. <p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p>
  1173. </div>
  1174. </li>
  1175. <li>
  1176. <div class="list-timeline-icon bg-facebook"><!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook -->
  1177. <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>
  1178. </div>
  1179. <div class="list-timeline-content">
  1180. <div class="list-timeline-time">1 day ago</div>
  1181. <p class="list-timeline-title">+290 Page Likes</p>
  1182. <p class="text-muted">This is great, keep it up!</p>
  1183. </div>
  1184. </li>
  1185. <li>
  1186. <div class="list-timeline-icon bg-teal"><!-- Download SVG icon from http://tabler-icons.io/i/user-plus -->
  1187. <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" /><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 11h6m-3 -3v6" /></svg>
  1188. </div>
  1189. <div class="list-timeline-content">
  1190. <div class="list-timeline-time">2 days ago</div>
  1191. <p class="list-timeline-title">+3 Friend Requests</p>
  1192. <div class="avatar-list mt-3">
  1193. <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
  1194. <span class="badge bg-success"></span></span>
  1195. <span class="avatar">
  1196. <span class="badge bg-success"></span>JL</span>
  1197. <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
  1198. <span class="badge bg-success"></span></span>
  1199. </div>
  1200. </div>
  1201. </li>
  1202. <li>
  1203. <div class="list-timeline-icon bg-yellow"><!-- Download SVG icon from http://tabler-icons.io/i/photo -->
  1204. <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" /><line x1="15" y1="8" x2="15.01" y2="8" /><rect x="4" y="4" width="16" height="16" rx="3" /><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>
  1205. </div>
  1206. <div class="list-timeline-content">
  1207. <div class="list-timeline-time">3 days ago</div>
  1208. <p class="list-timeline-title">+2 New photos</p>
  1209. <div class="mt-3">
  1210. <div class="row g-2">
  1211. <div class="col-6">
  1212. <div class="media media-2x1 rounded">
  1213. <a class="media-content" style="background-image: url(../static/photos/6d35d9a2bd6c63c2.jpg
  1214. )"></a>
  1215. </div>
  1216. </div>
  1217. <div class="col-6">
  1218. <div class="media media-2x1 rounded">
  1219. <a class="media-content" style="background-image: url(../static/photos/6f6e2ef709fef97a.jpg
  1220. )"></a>
  1221. </div>
  1222. </div>
  1223. </div>
  1224. </div>
  1225. </div>
  1226. </li>
  1227. <li>
  1228. <div class="list-timeline-icon"><!-- Download SVG icon from http://tabler-icons.io/i/settings -->
  1229. <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" /><circle cx="12" cy="12" r="3" /></svg>
  1230. </div>
  1231. <div class="list-timeline-content">
  1232. <div class="list-timeline-time">2 weeks ago</div>
  1233. <p class="list-timeline-title">System updated to v2.02</p>
  1234. <p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity
  1235. page</a>.</p>
  1236. </div>
  1237. </li>
  1238. </ul>
  1239. </div>
  1240. </div>
  1241. </div>
  1242. </div>
  1243. <div class="example-code">
  1244. <figure class="highlight">
  1245. <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  1246. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
  1247. <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Timeline<span class="nt">&lt;/h3&gt;</span>
  1248. <span class="nt">&lt;/div&gt;</span>
  1249. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
  1250. <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"list list-timeline list-timeline-simple"</span><span class="nt">&gt;</span>
  1251. <span class="nt">&lt;li&gt;</span>
  1252. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-twitter"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --&gt;</span>
  1253. <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.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1254. <span class="nt">&lt;/div&gt;</span>
  1255. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1256. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>10 hrs ago<span class="nt">&lt;/div&gt;</span>
  1257. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+1150 Followers<span class="nt">&lt;/p&gt;</span>
  1258. <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>
  1259. <span class="nt">&lt;/div&gt;</span>
  1260. <span class="nt">&lt;/li&gt;</span>
  1261. <span class="nt">&lt;li&gt;</span>
  1262. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-red"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/briefcase --&gt;</span>
  1263. <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;rect</span> <span class="na">x=</span><span class="s">"3"</span> <span class="na">y=</span><span class="s">"7"</span> <span class="na">width=</span><span class="s">"18"</span> <span class="na">height=</span><span class="s">"13"</span> <span class="na">rx=</span><span class="s">"2"</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;line</span> <span class="na">x1=</span><span class="s">"12"</span> <span class="na">y1=</span><span class="s">"12"</span> <span class="na">x2=</span><span class="s">"12"</span> <span class="na">y2=</span><span class="s">"12.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>
  1264. <span class="nt">&lt;/div&gt;</span>
  1265. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1266. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>2 hrs ago<span class="nt">&lt;/div&gt;</span>
  1267. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+3 New Products were added!<span class="nt">&lt;/p&gt;</span>
  1268. <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>
  1269. <span class="nt">&lt;/div&gt;</span>
  1270. <span class="nt">&lt;/li&gt;</span>
  1271. <span class="nt">&lt;li&gt;</span>
  1272. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-success"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
  1273. <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>
  1274. <span class="nt">&lt;/div&gt;</span>
  1275. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1276. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1277. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>Database backup completed!<span class="nt">&lt;/p&gt;</span>
  1278. <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>
  1279. <span class="nt">&lt;/div&gt;</span>
  1280. <span class="nt">&lt;/li&gt;</span>
  1281. <span class="nt">&lt;li&gt;</span>
  1282. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-facebook"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --&gt;</span>
  1283. <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>
  1284. <span class="nt">&lt;/div&gt;</span>
  1285. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1286. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>1 day ago<span class="nt">&lt;/div&gt;</span>
  1287. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+290 Page Likes<span class="nt">&lt;/p&gt;</span>
  1288. <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>
  1289. <span class="nt">&lt;/div&gt;</span>
  1290. <span class="nt">&lt;/li&gt;</span>
  1291. <span class="nt">&lt;li&gt;</span>
  1292. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-teal"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/user-plus --&gt;</span>
  1293. <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;circle</span> <span class="na">cx=</span><span class="s">"9"</span> <span class="na">cy=</span><span class="s">"7"</span> <span class="na">r=</span><span class="s">"4"</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>
  1294. <span class="nt">&lt;/div&gt;</span>
  1295. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1296. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>2 days ago<span class="nt">&lt;/div&gt;</span>
  1297. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+3 Friend Requests<span class="nt">&lt;/p&gt;</span>
  1298. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list mt-3"</span><span class="nt">&gt;</span>
  1299. <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>
  1300. <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>
  1301. <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
  1302. <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>
  1303. <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>
  1304. <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>
  1305. <span class="nt">&lt;/div&gt;</span>
  1306. <span class="nt">&lt;/div&gt;</span>
  1307. <span class="nt">&lt;/li&gt;</span>
  1308. <span class="nt">&lt;li&gt;</span>
  1309. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon bg-yellow"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/photo --&gt;</span>
  1310. <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;line</span> <span class="na">x1=</span><span class="s">"15"</span> <span class="na">y1=</span><span class="s">"8"</span> <span class="na">x2=</span><span class="s">"15.01"</span> <span class="na">y2=</span><span class="s">"8"</span> <span class="nt">/&gt;&lt;rect</span> <span class="na">x=</span><span class="s">"4"</span> <span class="na">y=</span><span class="s">"4"</span> <span class="na">width=</span><span class="s">"16"</span> <span class="na">height=</span><span class="s">"16"</span> <span class="na">rx=</span><span class="s">"3"</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>
  1311. <span class="nt">&lt;/div&gt;</span>
  1312. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1313. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
  1314. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>+2 New photos<span class="nt">&lt;/p&gt;</span>
  1315. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mt-3"</span><span class="nt">&gt;</span>
  1316. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
  1317. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1318. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1319. <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>
  1320. <span class="nt">&lt;/div&gt;</span>
  1321. <span class="nt">&lt;/div&gt;</span>
  1322. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;</span>
  1323. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media media-2x1 rounded"</span><span class="nt">&gt;</span>
  1324. <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>
  1325. <span class="nt">&lt;/div&gt;</span>
  1326. <span class="nt">&lt;/div&gt;</span>
  1327. <span class="nt">&lt;/div&gt;</span>
  1328. <span class="nt">&lt;/div&gt;</span>
  1329. <span class="nt">&lt;/div&gt;</span>
  1330. <span class="nt">&lt;/li&gt;</span>
  1331. <span class="nt">&lt;li&gt;</span>
  1332. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/settings --&gt;</span>
  1333. <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;circle</span> <span class="na">cx=</span><span class="s">"12"</span> <span class="na">cy=</span><span class="s">"12"</span> <span class="na">r=</span><span class="s">"3"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
  1334. <span class="nt">&lt;/div&gt;</span>
  1335. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-content"</span><span class="nt">&gt;</span>
  1336. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"list-timeline-time"</span><span class="nt">&gt;</span>2 weeks ago<span class="nt">&lt;/div&gt;</span>
  1337. <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"list-timeline-title"</span><span class="nt">&gt;</span>System updated to v2.02<span class="nt">&lt;/p&gt;</span>
  1338. <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
  1339. page<span class="nt">&lt;/a&gt;</span>.<span class="nt">&lt;/p&gt;</span>
  1340. <span class="nt">&lt;/div&gt;</span>
  1341. <span class="nt">&lt;/li&gt;</span>
  1342. <span class="nt">&lt;/ul&gt;</span>
  1343. <span class="nt">&lt;/div&gt;</span>
  1344. <span class="nt">&lt;/div&gt;</span></code></pre>
  1345. </figure>
  1346. </div>
  1347. </div>
  1348. </div>
  1349. </div>
  1350. </div>
  1351. </div>
  1352. </div>
  1353. </div>
  1354. <footer class="footer footer-transparent d-print-none">
  1355. <div class="container-xl">
  1356. <div class="row text-center align-items-center flex-row-reverse">
  1357. <div class="col-lg-auto ms-lg-auto">
  1358. <ul class="list-inline list-inline-dots mb-0">
  1359. <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
  1360. <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
  1361. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  1362. <li class="list-inline-item">
  1363. <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
  1364. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  1365. <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.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  1366. Sponsor
  1367. </a>
  1368. </li>
  1369. </ul>
  1370. </div>
  1371. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  1372. <ul class="list-inline list-inline-dots mb-0">
  1373. <li class="list-inline-item">
  1374. Copyright &copy; 2022
  1375. <a href=".." class="link-secondary">Tabler</a>.
  1376. All rights reserved.
  1377. </li>
  1378. <li class="list-inline-item">
  1379. <a href="../changelog.html" class="link-secondary" rel="noopener">
  1380. v1.0.0-beta14
  1381. </a>
  1382. </li>
  1383. </ul>
  1384. </div>
  1385. </div>
  1386. </div>
  1387. </footer>
  1388. </div>
  1389. </div>
  1390. <!-- Libs JS -->
  1391. <!-- Tabler Core -->
  1392. <script src="../dist/js/tabler.min.js?1666304673" defer></script>
  1393. <script src="../dist/js/demo.min.js?1666304673" defer></script>
  1394. </body>
  1395. </html>