Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Tree: 4b3d7f84a1
Branches Tags
tabler
/
demo
/
docs
/
cards.html

cards.html 102 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485 
  1. <!doctype html>
    2. 

  2. <!--
    3. 

  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
    4. 

  4. * @version 1.0.0-beta14
    5. 

  5. * @link https://tabler.io
    6. 

  6. * Copyright 2018-2022 The Tabler Authors
    7. 

  7. * Copyright 2018-2022 codecalm.net Paweł Kuna
    8. 

  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
    9. 

  9. -->
    10. 

  10. <html lang="en">
    11. 

  11.   <head>
    12. 

  12.     <meta charset="utf-8"/>
    13. 

  13.     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    14. 

  14.     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    15. 

  15.     <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    16. 

  16.     <!-- CSS files -->
    17. 

  17.     <link href="../dist/css/tabler.min.css?1666304673" rel="stylesheet"/>
    18. 

  18.     <link href="../dist/css/tabler-flags.min.css?1666304673" rel="stylesheet"/>
    19. 

  19.     <link href="../dist/css/tabler-payments.min.css?1666304673" rel="stylesheet"/>
    20. 

  20.     <link href="../dist/css/tabler-vendors.min.css?1666304673" rel="stylesheet"/>
    21. 

  21.     <link href="../dist/css/demo.min.css?1666304673" rel="stylesheet"/>
    22. 

  22.     <style>
    23. 

  23.       @import url('https://rsms.me/inter/inter.css');
    24. 

  24.       :root {
    25. 

  25.       	--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
    26. 

  26.       }
    27. 

  27.     </style>
    28. 

  28.   </head>
    29. 

  29.   <body >
    30. 

  30.     <script src="../dist/js/demo-theme.min.js?1666304673"></script>
    31. 

  31.     <div class="page">
    32. 

  32.       <!-- Navbar -->
    33. 

  33.       <header class="navbar navbar-expand-md navbar-light d-print-none">
    34. 

  34.         <div class="container-xl">
    35. 

  35.           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
    36. 

  36.             <span class="navbar-toggler-icon"></span>
    37. 

  37.           </button>
    38. 

  38.           <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
    39. 

  39.             <a href="..">
    40. 

  40.               <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
    41. 

  41.             </a>
    42. 

  42.           </h1>
    43. 

  43.           <div class="navbar-nav flex-row order-md-last">
    44. 

  44.             <div class="nav-item d-none d-md-flex me-3">
    45. 

  45.               <div class="btn-list">
    46. 

  46.                 <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
    47. 

  47.                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
    48. 

  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. 

  49.                   Source code
    50. 

  50.                 </a>
    51. 

  51.                 <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
    52. 

  52.                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    53. 

  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. 

  54.                   Sponsor
    55. 

  55.                 </a>
    56. 

  56.               </div>
    57. 

  57.             </div>
    58. 

  58.             <div class="d-none d-md-flex">
    59. 

  59.               <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
    60. 

  60. 		   data-bs-placement="bottom">
    61. 

  61.                 <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
    62. 

  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. 

  63.               </a>
    64. 

  64.               <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
    65. 

  65. 		   data-bs-placement="bottom">
    66. 

  66.                 <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
    67. 

  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. 

  68.               </a>
    69. 

  69.               <div class="nav-item dropdown d-none d-md-flex me-3">
    70. 

  70.                 <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
    71. 

  71.                   <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
    72. 

  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. 

  73.                   <span class="badge bg-red"></span>
    74. 

  74.                 </a>
    75. 

  75.                 <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
    76. 

  76.                   <div class="card">
    77. 

  77.                     <div class="card-header">
    78. 

  78.                       <h3 class="card-title">Last updates</h3>
    79. 

  79.                     </div>
    80. 

  80.                     <div class="list-group list-group-flush list-group-hoverable">
    81. 

  81.                       <div class="list-group-item">
    82. 

  82.                         <div class="row align-items-center">
    83. 

  83.                           <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
    84. 

  84.                           <div class="col text-truncate">
    85. 

  85.                             <a href="#" class="text-body d-block">Example 1</a>
    86. 

  86.                             <div class="d-block text-muted text-truncate mt-n1">
    87. 

  87.                               Change deprecated html tags to text decoration classes (#29604)
    88. 

  88.                             </div>
    89. 

  89.                           </div>
    90. 

  90.                           <div class="col-auto">
    91. 

  91.                             <a href="#" class="list-group-item-actions">
    92. 

  92.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    93. 

  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. 

  94.                             </a>
    95. 

  95.                           </div>
    96. 

  96.                         </div>
    97. 

  97.                       </div>
    98. 

  98.                       <div class="list-group-item">
    99. 

  99.                         <div class="row align-items-center">
    100. 

  100.                           <div class="col-auto"><span class="status-dot d-block"></span></div>
    101. 

  101.                           <div class="col text-truncate">
    102. 

  102.                             <a href="#" class="text-body d-block">Example 2</a>
    103. 

  103.                             <div class="d-block text-muted text-truncate mt-n1">
    104. 

  104.                               justify-content:between ⇒ justify-content:space-between (#29734)
    105. 

  105.                             </div>
    106. 

  106.                           </div>
    107. 

  107.                           <div class="col-auto">
    108. 

  108.                             <a href="#" class="list-group-item-actions show">
    109. 

  109.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    110. 

  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. 

  111.                             </a>
    112. 

  112.                           </div>
    113. 

  113.                         </div>
    114. 

  114.                       </div>
    115. 

  115.                       <div class="list-group-item">
    116. 

  116.                         <div class="row align-items-center">
    117. 

  117.                           <div class="col-auto"><span class="status-dot d-block"></span></div>
    118. 

  118.                           <div class="col text-truncate">
    119. 

  119.                             <a href="#" class="text-body d-block">Example 3</a>
    120. 

  120.                             <div class="d-block text-muted text-truncate mt-n1">
    121. 

  121.                               Update change-version.js (#29736)
    122. 

  122.                             </div>
    123. 

  123.                           </div>
    124. 

  124.                           <div class="col-auto">
    125. 

  125.                             <a href="#" class="list-group-item-actions">
    126. 

  126.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    127. 

  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. 

  128.                             </a>
    129. 

  129.                           </div>
    130. 

  130.                         </div>
    131. 

  131.                       </div>
    132. 

  132.                       <div class="list-group-item">
    133. 

  133.                         <div class="row align-items-center">
    134. 

  134.                           <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
    135. 

  135.                           <div class="col text-truncate">
    136. 

  136.                             <a href="#" class="text-body d-block">Example 4</a>
    137. 

  137.                             <div class="d-block text-muted text-truncate mt-n1">
    138. 

  138.                               Regenerate package-lock.json (#29730)
    139. 

  139.                             </div>
    140. 

  140.                           </div>
    141. 

  141.                           <div class="col-auto">
    142. 

  142.                             <a href="#" class="list-group-item-actions">
    143. 

  143.                               <!-- Download SVG icon from http://tabler-icons.io/i/star -->
    144. 

  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. 

  145.                             </a>
    146. 

  146.                           </div>
    147. 

  147.                         </div>
    148. 

  148.                       </div>
    149. 

  149.                     </div>
    150. 

  150.                   </div>
    151. 

  151.                 </div>
    152. 

  152.               </div>
    153. 

  153.             </div>
    154. 

  154.             <div class="nav-item dropdown">
    155. 

  155.               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
    156. 

  156.                 <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
    157. 

  157.                 <div class="d-none d-xl-block ps-2">
    158. 

  158.                   <div>Paweł Kuna</div>
    159. 

  159.                   <div class="mt-1 small text-muted">UI Designer</div>
    160. 

  160.                 </div>
    161. 

  161.               </a>
    162. 

  162.               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
    163. 

  163.                 <a href="#" class="dropdown-item">Status</a>
    164. 

  164.                 <a href="#" class="dropdown-item">Profile</a>
    165. 

  165.                 <a href="#" class="dropdown-item">Feedback</a>
    166. 

  166.                 <div class="dropdown-divider"></div>
    167. 

  167.                 <a href="../settings.html" class="dropdown-item">Settings</a>
    168. 

  168.                 <a href="../sign-in.html" class="dropdown-item">Logout</a>
    169. 

  169.               </div>
    170. 

  170.             </div>
    171. 

  171.           </div>
    172. 

  172.         </div>
    173. 

  173.       </header>
    174. 

  174.       <div class="navbar-expand-md">
    175. 

  175.         <div class="collapse navbar-collapse" id="navbar-menu">
    176. 

  176.           <div class="navbar navbar-light">
    177. 

  177.             <div class="container-xl">
    178. 

  178.               <ul class="navbar-nav">
    179. 

  179.                 <li class="nav-item">
    180. 

  180.                   <a class="nav-link" href="../index.html" >
    181. 

  181.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
    182. 

  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. 

  183.                     </span>
    184. 

  184.                     <span class="nav-link-title">
    185. 

  185.                       Home
    186. 

  186.                     </span>
    187. 

  187.                   </a>
    188. 

  188.                 </li>
    189. 

  189.                 <li class="nav-item dropdown">
    190. 

  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. 

  191.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
    192. 

  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. 

  193.                     </span>
    194. 

  194.                     <span class="nav-link-title">
    195. 

  195.                       Interface
    196. 

  196.                     </span>
    197. 

  197.                   </a>
    198. 

  198.                   <div class="dropdown-menu">
    199. 

  199.                     <div class="dropdown-menu-columns">
    200. 

  200.                       <div class="dropdown-menu-column">
    201. 

  201.                         <a class="dropdown-item" href="../empty.html">
    202. 

  202.                           Empty page
    203. 

  203.                         </a>
    204. 

  204.                         <a class="dropdown-item" href="../accordion.html">
    205. 

  205.                           Accordion
    206. 

  206.                         </a>
    207. 

  207.                         <a class="dropdown-item" href="../blank.html">
    208. 

  208.                           Blank page
    209. 

  209.                         </a>
    210. 

  210.                         <a class="dropdown-item" href="../buttons.html">
    211. 

  211.                           Buttons
    212. 

  212.                         </a>
    213. 

  213.                         <div class="dropend">
    214. 

  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. 

  215.                             Cards
    216. 

  216.                             <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    217. 

  217.                           </a>
    218. 

  218.                           <div class="dropdown-menu">
    219. 

  219.                             <a href="../cards.html" class="dropdown-item">
    220. 

  220.                               Sample cards
    221. 

  221.                             </a>
    222. 

  222.                             <a href="../card-actions.html" class="dropdown-item">
    223. 

  223.                               Card actions
    224. 

  224.                               <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    225. 

  225.                             </a>
    226. 

  226.                             <a href="../cards-masonry.html" class="dropdown-item">
    227. 

  227.                               Cards Masonry
    228. 

  228.                             </a>
    229. 

  229.                           </div>
    230. 

  230.                         </div>
    231. 

  231.                         <a class="dropdown-item" href="../colors.html">
    232. 

  232.                           Colors
    233. 

  233.                         </a>
    234. 

  234.                         <a class="dropdown-item" href="../datagrid.html">
    235. 

  235.                           Data grid
    236. 

  236.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    237. 

  237.                         </a>
    238. 

  238.                         <a class="dropdown-item" href="../datatables.html">
    239. 

  239.                           Datatables
    240. 

  240.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    241. 

  241.                         </a>
    242. 

  242.                         <a class="dropdown-item" href="../dropdowns.html">
    243. 

  243.                           Dropdowns
    244. 

  244.                         </a>
    245. 

  245.                         <a class="dropdown-item" href="../modals.html">
    246. 

  246.                           Modals
    247. 

  247.                         </a>
    248. 

  248.                         <a class="dropdown-item" href="../maps.html">
    249. 

  249.                           Maps
    250. 

  250.                         </a>
    251. 

  251.                         <a class="dropdown-item" href="../map-fullsize.html">
    252. 

  252.                           Map fullsize
    253. 

  253.                         </a>
    254. 

  254.                         <a class="dropdown-item" href="../maps-vector.html">
    255. 

  255.                           Vector maps
    256. 

  256.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    257. 

  257.                         </a>
    258. 

  258.                         <a class="dropdown-item" href="../navigation.html">
    259. 

  259.                           Navigation
    260. 

  260.                         </a>
    261. 

  261.                         <a class="dropdown-item" href="../charts.html">
    262. 

  262.                           Charts
    263. 

  263.                         </a>
    264. 

  264.                       </div>
    265. 

  265.                       <div class="dropdown-menu-column">
    266. 

  266.                         <a class="dropdown-item" href="../pagination.html">
    267. 

  267.                           <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
    268. 

  268.                           Pagination
    269. 

  269.                         </a>
    270. 

  270.                         <a class="dropdown-item" href="../placeholder.html">
    271. 

  271.                           Placeholder
    272. 

  272.                         </a>
    273. 

  273.                         <a class="dropdown-item" href="../tabs.html">
    274. 

  274.                           Tabs
    275. 

  275.                         </a>
    276. 

  276.                         <a class="dropdown-item" href="../tables.html">
    277. 

  277.                           Tables
    278. 

  278.                         </a>
    279. 

  279.                         <a class="dropdown-item" href="../carousel.html">
    280. 

  280.                           Carousel
    281. 

  281.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    282. 

  282.                         </a>
    283. 

  283.                         <a class="dropdown-item" href="../lists.html">
    284. 

  284.                           Lists
    285. 

  285.                         </a>
    286. 

  286.                         <a class="dropdown-item" href="../typography.html">
    287. 

  287.                           Typography
    288. 

  288.                         </a>
    289. 

  289.                         <a class="dropdown-item" href="../offcanvas.html">
    290. 

  290.                           Offcanvas
    291. 

  291.                         </a>
    292. 

  292.                         <a class="dropdown-item" href="../markdown.html">
    293. 

  293.                           Markdown
    294. 

  294.                         </a>
    295. 

  295.                         <a class="dropdown-item" href="../dropzone.html">
    296. 

  296.                           Dropzone
    297. 

  297.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    298. 

  298.                         </a>
    299. 

  299.                         <a class="dropdown-item" href="../lightbox.html">
    300. 

  300.                           Lightbox
    301. 

  301.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    302. 

  302.                         </a>
    303. 

  303.                         <a class="dropdown-item" href="../tinymce.html">
    304. 

  304.                           TinyMCE
    305. 

  305.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    306. 

  306.                         </a>
    307. 

  307.                         <a class="dropdown-item" href="../inline-player.html">
    308. 

  308.                           Inline player
    309. 

  309.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    310. 

  310.                         </a>
    311. 

  311.                         <div class="dropend">
    312. 

  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. 

  313.                             Authentication
    314. 

  314.                           </a>
    315. 

  315.                           <div class="dropdown-menu">
    316. 

  316.                             <a href="../sign-in.html" class="dropdown-item">
    317. 

  317.                               Sign in
    318. 

  318.                             </a>
    319. 

  319.                             <a href="../sign-in-illustration.html" class="dropdown-item">
    320. 

  320.                               Sign in with illustration
    321. 

  321.                             </a>
    322. 

  322.                             <a href="../sign-in-cover.html" class="dropdown-item">
    323. 

  323.                               Sign in with cover
    324. 

  324.                             </a>
    325. 

  325.                             <a href="../sign-up.html" class="dropdown-item">
    326. 

  326.                               Sign up
    327. 

  327.                             </a>
    328. 

  328.                             <a href="../forgot-password.html" class="dropdown-item">
    329. 

  329.                               Forgot password
    330. 

  330.                             </a>
    331. 

  331.                             <a href="../terms-of-service.html" class="dropdown-item">
    332. 

  332.                               Terms of service
    333. 

  333.                             </a>
    334. 

  334.                             <a href="../auth-lock.html" class="dropdown-item">
    335. 

  335.                               Lock screen
    336. 

  336.                             </a>
    337. 

  337.                           </div>
    338. 

  338.                         </div>
    339. 

  339.                         <div class="dropend">
    340. 

  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. 

  341.                             <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
    342. 

  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. 

  343.                             Error pages
    344. 

  344.                           </a>
    345. 

  345.                           <div class="dropdown-menu">
    346. 

  346.                             <a href="../error-404.html" class="dropdown-item">
    347. 

  347.                               404 page
    348. 

  348.                             </a>
    349. 

  349.                             <a href="../error-500.html" class="dropdown-item">
    350. 

  350.                               500 page
    351. 

  351.                             </a>
    352. 

  352.                             <a href="../error-maintenance.html" class="dropdown-item">
    353. 

  353.                               Maintenance page
    354. 

  354.                             </a>
    355. 

  355.                           </div>
    356. 

  356.                         </div>
    357. 

  357.                       </div>
    358. 

  358.                     </div>
    359. 

  359.                   </div>
    360. 

  360.                 </li>
    361. 

  361.                 <li class="nav-item">
    362. 

  362.                   <a class="nav-link" href="../form-elements.html" >
    363. 

  363.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
    364. 

  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. 

  365.                     </span>
    366. 

  366.                     <span class="nav-link-title">
    367. 

  367.                       Form elements
    368. 

  368.                     </span>
    369. 

  369.                   </a>
    370. 

  370.                 </li>
    371. 

  371.                 <li class="nav-item dropdown">
    372. 

  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. 

  373.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
    374. 

  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. 

  375.                     </span>
    376. 

  376.                     <span class="nav-link-title">
    377. 

  377.                       Extra
    378. 

  378.                     </span>
    379. 

  379.                   </a>
    380. 

  380.                   <div class="dropdown-menu">
    381. 

  381.                     <div class="dropdown-menu-columns">
    382. 

  382.                       <div class="dropdown-menu-column">
    383. 

  383.                         <a class="dropdown-item" href="../activity.html">
    384. 

  384.                           Activity
    385. 

  385.                         </a>
    386. 

  386.                         <a class="dropdown-item" href="../gallery.html">
    387. 

  387.                           Gallery
    388. 

  388.                         </a>
    389. 

  389.                         <a class="dropdown-item" href="../invoice.html">
    390. 

  390.                           Invoice
    391. 

  391.                         </a>
    392. 

  392.                         <a class="dropdown-item" href="../search-results.html">
    393. 

  393.                           Search results
    394. 

  394.                         </a>
    395. 

  395.                         <a class="dropdown-item" href="../pricing.html">
    396. 

  396.                           Pricing cards
    397. 

  397.                         </a>
    398. 

  398.                         <a class="dropdown-item" href="../pricing-table.html">
    399. 

  399.                           Pricing table
    400. 

  400.                         </a>
    401. 

  401.                         <a class="dropdown-item" href="../faq.html">
    402. 

  402.                           FAQ
    403. 

  403.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    404. 

  404.                         </a>
    405. 

  405.                         <a class="dropdown-item" href="../users.html">
    406. 

  406.                           Users
    407. 

  407.                         </a>
    408. 

  408.                         <a class="dropdown-item" href="../license.html">
    409. 

  409.                           License
    410. 

  410.                         </a>
    411. 

  411.                       </div>
    412. 

  412.                       <div class="dropdown-menu-column">
    413. 

  413.                         <a class="dropdown-item" href="../logs.html">
    414. 

  414.                           Logs
    415. 

  415.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    416. 

  416.                         </a>
    417. 

  417.                         <a class="dropdown-item" href="../music.html">
    418. 

  418.                           Music
    419. 

  419.                         </a>
    420. 

  420.                         <a class="dropdown-item" href="../tasks.html">
    421. 

  421.                           Tasks
    422. 

  422.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    423. 

  423.                         </a>
    424. 

  424.                         <a class="dropdown-item" href="../uptime.html">
    425. 

  425.                           Uptime monitor
    426. 

  426.                         </a>
    427. 

  427.                         <a class="dropdown-item" href="../widgets.html">
    428. 

  428.                           Widgets
    429. 

  429.                         </a>
    430. 

  430.                         <a class="dropdown-item" href="../wizard.html">
    431. 

  431.                           Wizard
    432. 

  432.                         </a>
    433. 

  433.                         <a class="dropdown-item" href="../settings.html">
    434. 

  434.                           Settings
    435. 

  435.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    436. 

  436.                         </a>
    437. 

  437.                         <a class="dropdown-item" href="../job-listing.html">
    438. 

  438.                           Job listing
    439. 

  439.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    440. 

  440.                         </a>
    441. 

  441.                       </div>
    442. 

  442.                     </div>
    443. 

  443.                   </div>
    444. 

  444.                 </li>
    445. 

  445.                 <li class="nav-item dropdown">
    446. 

  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. 

  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. 

  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. 

  449.                     </span>
    450. 

  450.                     <span class="nav-link-title">
    451. 

  451.                       Layout
    452. 

  452.                     </span>
    453. 

  453.                   </a>
    454. 

  454.                   <div class="dropdown-menu">
    455. 

  455.                     <div class="dropdown-menu-columns">
    456. 

  456.                       <div class="dropdown-menu-column">
    457. 

  457.                         <a class="dropdown-item" href="../layout-horizontal.html">
    458. 

  458.                           Horizontal
    459. 

  459.                         </a>
    460. 

  460.                         <a class="dropdown-item" href="../layout-boxed.html">
    461. 

  461.                           Boxed
    462. 

  462.                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
    463. 

  463.                         </a>
    464. 

  464.                         <a class="dropdown-item" href="../layout-vertical.html">
    465. 

  465.                           Vertical
    466. 

  466.                         </a>
    467. 

  467.                         <a class="dropdown-item" href="../layout-vertical-transparent.html">
    468. 

  468.                           Vertical transparent
    469. 

  469.                         </a>
    470. 

  470.                         <a class="dropdown-item" href="../layout-vertical-right.html">
    471. 

  471.                           Right vertical
    472. 

  472.                         </a>
    473. 

  473.                         <a class="dropdown-item" href="../layout-condensed.html">
    474. 

  474.                           Condensed
    475. 

  475.                         </a>
    476. 

  476.                         <a class="dropdown-item" href="../layout-combo.html">
    477. 

  477.                           Combined
    478. 

  478.                         </a>
    479. 

  479.                       </div>
    480. 

  480.                       <div class="dropdown-menu-column">
    481. 

  481.                         <a class="dropdown-item" href="../layout-navbar-dark.html">
    482. 

  482.                           Navbar dark
    483. 

  483.                         </a>
    484. 

  484.                         <a class="dropdown-item" href="../layout-navbar-sticky.html">
    485. 

  485.                           Navbar sticky
    486. 

  486.                         </a>
    487. 

  487.                         <a class="dropdown-item" href="../layout-navbar-overlap.html">
    488. 

  488.                           Navbar overlap
    489. 

  489.                         </a>
    490. 

  490.                         <a class="dropdown-item" href="../layout-rtl.html">
    491. 

  491.                           RTL mode
    492. 

  492.                         </a>
    493. 

  493.                         <a class="dropdown-item" href="../layout-fluid.html">
    494. 

  494.                           Fluid
    495. 

  495.                         </a>
    496. 

  496.                         <a class="dropdown-item" href="../layout-fluid-vertical.html">
    497. 

  497.                           Fluid vertical
    498. 

  498.                         </a>
    499. 

  499.                       </div>
    500. 

  500.                     </div>
    501. 

  501.                   </div>
    502. 

  502.                 </li>
    503. 

  503.                 <li class="nav-item">
    504. 

  504.                   <a class="nav-link" href="../icons.html" >
    505. 

  505.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
    506. 

  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. 

  507.                     </span>
    508. 

  508.                     <span class="nav-link-title">
    509. 

  509.                       2853 icons
    510. 

  510.                     </span>
    511. 

  511.                   </a>
    512. 

  512.                 </li>
    513. 

  513.                 <li class="nav-item active dropdown">
    514. 

  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. 

  515.                     <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
    516. 

  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. 

  517.                     </span>
    518. 

  518.                     <span class="nav-link-title">
    519. 

  519.                       Help
    520. 

  520.                     </span>
    521. 

  521.                   </a>
    522. 

  522.                   <div class="dropdown-menu">
    523. 

  523.                     <a class="dropdown-item" href="../docs/index.html">
    524. 

  524.                       Documentation
    525. 

  525.                     </a>
    526. 

  526.                     <a class="dropdown-item" href="../changelog.html">
    527. 

  527.                       Changelog
    528. 

  528.                     </a>
    529. 

  529.                     <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
    530. 

  530.                       Source code
    531. 

  531.                     </a>
    532. 

  532.                     <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
    533. 

  533.                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    534. 

  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. 

  535.                       Sponsor project!
    536. 

  536.                     </a>
    537. 

  537.                   </div>
    538. 

  538.                 </li>
    539. 

  539.               </ul>
    540. 

  540.               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
    541. 

  541.                 <form action="../" method="get" autocomplete="off" novalidate>
    542. 

  542.                   <div class="input-icon">
    543. 

  543.                     <span class="input-icon-addon">
    544. 

  544.                       <!-- Download SVG icon from http://tabler-icons.io/i/search -->
    545. 

  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. 

  546.                     </span>
    547. 

  547.                     <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
    548. 

  548.                   </div>
    549. 

  549.                 </form>
    550. 

  550.               </div>
    551. 

  551.             </div>
    552. 

  552.           </div>
    553. 

  553.         </div>
    554. 

  554.       </div>
    555. 

  555.       <div class="page-wrapper">
    556. 

  556.         <!-- Page header -->
    557. 

  557.         <div class="page-header d-print-none">
    558. 

  558.           <div class="container-xl">
    559. 

  559.             <div class="row g-2 align-items-center">
    560. 

  560.               <div class="col">
    561. 

  561.                 <h2 class="page-title">
    562. 

  562.                   Documentation
    563. 

  563.                 </h2>
    564. 

  564.               </div>
    565. 

  565.             </div>
    566. 

  566.           </div>
    567. 

  567.         </div>
    568. 

  568.         <!-- Page body -->
    569. 

  569.         <div class="page-body">
    570. 

  570.           <div class="container-xl">
    571. 

  571.             <div class="row gx-lg-5">
    572. 

  572.               <div class="d-none d-lg-block col-lg-3">
    573. 

  573.                 <ul class="nav nav-pills nav-vertical">
    574. 

  574.                   <li class="nav-item">
    575. 

  575.                     <a href="../docs/" class="nav-link">
    576. 

  576.                       Introduction
    577. 

  577.                     </a>
    578. 

  578.                   </li>
    579. 

  579.                   <li class="nav-item">
    580. 

  580.                     <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    581. 

  581.                       Getting started
    582. 

  582.                       <span class="nav-link-toggle"></span>
    583. 

  583.                     </a>
    584. 

  584.                     <ul class="nav nav-pills collapse" id="menu-base">
    585. 

  585.                       <li class="nav-item">
    586. 

  586.                         <a href="../docs/getting-started.html" class="nav-link">
    587. 

  587.                           Getting Started
    588. 

  588.                         </a>
    589. 

  589.                       </li>
    590. 

  590.                       <li class="nav-item">
    591. 

  591.                         <a href="../docs/download.html" class="nav-link">
    592. 

  592.                           Download
    593. 

  593.                         </a>
    594. 

  594.                       </li>
    595. 

  595.                       <li class="nav-item">
    596. 

  596.                         <a href="../docs/browser-support.html" class="nav-link">
    597. 

  597.                           Browser Support
    598. 

  598.                         </a>
    599. 

  599.                       </li>
    600. 

  600.                     </ul>
    601. 

  601.                   </li>
    602. 

  602.                   <li class="nav-item">
    603. 

  603.                     <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    604. 

  604.                       Content
    605. 

  605.                       <span class="nav-link-toggle"></span>
    606. 

  606.                     </a>
    607. 

  607.                     <ul class="nav nav-pills collapse" id="menu-content">
    608. 

  608.                       <li class="nav-item">
    609. 

  609.                         <a href="../docs/colors.html" class="nav-link">
    610. 

  610.                           Colors
    611. 

  611.                         </a>
    612. 

  612.                       </li>
    613. 

  613.                       <li class="nav-item">
    614. 

  614.                         <a href="../docs/typography.html" class="nav-link">
    615. 

  615.                           Typography
    616. 

  616.                         </a>
    617. 

  617.                       </li>
    618. 

  618.                       <li class="nav-item">
    619. 

  619.                         <a href="../docs/icons.html" class="nav-link">
    620. 

  620.                           Icons
    621. 

  621.                         </a>
    622. 

  622.                       </li>
    623. 

  623.                       <li class="nav-item">
    624. 

  624.                         <a href="../docs/customize.html" class="nav-link">
    625. 

  625.                           Customize Tabler
    626. 

  626.                         </a>
    627. 

  627.                       </li>
    628. 

  628.                     </ul>
    629. 

  629.                   </li>
    630. 

  630.                   <li class="nav-item">
    631. 

  631.                     <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    632. 

  632.                       Layout
    633. 

  633.                       <span class="nav-link-toggle"></span>
    634. 

  634.                     </a>
    635. 

  635.                     <ul class="nav nav-pills collapse" id="menu-layout">
    636. 

  636.                       <li class="nav-item">
    637. 

  637.                         <a href="../docs/page-headers.html" class="nav-link">
    638. 

  638.                           Page headers
    639. 

  639.                         </a>
    640. 

  640.                       </li>
    641. 

  641.                     </ul>
    642. 

  642.                   </li>
    643. 

  643.                   <li class="nav-item">
    644. 

  644.                     <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    645. 

  645.                       Form components
    646. 

  646.                       <span class="nav-link-toggle"></span>
    647. 

  647.                     </a>
    648. 

  648.                     <ul class="nav nav-pills collapse" id="menu-forms">
    649. 

  649.                       <li class="nav-item">
    650. 

  650.                         <a href="../docs/form-elements.html" class="nav-link">
    651. 

  651.                           Form elements
    652. 

  652.                         </a>
    653. 

  653.                       </li>
    654. 

  654.                       <li class="nav-item">
    655. 

  655.                         <a href="../docs/form-helpers.html" class="nav-link">
    656. 

  656.                           Form helpers
    657. 

  657.                         </a>
    658. 

  658.                       </li>
    659. 

  659.                       <li class="nav-item">
    660. 

  660.                         <a href="../docs/form-validation.html" class="nav-link">
    661. 

  661.                           Validation states
    662. 

  662.                         </a>
    663. 

  663.                       </li>
    664. 

  664.                       <li class="nav-item">
    665. 

  665.                         <a href="../docs/form-image-check.html" class="nav-link">
    666. 

  666.                           Image check
    667. 

  667.                         </a>
    668. 

  668.                       </li>
    669. 

  669.                       <li class="nav-item">
    670. 

  670.                         <a href="../docs/form-color-check.html" class="nav-link">
    671. 

  671.                           Color check
    672. 

  672.                         </a>
    673. 

  673.                       </li>
    674. 

  674.                       <li class="nav-item">
    675. 

  675.                         <a href="../docs/form-selectboxes.html" class="nav-link">
    676. 

  676.                           Form selectboxes
    677. 

  677.                         </a>
    678. 

  678.                       </li>
    679. 

  679.                       <li class="nav-item">
    680. 

  680.                         <a href="../docs/form-fieldset.html" class="nav-link">
    681. 

  681.                           Form fieldset
    682. 

  682.                         </a>
    683. 

  683.                       </li>
    684. 

  684.                     </ul>
    685. 

  685.                   </li>
    686. 

  686.                   <li class="nav-item">
    687. 

  687.                     <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    688. 

  688.                       Components
    689. 

  689.                       <span class="nav-link-toggle"></span>
    690. 

  690.                     </a>
    691. 

  691.                     <ul class="nav nav-pills collapse" id="menu-components">
    692. 

  692.                       <li class="nav-item">
    693. 

  693.                         <a href="../docs/alerts.html" class="nav-link">
    694. 

  694.                           Alerts
    695. 

  695.                         </a>
    696. 

  696.                       </li>
    697. 

  697.                       <li class="nav-item">
    698. 

  698.                         <a href="../docs/avatars.html" class="nav-link">
    699. 

  699.                           Avatars
    700. 

  700.                         </a>
    701. 

  701.                       </li>
    702. 

  702.                       <li class="nav-item">
    703. 

  703.                         <a href="../docs/badges.html" class="nav-link">
    704. 

  704.                           Badges
    705. 

  705.                         </a>
    706. 

  706.                       </li>
    707. 

  707.                       <li class="nav-item">
    708. 

  708.                         <a href="../docs/breadcrumb.html" class="nav-link">
    709. 

  709.                           Breadcrumb
    710. 

  710.                         </a>
    711. 

  711.                       </li>
    712. 

  712.                       <li class="nav-item">
    713. 

  713.                         <a href="../docs/buttons.html" class="nav-link">
    714. 

  714.                           Buttons
    715. 

  715.                         </a>
    716. 

  716.                       </li>
    717. 

  717.                       <li class="nav-item">
    718. 

  718.                         <a href="../docs/cards.html" class="nav-link">
    719. 

  719.                           Cards
    720. 

  720.                         </a>
    721. 

  721.                       </li>
    722. 

  722.                       <li class="nav-item">
    723. 

  723.                         <a href="../docs/carousel.html" class="nav-link">
    724. 

  724.                           Carousel
    725. 

  725.                         </a>
    726. 

  726.                       </li>
    727. 

  727.                       <li class="nav-item">
    728. 

  728.                         <a href="../docs/datagrid.html" class="nav-link">
    729. 

  729.                           Data grid
    730. 

  730.                         </a>
    731. 

  731.                       </li>
    732. 

  732.                       <li class="nav-item">
    733. 

  733.                         <a href="../docs/dropdowns.html" class="nav-link">
    734. 

  734.                           Dropdowns
    735. 

  735.                         </a>
    736. 

  736.                       </li>
    737. 

  737.                       <li class="nav-item">
    738. 

  738.                         <a href="../docs/divider.html" class="nav-link">
    739. 

  739.                           Divider
    740. 

  740.                         </a>
    741. 

  741.                       </li>
    742. 

  742.                       <li class="nav-item">
    743. 

  743.                         <a href="../docs/empty.html" class="nav-link">
    744. 

  744.                           Empty states
    745. 

  745.                         </a>
    746. 

  746.                       </li>
    747. 

  747.                       <li class="nav-item">
    748. 

  748.                         <a href="../docs/modals.html" class="nav-link">
    749. 

  749.                           Modals
    750. 

  750.                         </a>
    751. 

  751.                       </li>
    752. 

  752.                       <li class="nav-item">
    753. 

  753.                         <a href="../docs/page-headers.html" class="nav-link">
    754. 

  754.                           Page headers
    755. 

  755.                         </a>
    756. 

  756.                       </li>
    757. 

  757.                       <li class="nav-item">
    758. 

  758.                         <a href="../docs/progress.html" class="nav-link">
    759. 

  759.                           Progress
    760. 

  760.                         </a>
    761. 

  761.                       </li>
    762. 

  762.                       <li class="nav-item">
    763. 

  763.                         <a href="../docs/range-slider.html" class="nav-link">
    764. 

  764.                           Range slider
    765. 

  765.                         </a>
    766. 

  766.                       </li>
    767. 

  767.                       <li class="nav-item">
    768. 

  768.                         <a href="../docs/ribbons.html" class="nav-link">
    769. 

  769.                           Ribbons
    770. 

  770.                         </a>
    771. 

  771.                       </li>
    772. 

  772.                       <li class="nav-item">
    773. 

  773.                         <a href="../docs/placeholder.html" class="nav-link">
    774. 

  774.                           Placeholder
    775. 

  775.                         </a>
    776. 

  776.                       </li>
    777. 

  777.                       <li class="nav-item">
    778. 

  778.                         <a href="../docs/spinners.html" class="nav-link">
    779. 

  779.                           Spinners
    780. 

  780.                         </a>
    781. 

  781.                       </li>
    782. 

  782.                       <li class="nav-item">
    783. 

  783.                         <a href="../docs/statuses.html" class="nav-link">
    784. 

  784.                           Statuses
    785. 

  785.                         </a>
    786. 

  786.                       </li>
    787. 

  787.                       <li class="nav-item">
    788. 

  788.                         <a href="../docs/steps.html" class="nav-link">
    789. 

  789.                           Steps
    790. 

  790.                         </a>
    791. 

  791.                       </li>
    792. 

  792.                       <li class="nav-item">
    793. 

  793.                         <a href="../docs/switch-icon.html" class="nav-link">
    794. 

  794.                           Switch icon
    795. 

  795.                         </a>
    796. 

  796.                       </li>
    797. 

  797.                       <li class="nav-item">
    798. 

  798.                         <a href="../docs/tables.html" class="nav-link">
    799. 

  799.                           Tables
    800. 

  800.                         </a>
    801. 

  801.                       </li>
    802. 

  802.                       <li class="nav-item">
    803. 

  803.                         <a href="../docs/tabs.html" class="nav-link">
    804. 

  804.                           Tabs
    805. 

  805.                         </a>
    806. 

  806.                       </li>
    807. 

  807.                       <li class="nav-item">
    808. 

  808.                         <a href="../docs/timelines.html" class="nav-link">
    809. 

  809.                           Timelines
    810. 

  810.                         </a>
    811. 

  811.                       </li>
    812. 

  812.                       <li class="nav-item">
    813. 

  813.                         <a href="../docs/toasts.html" class="nav-link">
    814. 

  814.                           Toasts
    815. 

  815.                         </a>
    816. 

  816.                       </li>
    817. 

  817.                       <li class="nav-item">
    818. 

  818.                         <a href="../docs/tracking.html" class="nav-link">
    819. 

  819.                           Tracking
    820. 

  820.                         </a>
    821. 

  821.                       </li>
    822. 

  822.                       <li class="nav-item">
    823. 

  823.                         <a href="../docs/tooltips.html" class="nav-link">
    824. 

  824.                           Tooltips
    825. 

  825.                         </a>
    826. 

  826.                       </li>
    827. 

  827.                       <li class="nav-item">
    828. 

  828.                         <a href="../docs/popover.html" class="nav-link">
    829. 

  829.                           Popover
    830. 

  830.                         </a>
    831. 

  831.                       </li>
    832. 

  832.                     </ul>
    833. 

  833.                   </li>
    834. 

  834.                   <li class="nav-item">
    835. 

  835.                     <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    836. 

  836.                       Utilities
    837. 

  837.                       <span class="nav-link-toggle"></span>
    838. 

  838.                     </a>
    839. 

  839.                     <ul class="nav nav-pills collapse" id="menu-utils">
    840. 

  840.                       <li class="nav-item">
    841. 

  841.                         <a href="../docs/borders.html" class="nav-link">
    842. 

  842.                           Borders
    843. 

  843.                         </a>
    844. 

  844.                       </li>
    845. 

  845.                       <li class="nav-item">
    846. 

  846.                         <a href="../docs/cursors.html" class="nav-link">
    847. 

  847.                           Cursors
    848. 

  848.                         </a>
    849. 

  849.                       </li>
    850. 

  850.                       <li class="nav-item">
    851. 

  851.                         <a href="../docs/interactions.html" class="nav-link">
    852. 

  852.                           Interactions
    853. 

  853.                         </a>
    854. 

  854.                       </li>
    855. 

  855.                     </ul>
    856. 

  856.                   </li>
    857. 

  857.                   <li class="nav-item">
    858. 

  858.                     <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
    859. 

  859.                       Plugins
    860. 

  860.                       <span class="nav-link-toggle"></span>
    861. 

  861.                     </a>
    862. 

  862.                     <ul class="nav nav-pills collapse" id="menu-plugins">
    863. 

  863.                       <li class="nav-item">
    864. 

  864.                         <a href="../docs/autosize.html" class="nav-link">
    865. 

  865.                           Autosize
    866. 

  866.                         </a>
    867. 

  867.                       </li>
    868. 

  868.                       <li class="nav-item">
    869. 

  869.                         <a href="../docs/input-mask.html" class="nav-link">
    870. 

  870.                           Form input mask
    871. 

  871.                         </a>
    872. 

  872.                       </li>
    873. 

  873.                       <li class="nav-item">
    874. 

  874.                         <a href="../docs/flags.html" class="nav-link">
    875. 

  875.                           Flags
    876. 

  876.                         </a>
    877. 

  877.                       </li>
    878. 

  878.                       <li class="nav-item">
    879. 

  879.                         <a href="../docs/payments.html" class="nav-link">
    880. 

  880.                           Payments
    881. 

  881.                         </a>
    882. 

  882.                       </li>
    883. 

  883.                       <li class="nav-item">
    884. 

  884.                         <a href="../docs/charts.html" class="nav-link">
    885. 

  885.                           Charts
    886. 

  886.                         </a>
    887. 

  887.                       </li>
    888. 

  888.                       <li class="nav-item">
    889. 

  889.                         <a href="../docs/dropzone.html" class="nav-link">
    890. 

  890.                           Dropzone
    891. 

  891.                         </a>
    892. 

  892.                       </li>
    893. 

  893.                       <li class="nav-item">
    894. 

  894.                         <a href="../docs/inline-player.html" class="nav-link">
    895. 

  895.                           Inline player
    896. 

  896.                         </a>
    897. 

  897.                       </li>
    898. 

  898.                       <li class="nav-item">
    899. 

  899.                         <a href="../docs/tinymce.html" class="nav-link">
    900. 

  900.                           TinyMCE
    901. 

  901.                         </a>
    902. 

  902.                       </li>
    903. 

  903.                     </ul>
    904. 

  904.                   </li>
    905. 

  905.                   <li class="nav-item">
    906. 

  906.                     <a href="../changelog.html" class="nav-link">
    907. 

  907.                       Changelog
    908. 

  908.                       <span class="badge bg-primary-lt ms-auto">1.0.0-beta14</span>
    909. 

  909.                     </a>
    910. 

  910.                   </li>
    911. 

  911.                 </ul>
    912. 

  912.               </div>
    913. 

  913.               <div class="col-lg-9">
    914. 

  914.                 <div class="card card-lg">
    915. 

  915.                   <div class="card-body">
    916. 

  916.                     <div class="markdown">
    917. 

  917.                       <div>
    918. 

  918.                         <div class="d-flex mb-3">
    919. 

  919.                           <h1 class="m-0">Cards</h1>
    920. 

  920.                           <p class="ms-auto">
    921. 

  921.                             <a href="https://getbootstrap.com/docs/5.0/components/card/" target="_blank" class="d-flex align-items-center">
    922. 

  922.                               <!-- Download SVG icon from http://tabler-icons.io/i/external-link -->
    923. 

  923.                               <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-primary" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
    924. 

  924.                               Bootstrap documentation
    925. 

  925.                             </a>
    926. 

  926.                           </p>
    927. 

  927.                         </div>
    928. 

  928.                         <p class="h3 fw-normal mb-4 text-muted">Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.</p>
    929. 

  929.                       </div>
    930. 

  930.                       <h2 id="default-card">Default card</h2>
    931. 

  931.                       <p>Use the <code class="language-plaintext highlighter-rouge">.card</code> and <code class="language-plaintext highlighter-rouge">.card-body</code> classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.</p>
    932. 

  932.                       <div class="example no_toc_section example-bg">
    933. 

  933.                         <div class="example-content">
    934. 

  934.                           <div class="example-column example-column-1">
    935. 

  935.                             <div class="card">
    936. 

  936.                               <div class="card-body">
    937. 

  937.                                 <p class="text-muted">This is some text within a card body.</p>
    938. 

  938.                               </div>
    939. 

  939.                             </div>
    940. 

  940.                           </div>
    941. 

  941.                         </div>
    942. 

  942.                       </div>
    943. 

  943.                       <div class="example-code">
    944. 

  944.                         <figure class="highlight">
    945. 

  945.                           <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>
    946. 

  946.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    947. 

  947.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    948. 

  948.   <span class="nt">&lt;/div&gt;</span>
    949. 

  949. <span class="nt">&lt;/div&gt;</span></code></pre>
    950. 

  950.                         </figure>
    951. 

  951.                       </div>
    952. 

  952.                       <h2 id="card-padding">Card padding</h2>
    953. 

  953.                       <p>You can change the padding of a newly created card. To do it, use the <code class="language-plaintext highlighter-rouge">.card-sm</code>, <code class="language-plaintext highlighter-rouge">.card-md</code> or <code class="language-plaintext highlighter-rouge">.card-lg</code> classes.</p>
    954. 

  954.                       <p>Cards with the <code class="language-plaintext highlighter-rouge">.card-sm</code> class are well suited for small items such as widgets, etc., while the <code class="language-plaintext highlighter-rouge">.card-lg</code> class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.</p>
    955. 

  955.                       <div class="example no_toc_section example-bg">
    956. 

  956.                         <div class="example-content">
    957. 

  957.                           <div class="example-column example-column-2">
    958. 

  958.                             <div class="space-y">
    959. 

  959.                               <div class="card card-sm">
    960. 

  960.                                 <div class="card-body">
    961. 

  961.                                   <p class="text-muted">This is some text within a card body.</p>
    962. 

  962.                                 </div>
    963. 

  963.                               </div>
    964. 

  964.                               <div class="card">
    965. 

  965.                                 <div class="card-body">
    966. 

  966.                                   <p class="text-muted">This is some text within a card body.</p>
    967. 

  967.                                 </div>
    968. 

  968.                               </div>
    969. 

  969.                               <div class="card card-md">
    970. 

  970.                                 <div class="card-body">
    971. 

  971.                                   <p class="text-muted">This is some text within a card body.</p>
    972. 

  972.                                 </div>
    973. 

  973.                               </div>
    974. 

  974.                               <div class="card card-lg">
    975. 

  975.                                 <div class="card-body">
    976. 

  976.                                   <p class="text-muted">This is some text within a card body.</p>
    977. 

  977.                                 </div>
    978. 

  978.                               </div>
    979. 

  979.                             </div>
    980. 

  980.                           </div>
    981. 

  981.                         </div>
    982. 

  982.                       </div>
    983. 

  983.                       <div class="example-code">
    984. 

  984.                         <figure class="highlight">
    985. 

  985.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-sm"</span><span class="nt">&gt;</span>
    986. 

  986.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    987. 

  987.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    988. 

  988.   <span class="nt">&lt;/div&gt;</span>
    989. 

  989. <span class="nt">&lt;/div&gt;</span>
    990. 

  990. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    991. 

  991.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    992. 

  992.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    993. 

  993.   <span class="nt">&lt;/div&gt;</span>
    994. 

  994. <span class="nt">&lt;/div&gt;</span>
    995. 

  995. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-md"</span><span class="nt">&gt;</span>
    996. 

  996.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    997. 

  997.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    998. 

  998.   <span class="nt">&lt;/div&gt;</span>
    999. 

  999. <span class="nt">&lt;/div&gt;</span>
    1000. 

  1000. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-lg"</span><span class="nt">&gt;</span>
    1001. 

  1001.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1002. 

  1002.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    1003. 

  1003.   <span class="nt">&lt;/div&gt;</span>
    1004. 

  1004. <span class="nt">&lt;/div&gt;</span></code></pre>
    1005. 

  1005.                         </figure>
    1006. 

  1006.                       </div>
    1007. 

  1007.                       <h2 id="card-with-title">Card with title</h2>
    1008. 

  1008.                       <p>Add a title to your card by including the <code class="language-plaintext highlighter-rouge">.card-title</code> class within <code class="language-plaintext highlighter-rouge">.card-body</code>. You can also place the title inside the <code class="language-plaintext highlighter-rouge">.card-header</code> element to separate the title from the content with a horizontal line.</p>
    1009. 

  1009.                       <div class="example no_toc_section example-bg">
    1010. 

  1010.                         <div class="example-content">
    1011. 

  1011.                           <div class="example-column example-column-1">
    1012. 

  1012.                             <div class="space-y">
    1013. 

  1013.                               <div class="card">
    1014. 

  1014.                                 <div class="card-body">
    1015. 

  1015.                                   <h3 class="card-title">Card title</h3>
    1016. 

  1016.                                   <p class="text-muted">This is some text within a card body.</p>
    1017. 

  1017.                                 </div>
    1018. 

  1018.                               </div>
    1019. 

  1019.                               <div class="card">
    1020. 

  1020.                                 <div class="card-header">
    1021. 

  1021.                                   <h3 class="card-title">Card title</h3>
    1022. 

  1022.                                 </div>
    1023. 

  1023.                                 <div class="card-body">
    1024. 

  1024.                                   <p class="text-muted">This is some text within a card body.</p>
    1025. 

  1025.                                 </div>
    1026. 

  1026.                               </div>
    1027. 

  1027.                             </div>
    1028. 

  1028.                           </div>
    1029. 

  1029.                         </div>
    1030. 

  1030.                       </div>
    1031. 

  1031.                       <div class="example-code">
    1032. 

  1032.                         <figure class="highlight">
    1033. 

  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. 

  1034.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1035. 

  1035.     <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
    1036. 

  1036.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    1037. 

  1037.   <span class="nt">&lt;/div&gt;</span>
    1038. 

  1038. <span class="nt">&lt;/div&gt;</span>
    1039. 

  1039. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1040. 

  1040.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    1041. 

  1041.     <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
    1042. 

  1042.   <span class="nt">&lt;/div&gt;</span>
    1043. 

  1043.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1044. 

  1044.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
    1045. 

  1045.   <span class="nt">&lt;/div&gt;</span>
    1046. 

  1046. <span class="nt">&lt;/div&gt;</span></code></pre>
    1047. 

  1047.                         </figure>
    1048. 

  1048.                       </div>
    1049. 

  1049.                       <h2 id="card-with-title-and-image">Card with title and image</h2>
    1050. 

  1050.                       <p>To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users’ attention.</p>
    1051. 

  1051.                       <div class="example no_toc_section example-bg">
    1052. 

  1052.                         <div class="example-content">
    1053. 

  1053.                           <div class="example-column example-column-1">
    1054. 

  1054.                             <div class="card">
    1055. 

  1055.                               <div class="card-img-top img-responsive img-responsive-21x9" style="background-image: url(../static/photos/9f36332564ca271d.jpg)"></div>
    1056. 

  1056.                               <div class="card-body">
    1057. 

  1057.                                 <h3 class="card-title">Card with title and image</h3>
    1058. 

  1058.                                 <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1059. 

  1059.                                   neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
    1060. 

  1060.                               </div>
    1061. 

  1061.                             </div>
    1062. 

  1062.                           </div>
    1063. 

  1063.                         </div>
    1064. 

  1064.                       </div>
    1065. 

  1065.                       <div class="example-code">
    1066. 

  1066.                         <figure class="highlight">
    1067. 

  1067.                           <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>
    1068. 

  1068.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-img-top img-responsive img-responsive-21x9"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/div&gt;</span>
    1069. 

  1069.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1070. 

  1070.     <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with title and image<span class="nt">&lt;/h3&gt;</span>
    1071. 

  1071.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1072. 

  1072.       neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
    1073. 

  1073.   <span class="nt">&lt;/div&gt;</span>
    1074. 

  1074. <span class="nt">&lt;/div&gt;</span></code></pre>
    1075. 

  1075.                         </figure>
    1076. 

  1076.                       </div>
    1077. 

  1077.                       <h2 id="blog-post-card">Blog post card</h2>
    1078. 

  1078.                       <p>Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the <code class="language-plaintext highlighter-rouge">.card-img-top</code> class. Thanks to the <code class="language-plaintext highlighter-rouge">.d-flex</code> and <code class="language-plaintext highlighter-rouge">.flex-column</code> classes within <code class="language-plaintext highlighter-rouge">.card-body</code>, the author details will be displayed at the bottom of the card.</p>
    1079. 

  1079.                       <div class="example no_toc_section example-bg">
    1080. 

  1080.                         <div class="example-content">
    1081. 

  1081.                           <div class="example-column example-column-1">
    1082. 

  1082.                             <div class="card d-flex flex-column">
    1083. 

  1083.                               <a href="javascript:void(0)">
    1084. 

  1084.                                 <img class="card-img-top" src="../static/photos/36e273986ed577b8.jpg" alt="How do you know she is a witch?" />
    1085. 

  1085.                               </a>
    1086. 

  1086.                               <div class="card-body d-flex flex-column">
    1087. 

  1087.                                 <h3 class="card-title"><a href="javascript:void(0)">How do you know she is a witch?</a></h3>
    1088. 

  1088.                                 <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
    1089. 

  1089.                                 <div class="d-flex align-items-center pt-4 mt-auto">
    1090. 

  1090.                                   <span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
    1091. 

  1091.                                   <div class="ms-3">
    1092. 

  1092.                                     <a href="../profile.html" class="text-body">Maryjo Lebarree</a>
    1093. 

  1093.                                     <div class="text-muted">3 days ago</div>
    1094. 

  1094.                                   </div>
    1095. 

  1095.                                   <div class="ms-auto">
    1096. 

  1096.                                     <a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-3 text-muted">
    1097. 

  1097.                                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    1098. 

  1098.                                       <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="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>
    1099. 

  1099.                                     </a>
    1100. 

  1100.                                   </div>
    1101. 

  1101.                                 </div>
    1102. 

  1102.                               </div>
    1103. 

  1103.                             </div>
    1104. 

  1104.                           </div>
    1105. 

  1105.                         </div>
    1106. 

  1106.                       </div>
    1107. 

  1107.                       <div class="example-code">
    1108. 

  1108.                         <figure class="highlight">
    1109. 

  1109.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card d-flex flex-column"</span><span class="nt">&gt;</span>
    1110. 

  1110.   <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    1111. 

  1111.     <span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"How do you know she is a witch?"</span><span class="nt">&gt;</span>
    1112. 

  1112.   <span class="nt">&lt;/a&gt;</span>
    1113. 

  1113.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body d-flex flex-column"</span><span class="nt">&gt;</span>
    1114. 

  1114.     <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>How do you know she is a witch?<span class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
    1115. 

  1115.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...<span class="nt">&lt;/div&gt;</span>
    1116. 

  1116.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span class="nt">&gt;</span>
    1117. 

  1117.       <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;&lt;/span&gt;</span>
    1118. 

  1118.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</span><span class="nt">&gt;</span>
    1119. 

  1119.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">&gt;</span>Maryjo Lebarree<span class="nt">&lt;/a&gt;</span>
    1120. 

  1120.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
    1121. 

  1121.       <span class="nt">&lt;/div&gt;</span>
    1122. 

  1122.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-auto"</span><span class="nt">&gt;</span>
    1123. 

  1123.         <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"icon d-none d-md-inline-block ms-3 text-muted"</span><span class="nt">&gt;</span>
    1124. 

  1124.           <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/heart --&gt;</span>
    1125. 

  1125.           <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">"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"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1126. 

  1126.         <span class="nt">&lt;/a&gt;</span>
    1127. 

  1127.       <span class="nt">&lt;/div&gt;</span>
    1128. 

  1128.     <span class="nt">&lt;/div&gt;</span>
    1129. 

  1129.   <span class="nt">&lt;/div&gt;</span>
    1130. 

  1130. <span class="nt">&lt;/div&gt;</span></code></pre>
    1131. 

  1131.                         </figure>
    1132. 

  1132.                       </div>
    1133. 

  1133.                       <h2 id="row-deck">Row deck</h2>
    1134. 

  1134.                       <p>Add the <code class="language-plaintext highlighter-rouge">.row-deck</code> class to <code class="language-plaintext highlighter-rouge">.row</code>, if you want to display several cards next to one another. Thanks to that, they will all have the same height.</p>
    1135. 

  1135.                       <div class="example no_toc_section example-bg">
    1136. 

  1136.                         <div class="example-content">
    1137. 

  1137.                           <div class="example-column example-column-2">
    1138. 

  1138.                             <div class="row row-deck">
    1139. 

  1139.                               <div class="col-md-4">
    1140. 

  1140.                                 <div class="card">
    1141. 

  1141.                                   <div class="card-body">Short content</div>
    1142. 

  1142.                                 </div>
    1143. 

  1143.                               </div>
    1144. 

  1144.                               <div class="col-md-4">
    1145. 

  1145.                                 <div class="card">
    1146. 

  1146.                                   <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
    1147. 

  1147.                                 </div>
    1148. 

  1148.                               </div>
    1149. 

  1149.                               <div class="col-md-4">
    1150. 

  1150.                                 <div class="card">
    1151. 

  1151.                                   <div class="card-body">Short content</div>
    1152. 

  1152.                                 </div>
    1153. 

  1153.                               </div>
    1154. 

  1154.                             </div>
    1155. 

  1155.                           </div>
    1156. 

  1156.                         </div>
    1157. 

  1157.                       </div>
    1158. 

  1158.                       <div class="example-code">
    1159. 

  1159.                         <figure class="highlight">
    1160. 

  1160.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-deck"</span><span class="nt">&gt;</span>
    1161. 

  1161.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
    1162. 

  1162.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1163. 

  1163.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span class="nt">&lt;/div&gt;</span>
    1164. 

  1164.     <span class="nt">&lt;/div&gt;</span>
    1165. 

  1165.   <span class="nt">&lt;/div&gt;</span>
    1166. 

  1166.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
    1167. 

  1167.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1168. 

  1168.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr<span class="nt">&lt;/div&gt;</span>
    1169. 

  1169.     <span class="nt">&lt;/div&gt;</span>
    1170. 

  1170.   <span class="nt">&lt;/div&gt;</span>
    1171. 

  1171.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
    1172. 

  1172.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1173. 

  1173.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>Short content<span class="nt">&lt;/div&gt;</span>
    1174. 

  1174.     <span class="nt">&lt;/div&gt;</span>
    1175. 

  1175.   <span class="nt">&lt;/div&gt;</span>
    1176. 

  1176. <span class="nt">&lt;/div&gt;</span></code></pre>
    1177. 

  1177.                         </figure>
    1178. 

  1178.                       </div>
    1179. 

  1179.                       <h2 id="post-card-with-aside-image">Post card with aside image</h2>
    1180. 

  1180.                       <p>You can also add an image on the left side of the card. To do it, add the <code class="language-plaintext highlighter-rouge">.card-aside</code> class to the element with the <code class="language-plaintext highlighter-rouge">.card</code> class. Then add the image in the <code class="language-plaintext highlighter-rouge">.card-aside-column</code> element and it will be automatically centered and scaled to the right size.</p>
    1181. 

  1181.                       <div class="example no_toc_section example-bg">
    1182. 

  1182.                         <div class="example-content">
    1183. 

  1183.                           <div class="example-column example-column-2">
    1184. 

  1184.                             <div class="card d-flex flex-column">
    1185. 

  1185.                               <div class="row row-0 flex-fill">
    1186. 

  1186.                                 <div class="col-md-3">
    1187. 

  1187.                                   <a href="javascript:void(0)">
    1188. 

  1188.                                     <img src="../static/photos/75b555b99d5b38c4.jpg" class="w-100 h-100 object-cover" alt="Card side image" />
    1189. 

  1189.                                   </a>
    1190. 

  1190.                                 </div>
    1191. 

  1191.                                 <div class="col">
    1192. 

  1192.                                   <div class="card-body">
    1193. 

  1193.                                     <h3 class="card-title"><a href="javascript:void(0)">Shut up!</a></h3>
    1194. 

  1194.                                     <div class="text-muted">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
    1195. 

  1195.                                     <div class="d-flex align-items-center pt-4 mt-auto">
    1196. 

  1196.                                       <span class="avatar" style="background-image: url(../static/avatars/001f.jpg)"></span>
    1197. 

  1197.                                       <div class="ms-3">
    1198. 

  1198.                                         <a href="../profile.html" class="text-body">Egan Poetz</a>
    1199. 

  1199.                                         <div class="text-muted">3 days ago</div>
    1200. 

  1200.                                       </div>
    1201. 

  1201.                                       <div class="ms-auto">
    1202. 

  1202.                                         <a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-3 text-red">
    1203. 

  1203.                                           <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    1204. 

  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" /><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>
    1205. 

  1205.                                         </a>
    1206. 

  1206.                                       </div>
    1207. 

  1207.                                     </div>
    1208. 

  1208.                                   </div>
    1209. 

  1209.                                 </div>
    1210. 

  1210.                               </div>
    1211. 

  1211.                             </div>
    1212. 

  1212.                           </div>
    1213. 

  1213.                         </div>
    1214. 

  1214.                       </div>
    1215. 

  1215.                       <div class="example-code">
    1216. 

  1216.                         <figure class="highlight">
    1217. 

  1217.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card d-flex flex-column"</span><span class="nt">&gt;</span>
    1218. 

  1218.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-0 flex-fill"</span><span class="nt">&gt;</span>
    1219. 

  1219.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span class="nt">&gt;</span>
    1220. 

  1220.       <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    1221. 

  1221.         <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"w-100 h-100 object-cover"</span> <span class="na">alt=</span><span class="s">"Card side image"</span><span class="nt">&gt;</span>
    1222. 

  1222.       <span class="nt">&lt;/a&gt;</span>
    1223. 

  1223.     <span class="nt">&lt;/div&gt;</span>
    1224. 

  1224.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
    1225. 

  1225.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1226. 

  1226.         <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Shut up!<span class="nt">&lt;/a&gt;&lt;/h3&gt;</span>
    1227. 

  1227.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...<span class="nt">&lt;/div&gt;</span>
    1228. 

  1228.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</span><span class="nt">&gt;</span>
    1229. 

  1229.           <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;&lt;/span&gt;</span>
    1230. 

  1230.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</span><span class="nt">&gt;</span>
    1231. 

  1231.             <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">&gt;</span>Egan Poetz<span class="nt">&lt;/a&gt;</span>
    1232. 

  1232.             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
    1233. 

  1233.           <span class="nt">&lt;/div&gt;</span>
    1234. 

  1234.           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-auto"</span><span class="nt">&gt;</span>
    1235. 

  1235.             <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"icon d-none d-md-inline-block ms-3 text-red"</span><span class="nt">&gt;</span>
    1236. 

  1236.               <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/heart --&gt;</span>
    1237. 

  1237.               <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">"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"</span> <span class="nt">/&gt;&lt;/svg&gt;</span>
    1238. 

  1238.             <span class="nt">&lt;/a&gt;</span>
    1239. 

  1239.           <span class="nt">&lt;/div&gt;</span>
    1240. 

  1240.         <span class="nt">&lt;/div&gt;</span>
    1241. 

  1241.       <span class="nt">&lt;/div&gt;</span>
    1242. 

  1242.     <span class="nt">&lt;/div&gt;</span>
    1243. 

  1243.   <span class="nt">&lt;/div&gt;</span>
    1244. 

  1244. <span class="nt">&lt;/div&gt;</span></code></pre>
    1245. 

  1245.                         </figure>
    1246. 

  1246.                       </div>
    1247. 

  1247.                       <h2 id="color-variations">Color variations</h2>
    1248. 

  1248.                       <p>Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.</p>
    1249. 

  1249.                       <div class="example no_toc_section example-bg">
    1250. 

  1250.                         <div class="example-content">
    1251. 

  1251.                           <div class="example-column example-column-2">
    1252. 

  1252.                             <div class="row row-deck">
    1253. 

  1253.                               <div class="col-md-6">
    1254. 

  1254.                                 <div class="card">
    1255. 

  1255.                                   <div class="card-status-top bg-danger"></div>
    1256. 

  1256.                                   <div class="card-body">
    1257. 

  1257.                                     <h3 class="card-title">Card with top status</h3>
    1258. 

  1258.                                     <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1259. 

  1259.                                       neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
    1260. 

  1260.                                   </div>
    1261. 

  1261.                                 </div>
    1262. 

  1262.                               </div>
    1263. 

  1263.                               <div class="col-md-6">
    1264. 

  1264.                                 <div class="card">
    1265. 

  1265.                                   <div class="card-status-start bg-green"></div>
    1266. 

  1266.                                   <div class="card-body">
    1267. 

  1267.                                     <h3 class="card-title">Card with side status</h3>
    1268. 

  1268.                                     <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1269. 

  1269.                                       neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
    1270. 

  1270.                                   </div>
    1271. 

  1271.                                 </div>
    1272. 

  1272.                               </div>
    1273. 

  1273.                             </div>
    1274. 

  1274.                           </div>
    1275. 

  1275.                         </div>
    1276. 

  1276.                       </div>
    1277. 

  1277.                       <div class="example-code">
    1278. 

  1278.                         <figure class="highlight">
    1279. 

  1279.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-deck"</span><span class="nt">&gt;</span>
    1280. 

  1280.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
    1281. 

  1281.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1282. 

  1282.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-status-top bg-danger"</span><span class="nt">&gt;&lt;/div&gt;</span>
    1283. 

  1283.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1284. 

  1284.         <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with top status<span class="nt">&lt;/h3&gt;</span>
    1285. 

  1285.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1286. 

  1286.           neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
    1287. 

  1287.       <span class="nt">&lt;/div&gt;</span>
    1288. 

  1288.     <span class="nt">&lt;/div&gt;</span>
    1289. 

  1289.   <span class="nt">&lt;/div&gt;</span>
    1290. 

  1290.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
    1291. 

  1291.     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
    1292. 

  1292.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-status-start bg-green"</span><span class="nt">&gt;&lt;/div&gt;</span>
    1293. 

  1293.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1294. 

  1294.         <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with side status<span class="nt">&lt;/h3&gt;</span>
    1295. 

  1295.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1296. 

  1296.           neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
    1297. 

  1297.       <span class="nt">&lt;/div&gt;</span>
    1298. 

  1298.     <span class="nt">&lt;/div&gt;</span>
    1299. 

  1299.   <span class="nt">&lt;/div&gt;</span>
    1300. 

  1300. <span class="nt">&lt;/div&gt;</span></code></pre>
    1301. 

  1301.                         </figure>
    1302. 

  1302.                       </div>
    1303. 

  1303.                       <h2 id="stacked-card">Stacked card</h2>
    1304. 

  1304.                       <p>Use the <code class="language-plaintext highlighter-rouge">card-stacked</code> class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.</p>
    1305. 

  1305.                       <div class="example no_toc_section example-bg">
    1306. 

  1306.                         <div class="example-content">
    1307. 

  1307.                           <div class="example-column example-column-1">
    1308. 

  1308.                             <div class="card card-stacked">
    1309. 

  1309.                               <div class="card-body">
    1310. 

  1310.                                 <h3 class="card-title">Stacked card</h3>
    1311. 

  1311.                                 <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1312. 

  1312.                                   neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
    1313. 

  1313.                               </div>
    1314. 

  1314.                             </div>
    1315. 

  1315.                           </div>
    1316. 

  1316.                         </div>
    1317. 

  1317.                       </div>
    1318. 

  1318.                       <div class="example-code">
    1319. 

  1319.                         <figure class="highlight">
    1320. 

  1320.                           <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-stacked"</span><span class="nt">&gt;</span>
    1321. 

  1321.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1322. 

  1322.     <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Stacked card<span class="nt">&lt;/h3&gt;</span>
    1323. 

  1323.     <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
    1324. 

  1324.       neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
    1325. 

  1325.   <span class="nt">&lt;/div&gt;</span>
    1326. 

  1326. <span class="nt">&lt;/div&gt;</span></code></pre>
    1327. 

  1327.                         </figure>
    1328. 

  1328.                       </div>
    1329. 

  1329.                       <h2 id="tabbed-card">Tabbed card</h2>
    1330. 

  1330.                       <p>Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.</p>
    1331. 

  1331.                       <div class="example no_toc_section example-bg">
    1332. 

  1332.                         <div class="example-content">
    1333. 

  1333.                           <div class="example-column example-column-2">
    1334. 

  1334.                             <!-- Cards with tabs component -->
    1335. 

  1335.                             <div class="card-tabs">
    1336. 

  1336.                               <!-- Cards navigation -->
    1337. 

  1337.                               <ul class="nav nav-tabs">
    1338. 

  1338.                                 <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
    1339. 

  1339.                                 <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
    1340. 

  1340.                                 <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
    1341. 

  1341.                                 <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
    1342. 

  1342.                               </ul>
    1343. 

  1343.                               <div class="tab-content">
    1344. 

  1344.                                 <!-- Content of card #1 -->
    1345. 

  1345.                                 <div id="tab-top-1" class="card tab-pane active show">
    1346. 

  1346.                                   <div class="card-body">
    1347. 

  1347.                                     <div class="card-title">Content of tab #1</div>
    1348. 

  1348.                                     <p class="text-muted">
    1349. 

  1349.                                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1350. 

  1350.                                     </p>
    1351. 

  1351.                                   </div>
    1352. 

  1352.                                 </div>
    1353. 

  1353.                                 <!-- Content of card #2 -->
    1354. 

  1354.                                 <div id="tab-top-2" class="card tab-pane">
    1355. 

  1355.                                   <div class="card-body">
    1356. 

  1356.                                     <div class="card-title">Content of tab #2</div>
    1357. 

  1357.                                     <p class="text-muted">
    1358. 

  1358.                                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1359. 

  1359.                                     </p>
    1360. 

  1360.                                   </div>
    1361. 

  1361.                                 </div>
    1362. 

  1362.                                 <!-- Content of card #3 -->
    1363. 

  1363.                                 <div id="tab-top-3" class="card tab-pane">
    1364. 

  1364.                                   <div class="card-body">
    1365. 

  1365.                                     <div class="card-title">Content of tab #3</div>
    1366. 

  1366.                                     <p class="text-muted">
    1367. 

  1367.                                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1368. 

  1368.                                     </p>
    1369. 

  1369.                                   </div>
    1370. 

  1370.                                 </div>
    1371. 

  1371.                                 <!-- Content of card #4 -->
    1372. 

  1372.                                 <div id="tab-top-4" class="card tab-pane">
    1373. 

  1373.                                   <div class="card-body">
    1374. 

  1374.                                     <div class="card-title">Content of tab #4</div>
    1375. 

  1375.                                     <p class="text-muted">
    1376. 

  1376.                                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1377. 

  1377.                                     </p>
    1378. 

  1378.                                   </div>
    1379. 

  1379.                                 </div>
    1380. 

  1380.                               </div>
    1381. 

  1381.                             </div>
    1382. 

  1382.                           </div>
    1383. 

  1383.                         </div>
    1384. 

  1384.                       </div>
    1385. 

  1385.                       <div class="example-code">
    1386. 

  1386.                         <figure class="highlight">
    1387. 

  1387.                           <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
    1388. 

  1388. <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs"</span><span class="nt">&gt;</span>
    1389. 

  1389.   <span class="c">&lt;!-- Cards navigation --&gt;</span>
    1390. 

  1390.   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">&gt;</span>
    1391. 

  1391.     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    1392. 

  1392.     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    1393. 

  1393.     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    1394. 

  1394.     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
    1395. 

  1395.   <span class="nt">&lt;/ul&gt;</span>
    1396. 

  1396.   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    1397. 

  1397.     <span class="c">&lt;!-- Content of card #1 --&gt;</span>
    1398. 

  1398.     <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-1"</span> <span class="na">class=</span><span class="s">"card tab-pane active show"</span><span class="nt">&gt;</span>
    1399. 

  1399.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1400. 

  1400.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #1<span class="nt">&lt;/div&gt;</span>
    1401. 

  1401.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>
    1402. 

  1402.           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1403. 

  1403.         <span class="nt">&lt;/p&gt;</span>
    1404. 

  1404.       <span class="nt">&lt;/div&gt;</span>
    1405. 

  1405.     <span class="nt">&lt;/div&gt;</span>
    1406. 

  1406.     <span class="c">&lt;!-- Content of card #2 --&gt;</span>
    1407. 

  1407.     <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-2"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
    1408. 

  1408.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1409. 

  1409.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #2<span class="nt">&lt;/div&gt;</span>
    1410. 

  1410.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>
    1411. 

  1411.           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1412. 

  1412.         <span class="nt">&lt;/p&gt;</span>
    1413. 

  1413.       <span class="nt">&lt;/div&gt;</span>
    1414. 

  1414.     <span class="nt">&lt;/div&gt;</span>
    1415. 

  1415.     <span class="c">&lt;!-- Content of card #3 --&gt;</span>
    1416. 

  1416.     <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-3"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
    1417. 

  1417.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1418. 

  1418.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #3<span class="nt">&lt;/div&gt;</span>
    1419. 

  1419.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>
    1420. 

  1420.           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1421. 

  1421.         <span class="nt">&lt;/p&gt;</span>
    1422. 

  1422.       <span class="nt">&lt;/div&gt;</span>
    1423. 

  1423.     <span class="nt">&lt;/div&gt;</span>
    1424. 

  1424.     <span class="c">&lt;!-- Content of card #4 --&gt;</span>
    1425. 

  1425.     <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"tab-top-4"</span> <span class="na">class=</span><span class="s">"card tab-pane"</span><span class="nt">&gt;</span>
    1426. 

  1426.       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    1427. 

  1427.         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Content of tab #4<span class="nt">&lt;/div&gt;</span>
    1428. 

  1428.         <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>
    1429. 

  1429.           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
    1430. 

  1430.         <span class="nt">&lt;/p&gt;</span>
    1431. 

  1431.       <span class="nt">&lt;/div&gt;</span>
    1432. 

  1432.     <span class="nt">&lt;/div&gt;</span>
    1433. 

  1433.   <span class="nt">&lt;/div&gt;</span>
    1434. 

  1434. <span class="nt">&lt;/div&gt;</span></code></pre>
    1435. 

  1435.                         </figure>
    1436. 

  1436.                       </div>
    1437. 

  1437.                     </div>
    1438. 

  1438.                   </div>
    1439. 

  1439.                 </div>
    1440. 

  1440.               </div>
    1441. 

  1441.             </div>
    1442. 

  1442.           </div>
    1443. 

  1443.         </div>
    1444. 

  1444.         <footer class="footer footer-transparent d-print-none">
    1445. 

  1445.           <div class="container-xl">
    1446. 

  1446.             <div class="row text-center align-items-center flex-row-reverse">
    1447. 

  1447.               <div class="col-lg-auto ms-lg-auto">
    1448. 

  1448.                 <ul class="list-inline list-inline-dots mb-0">
    1449. 

  1449.                   <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
    1450. 

  1450.                   <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
    1451. 

  1451.                   <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
    1452. 

  1452.                   <li class="list-inline-item">
    1453. 

  1453.                     <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
    1454. 

  1454.                       <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
    1455. 

  1455.                       <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>
    1456. 

  1456.                       Sponsor
    1457. 

  1457.                     </a>
    1458. 

  1458.                   </li>
    1459. 

  1459.                 </ul>
    1460. 

  1460.               </div>
    1461. 

  1461.               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
    1462. 

  1462.                 <ul class="list-inline list-inline-dots mb-0">
    1463. 

  1463.                   <li class="list-inline-item">
    1464. 

  1464.                     Copyright &copy; 2022
    1465. 

  1465.                     <a href=".." class="link-secondary">Tabler</a>.
    1466. 

  1466.                     All rights reserved.
    1467. 

  1467.                   </li>
    1468. 

  1468.                   <li class="list-inline-item">
    1469. 

  1469.                     <a href="../changelog.html" class="link-secondary" rel="noopener">
    1470. 

  1470.                       v1.0.0-beta14
    1471. 

  1471.                     </a>
    1472. 

  1472.                   </li>
    1473. 

  1473.                 </ul>
    1474. 

  1474.               </div>
    1475. 

  1475.             </div>
    1476. 

  1476.           </div>
    1477. 

  1477.         </footer>
    1478. 

  1478.       </div>
    1479. 

  1479.     </div>
    1480. 

  1480.     <!-- Libs JS -->
    1481. 

  1481.     <!-- Tabler Core -->
    1482. 

  1482.     <script src="../dist/js/tabler.min.js?1666304673" defer></script>
    1483. 

  1483.     <script src="../dist/js/demo.min.js?1666304673" defer></script>
    1484. 

  1484.   </body>
    1485. 

  1485. </html>
    1486.