Cards
Card Header
Card Body
With supporting text below as a natural lead-in to additional content.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Card Body
With supporting text below as a natural lead-in to additional content.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Card Header
With supporting text below as a natural lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Hover Effect
Card Body
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Primary card
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Secondary card
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Success card
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Danger card
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Outline card
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Secondary
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Light card
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Secondary
With supporting text below lead-in to additional content below as a natural.
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>Card With icon
With supporting text below lead-in to additional content below as a natural.
Card With icon
With supporting text below lead-in to additional content below as a natural.
Card With icon
With supporting text below lead-in to additional content below as a natural.
Card With icon
With supporting text below lead-in to additional content below as a natural.
Card With Top border
With supporting text below lead-in to additional content below as a natural.
With supporting text below lead-in to additional content below as a natural.
Card With Bottom border
With supporting text below lead-in to additional content below as a natural.
Card With left border
With supporting text below lead-in to additional content below as a natural.
Card With right border
Card Title
This is a wider card with supporting text below as a natural lead-in to.
Last updated 3 min's ago
Card Title
This is a wider card with supporting text below as a natural lead-in to additional This content.
Last updated 3 min's ago
My Profile
I am a keen, hard working, reliable and excellent time keeper. I am a bright and receptive person
- 5+
- An item
- A second item
- A third item
- A Fourth item
Card Title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 min's ago
The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.
Card Title
This is a wider card with supporting text with supporting little bit longer below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 min's ago
The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudo class to show tabs, use anchors with fragment identifiers to switch between them.