Cards
<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>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><div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div><div class="col-md-6 col-xl-3">
<div class="card hover-effect card-primary">
<div class="card-header">
<h5>Secondary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card hover-effect card-secondary">
<div class="card-header">
<h5>Secondary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card hover-effect card-success">
<div class="card-header">
<h5>Secondary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card hover-effect card-danger">
<div class="card-header">
<h5>Secondary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card hover-effect card-outline-secondary">
<div class="card-header">
<h5>Outline secondary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div><div class="col-md-6 col-xl-3">
<div class="card hover-effect card-outline-secondary">
<div class="card-header">
<h5>Outline secondary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div><div class="col-md-6 col-xl-3">
<div class="card hover-effect card-light-primary">
<div class="card-header">
<h5>Light primary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</div><div class="col-md-6 col-xl-3">
<div class="card hover-effect card-light-secondary">
<div class="card-header">
<h5>Light primary card</h5>
</div>
<div class="card-body">
<h6>Card body</h6>
<p>...</p>
</div>
</div>
</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. This content is a little bit longer.
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. The idea is to use 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. The idea is to use 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 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. The idea is to use 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. The idea is to use pseudo class to show tabs, use anchors with fragment identifiers to switch between them.