SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235
							<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta4
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Cards - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    <!-- CSS files -->
    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
  <body class="antialiased">
    <div class="wrapper">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href="..">
              <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
            </a>
          </h1>
          <div class="navbar-nav flex-row order-md-last">
            <div class="nav-item d-none d-md-flex me-3">
              <div class="btn-list">
                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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>
                  Source code
                </a>
                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                  <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 13.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>
                  Sponsor
                </a>
              </div>
            </div>
            <div class="nav-item dropdown d-none d-md-flex me-3">
              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
                <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>
                <span class="badge bg-red"></span>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
                <div class="card">
                  <div class="card-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                <div class="d-none d-xl-block ps-2">
                  <div>Paweł Kuna</div>
                  <div class="mt-1 small text-muted">UI Designer</div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <a href="#" class="dropdown-item">Set status</a>
                <a href="#" class="dropdown-item">Profile & account</a>
                <a href="#" class="dropdown-item">Feedback</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Settings</a>
                <a href="#" class="dropdown-item">Logout</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
          <div class="navbar navbar-light">
            <div class="container-xl">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="../index.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <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>
                    </span>
                    <span class="nav-link-title">
                      Home
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
                      <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>
                    </span>
                    <span class="nav-link-title">
                      Interface
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../empty.html" >
                          Empty page
                        </a>
                        <a class="dropdown-item" href="../accordion.html" >
                          Accordion
                        </a>
                        <a class="dropdown-item" href="../blank.html" >
                          Blank page
                        </a>
                        <a class="dropdown-item" href="../buttons.html" >
                          Buttons
                        </a>
                        <a class="dropdown-item" href="../cards.html" >
                          Cards
                        </a>
                        <a class="dropdown-item" href="../cards-masonry.html" >
                          Cards Masonry
                        </a>
                        <a class="dropdown-item" href="../colors.html" >
                          Colors
                        </a>
                        <a class="dropdown-item" href="../dropdowns.html" >
                          Dropdowns
                        </a>
                        <a class="dropdown-item" href="../icons.html" >
                          Icons
                        </a>
                        <a class="dropdown-item" href="../modals.html" >
                          Modals
                        </a>
                        <a class="dropdown-item" href="../maps.html" >
                          Maps
                        </a>
                        <a class="dropdown-item" href="../map-fullsize.html" >
                          Map fullsize
                        </a>
                        <a class="dropdown-item" href="../maps-vector.html" >
                          Vector maps
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../navigation.html" >
                          Navigation
                        </a>
                        <a class="dropdown-item" href="../charts.html" >
                          Charts
                        </a>
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
                        <a class="dropdown-item" href="../skeleton.html" >
                          Skeleton
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
                        </a>
                        <a class="dropdown-item" href="../tables.html" >
                          Tables
                        </a>
                        <a class="dropdown-item" href="../carousel.html" >
                          Carousel
                        </a>
                        <a class="dropdown-item" href="../lists.html" >
                          Lists
                        </a>
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
                        <a class="dropdown-item" href="../offcanvas.html" >
                          Offcanvas
                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Authentication
                          </a>
                          <div class="dropdown-menu">
                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
                          </div>
                        </div>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Error pages
                          </a>
                          <div class="dropdown-menu">
                            <a href="../error-404.html" class="dropdown-item">404 page</a>
                            <a href="../error-500.html" class="dropdown-item">500 page</a>
                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="../form-elements.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <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>
                    </span>
                    <span class="nav-link-title">
                      Form elements
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                      <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>
                    </span>
                    <span class="nav-link-title">
                      Extra
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="../activity.html" >
                      Activity
                    </a>
                    <a class="dropdown-item" href="../gallery.html" >
                      Gallery
                    </a>
                    <a class="dropdown-item" href="../invoice.html" >
                      Invoice
                    </a>
                    <a class="dropdown-item" href="../search-results.html" >
                      Search results
                    </a>
                    <a class="dropdown-item" href="../pricing.html" >
                      Pricing cards
                    </a>
                    <a class="dropdown-item" href="../users.html" >
                      Users
                    </a>
                    <a class="dropdown-item" href="../license.html" >
                      License
                    </a>
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
                    <a class="dropdown-item" href="../wizard.html" >
                      Wizard
                    </a>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
                      <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>
                    </span>
                    <span class="nav-link-title">
                      Layout
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../layout-horizontal.html" >
                          Horizontal
                        </a>
                        <a class="dropdown-item" href="../layout-vertical.html" >
                          Vertical
                        </a>
                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
                          Vertical transparent
                        </a>
                        <a class="dropdown-item" href="../layout-vertical-right.html" >
                          Right vertical
                        </a>
                        <a class="dropdown-item" href="../layout-condensed.html" >
                          Condensed
                        </a>
                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
                          Condensed dark
                        </a>
                        <a class="dropdown-item" href="../layout-combo.html" >
                          Combined
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
                          Navbar dark
                        </a>
                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
                          Navbar sticky
                        </a>
                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                          Navbar overlap
                        </a>
                        <a class="dropdown-item" href="../layout-dark.html" >
                          Dark mode
                        </a>
                        <a class="dropdown-item" href="../layout-rtl.html" >
                          RTL mode
                        </a>
                        <a class="dropdown-item" href="../layout-fluid.html" >
                          Fluid
                        </a>
                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
                          Fluid vertical
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="../docs/index.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
                      <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="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="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Documentation
                    </span>
                  </a>
                </li>
              </ul>
              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="." method="get">
                  <div class="input-icon">
                    <span class="input-icon-addon">
                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                      <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>
                    </span>
                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-wrapper">
        <div class="container-xl">
          <!-- Page title -->
          <div class="page-header d-print-none">
            <div class="row align-items-center">
              <div class="col">
                <h2 class="page-title">
                  Documentation
                </h2>
              </div>
            </div>
          </div>
        </div>
        <div class="page-body">
          <div class="container-xl">
            <div class="row gx-lg-4">
              <div class="d-none d-lg-block col-lg-3">
                <ul class="nav nav-pills nav-vertical">
                  <li class="nav-item">
                    <a href="../docs/" class="nav-link">
                      Introduction
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Getting started
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-base">
                      <li class="nav-item">
                        <a href="../docs/getting-started.html" class="nav-link">
                          Getting Started
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/download.html" class="nav-link">
                          Download
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/browser-support.html" class="nav-link">
                          Browser Support
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Content
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-content">
                      <li class="nav-item">
                        <a href="../docs/colors.html" class="nav-link">
                          Colors
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/typography.html" class="nav-link">
                          Typography
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/icons.html" class="nav-link">
                          Icons
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Layout
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-layout">
                      <li class="nav-item">
                        <a href="../docs/page-headers.html" class="nav-link">
                          Page headers
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Form components
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-forms">
                      <li class="nav-item">
                        <a href="../docs/form-elements.html" class="nav-link">
                          Form elements
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-helpers.html" class="nav-link">
                          Form helpers
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-validation.html" class="nav-link">
                          Validation states
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-image-check.html" class="nav-link">
                          Image check
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-color-check.html" class="nav-link">
                          Color check
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-selectboxes.html" class="nav-link">
                          Form selectboxes
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-fieldset.html" class="nav-link">
                          Form fieldset
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                      Components
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse show" id="menu-components">
                      <li class="nav-item">
                        <a href="../docs/alerts.html" class="nav-link">
                          Alerts
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/avatars.html" class="nav-link">
                          Avatars
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/badges.html" class="nav-link">
                          Badges
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/breadcrumb.html" class="nav-link">
                          Breadcrumb
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/buttons.html" class="nav-link">
                          Buttons
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/cards.html" class="nav-link active">
                          Cards
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/carousel.html" class="nav-link">
                          Carousel
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/dropdowns.html" class="nav-link">
                          Dropdowns
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/divider.html" class="nav-link">
                          Divider
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/empty.html" class="nav-link">
                          Empty states
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/modals.html" class="nav-link">
                          Modals
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/page-headers.html" class="nav-link">
                          Page headers
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/progress.html" class="nav-link">
                          Progress
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/range-slider.html" class="nav-link">
                          Range slider
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/ribbons.html" class="nav-link">
                          Ribbons
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/skeleton.html" class="nav-link">
                          Skeleton
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/spinners.html" class="nav-link">
                          Spinners
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/switch-icon.html" class="nav-link">
                          Switch icon
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/tables.html" class="nav-link">
                          Tables
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/tabs.html" class="nav-link">
                          Tabs
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/timelines.html" class="nav-link">
                          Timelines
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/toasts.html" class="nav-link">
                          Toasts
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/tooltips.html" class="nav-link">
                          Tooltips
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Utilities
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-utils">
                      <li class="nav-item">
                        <a href="../docs/borders.html" class="nav-link">
                          Borders
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/cursors.html" class="nav-link">
                          Cursors
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/interactions.html" class="nav-link">
                          Interactions
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Plugins
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-plugins">
                      <li class="nav-item">
                        <a href="../docs/autosize.html" class="nav-link">
                          Autosize
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/input-mask.html" class="nav-link">
                          Form input mask
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/flags.html" class="nav-link">
                          Flags
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/payments.html" class="nav-link">
                          Payments
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/charts.html" class="nav-link">
                          Charts
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-9">
                <div class="card card-lg">
                  <div class="card-body">
                    <div class="markdown">
                      <div>
                        <div class="d-flex mb-3">
                          <h1 class="m-0">Cards</h1>
                          <p class="ms-auto">
                            <a href="https://getbootstrap.com/docs/5.0/components/card/" target="_blank" class="d-flex align-items-center">
                              <!-- Download SVG icon from http://tabler-icons.io/i/external-link -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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>
                              Bootstrap documentation
                            </a>
                          </p>
                        </div>
                        <p>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>
                      </div>
                      <h2 id="default-card">Default card</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-1">
                            <div class="card">
                              <div class="card-body">
                                <p>This is some text within a card body.</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="card-padding">Card padding</h2>
                      <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>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-2">
                            <div class="space-y">
                              <div class="card card-sm">
                                <div class="card-body">
                                  <p>This is some text within a card body.</p>
                                </div>
                              </div>
                              <div class="card">
                                <div class="card-body">
                                  <p>This is some text within a card body.</p>
                                </div>
                              </div>
                              <div class="card card-md">
                                <div class="card-body">
                                  <p>This is some text within a card body.</p>
                                </div>
                              </div>
                              <div class="card card-lg">
                                <div class="card-body">
                                  <p>This is some text within a card body.</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-md"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-lg"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="card-with-title">Card with title</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-1">
                            <div class="space-y">
                              <div class="card">
                                <div class="card-body">
                                  <h3 class="card-title">Card title</h3>
                                  <p>This is some text within a card body.</p>
                                </div>
                              </div>
                              <div class="card">
                                <div class="card-header">
                                  <h3 class="card-title">Card title</h3>
                                </div>
                                <div class="card-body">
                                  <p>This is some text within a card body.</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <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>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    <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>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;p&gt;</span>This is some text within a card body.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="card-with-title-and-image">Card with title and image</h2>
                      <p>To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your inteface design and draw users’ attention.</p>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-1">
                            <div class="card">
                              <div class="card-img-top img-responsive img-responsive-16by9" style="background-image: url(../static/photos/9f36332564ca271d.jpg)"></div>
                              <div class="card-body">
                                <h3 class="card-title">Card with title and image</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                                  neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-img-top img-responsive img-responsive-16by9"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <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>
    <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
      neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="blog-post-card">Blog post card</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-1">
                            <div class="card d-flex flex-column">
                              <a href="javascript:void(0)">
                                <img class="card-img-top" src="../static/photos/36e273986ed577b8.jpg" alt="How do you know she is a witch?" />
                              </a>
                              <div class="card-body d-flex flex-column">
                                <h3 class="card-title"><a href="javascript:void(0)">How do you know she is a witch?</a></h3>
                                <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>
                                <div class="d-flex align-items-center pt-4 mt-auto">
                                  <span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
                                  <div class="ms-3">
                                    <a href="../profile.html" class="text-body">Maryjo Lebarree</a>
                                    <div class="text-muted">3 days ago</div>
                                  </div>
                                  <div class="ms-auto">
                                    <a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-3 text-muted">
                                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                                      <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 13.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>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
    <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>
  <span class="nt">&lt;/a&gt;</span>
  <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>
    <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>
    <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>
    <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>
      <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</span><span class="nt">&gt;</span>
        <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>
        <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>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-auto"</span><span class="nt">&gt;</span>
        <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>
          <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/heart --&gt;</span>
          <span class="c">&lt;!-- SVG icon code --&gt;</span>
        <span class="nt">&lt;/a&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="row-deck">Row deck</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-2">
                            <div class="row row-deck">
                              <div class="col-md-4">
                                <div class="card">
                                  <div class="card-body">Short content</div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="card">
                                  <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="card">
                                  <div class="card-body">Short content</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
      <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>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
      <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>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
      <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>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="post-card-with-aside-image">Post card with aside image</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-2">
                            <div class="card d-flex flex-column">
                              <div class="row row-0 flex-fill">
                                <div class="col-md-3">
                                  <a href="javascript:void(0)">
                                    <img src="../static/photos/75b555b99d5b38c4.jpg" class="w-100 h-100 object-cover" alt="Card side image" />
                                  </a>
                                </div>
                                <div class="col">
                                  <div class="card-body">
                                    <h3 class="card-title"><a href="javascript:void(0)">Shut up!</a></h3>
                                    <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>
                                    <div class="d-flex align-items-center pt-4 mt-auto">
                                      <span class="avatar" style="background-image: url(../static/avatars/001f.jpg)"></span>
                                      <div class="ms-3">
                                        <a href="../profile.html" class="text-body">Egan Poetz</a>
                                        <div class="text-muted">3 days ago</div>
                                      </div>
                                      <div class="ms-auto">
                                        <a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-3 text-red">
                                          <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                                          <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 13.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>
                                        </a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <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>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-3"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
        <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>
      <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <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>
        <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>
          <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>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</span><span class="nt">&gt;</span>
            <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>
            <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>
          <span class="nt">&lt;/div&gt;</span>
          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-auto"</span><span class="nt">&gt;</span>
            <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>
              <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/heart --&gt;</span>
              <span class="c">&lt;!-- SVG icon code --&gt;</span>
            <span class="nt">&lt;/a&gt;</span>
          <span class="nt">&lt;/div&gt;</span>
        <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="color-variations">Color variations</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-2">
                            <div class="row row-deck">
                              <div class="col-md-6">
                                <div class="card">
                                  <div class="card-status-top bg-danger"></div>
                                  <div class="card-body">
                                    <h3 class="card-title">Card with top status</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                                      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                                  </div>
                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="card">
                                  <div class="card-status-start bg-green"></div>
                                  <div class="card-body">
                                    <h3 class="card-title">Card with side status</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                                      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
      <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
          neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
      <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
          neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="stacked-card">Stacked card</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-1">
                            <div class="card card-stacked">
                              <div class="card-body">
                                <h3 class="card-title">Stacked card</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                                  neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <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>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
    <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>
    <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
      neque pariatur perferendis sed suscipit velit vitae voluptatem.<span class="nt">&lt;/p&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="tabbed-card">Tabbed card</h2>
                      <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>
                      <div class="example no_toc_section example-bg">
                        <div class="example-content">
                          <div class="example-column example-column-2">
                            <!-- Cards with tabs component -->
                            <div class="card-tabs ">
                              <!-- Cards navigation -->
                              <ul class="nav nav-tabs">
                                <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
                                <li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
                                <li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
                                <li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
                              </ul>
                              <div class="tab-content">
                                <!-- Content of card #1 -->
                                <div id="tab-top-1" class="card tab-pane active show">
                                  <div class="card-body">
                                    <div class="card-title">Content of tab #1</div>
                                    <p>
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                                    </p>
                                  </div>
                                </div>
                                <!-- Content of card #2 -->
                                <div id="tab-top-2" class="card tab-pane">
                                  <div class="card-body">
                                    <div class="card-title">Content of tab #2</div>
                                    <p>
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                                    </p>
                                  </div>
                                </div>
                                <!-- Content of card #3 -->
                                <div id="tab-top-3" class="card tab-pane">
                                  <div class="card-body">
                                    <div class="card-title">Content of tab #3</div>
                                    <p>
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                                    </p>
                                  </div>
                                </div>
                                <!-- Content of card #4 -->
                                <div id="tab-top-4" class="card tab-pane">
                                  <div class="card-body">
                                    <div class="card-title">Content of tab #4</div>
                                    <p>
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs "</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Cards navigation --&gt;</span>
  <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">&gt;</span>
    <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>
    <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>
    <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>
    <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>
  <span class="nt">&lt;/ul&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- Content of card #1 --&gt;</span>
    <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content of card #2 --&gt;</span>
    <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content of card #3 --&gt;</span>
    <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
    <span class="c">&lt;!-- Content of card #4 --&gt;</span>
    <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>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
        <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>
        <span class="nt">&lt;p&gt;</span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
        <span class="nt">&lt;/p&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
          <div class="container">
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                  <li class="list-inline-item">
                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                      <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 13.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>
                      Sponsor
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    Copyright &copy; 2021
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
  </body>
</html>