Cards
Taildash cards provide a flexible and extensible content container with multiple variants and options.
Default card
Taildash default vertical card.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- card -->
<div class="flex ioajsklehsnm bg-white dark:bg-gray-800 mb-12 rounded-sm mklausjenrhtm shadow">
<div class="relative mklausjenrhtm">
<a href="#">
<div class="absolute inset-0 hover:bg-white opacity-0 transition duration-700 hover:opacity-10"></div>
<img class="max-w-full h-auto" src="src/img/products/product1.jpg" alt="alt title">
</a>
</div>
<div class="p-6 flex-1">
<div class="mb-2">
<h3 class="text-lg leading-normal mb-3 font-bold text-gray-800 dark:text-gray-300"><a href="#" class="hover:text-indigo-700">New web design layout trends in 2021</a></h3>
<div class="text-gray-500">
<svg class="bi bi-calendar me-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
<!-- card -->
<div class="flex ioajsklehsnm bg-white dark:bg-gray-800 mb-12 rounded-sm mklausjenrhtm shadow">
<div class="relative mklausjenrhtm">
<a href="#">
<div class="absolute inset-0 hover:bg-white opacity-0 transition duration-700 hover:opacity-10"></div>
<img class="max-w-full h-auto" src="src/img/products/product1.jpg" alt="alt title">
</a>
</div>
<div class="p-6 flex-1">
<div class="mb-2">
<h3 class="text-lg leading-normal mb-3 font-bold text-gray-800 dark:text-gray-300"><a href="#" class="hover:text-indigo-700">New web design layout trends in 2021</a></h3>
<div class="text-gray-500">
<svg class="bi bi-calendar me-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->
Horizontal card
Taildash default horizontal card.
New web design layout trends in 2021
04 May 2020
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.
<!-- card start -->
<div class="flex ioajsklehsnm lg:klsuaonrmcha bg-white dark:bg-gray-800 mb-12 rounded-sm mklausjenrhtm">
<div class="relative mklausjenrhtm lg:shrink lg:w-1/3 rounded">
<a href="#">
<div class="absolute inset-0 hover:bg-white opacity-0 transition duration-700 hover:opacity-10"></div>
<img class="max-w-full h-auto" src="src/img/products/product1.jpg" alt="alt title">
</a>
</div>
<div class="p-6 flex-1 lg:shrink lg:w-2/3">
<div class="mb-2">
<h3 class="text-lg lg:text-2xl leading-normal mb-4 font-semibold text-gray-800 dark:text-gray-300"><a href="#" class="hover:text-indigo-700">New web design layout trends in 2021</a></h3>
<div class="text-gray-500">
<svg class="bi bi-calendar me-2 inline-block" width=".8rem" height=".8rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg><span>04 May 2020</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ducimus est, excepturi nam odit possimus.</p>
</div>
</div><!-- end card -->