#### 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

###### Card body

With supporting text below lead-in to additional content below as a natural.

         <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>

##### Secondary card

###### Card body

With supporting text below lead-in to additional content below as a natural.

         <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>

##### Success card

###### Card body

With supporting text below lead-in to additional content below as a natural.

         <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>

##### Danger card

###### Card body

With supporting text below lead-in to additional content below as a natural.

         <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>

##### Outline card

###### Card body

With supporting text below lead-in to additional content below as a natural.

            <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>

##### Outline card

###### Card body

With supporting text below lead-in to additional content below as a natural.

            <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>

##### Light card

###### Card body

With supporting text below lead-in to additional content below as a natural.

           <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>

##### Light card

###### Card body

With supporting text below lead-in to additional content below as a natural.

            <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 mins ago

##### Card title

This is a wider card with supporting text below as a natural lead-in to additional This content.

Last updated 3 mins ago

###### My Profile

I am a keen, hard working, reliable and excellent time keeper. I am a bright and receptive person

Featured

- 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 mins ago

The idea is to use `:target` pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

1. Show only the last tab.
2. If `:target` matches a tab, show it and hide all following siblings.
3. Matches a tab, show it and hide all following siblings.

The idea is to use `:target` pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass 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 mins ago

The idea is to use `:target` pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

1. Show only the last tab.
2. If `:target` matches a tab, show it and hide all following siblings.
3. Matches a tab, show it and hide all following siblings.

The idea is to use `:target` pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.