Link Search Menu Expand Document
I am lazy V1.0

Card

I am Lazy’s cards provide a flexible and extensible content container with multiple variants and options.

Table of contents

  1. Card
    1. Examples
      1. Stacked
      2. Horizontal
    2. Sizing
    3. Border
    4. Shadow
      1. Shadow sizing
  2. Content type stacked card
    1. Body
    2. Title,Subtitle and text
    3. Header and Footer
  3. Content type horizontal card
    1. Left Side
      1. Images
    2. Right Side
      1. Title,Subtitle and text

Examples

Stacked

Card image

Card title

card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card">
    <img class="card-thumb" src="..." alt="Card image">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-subtitle">card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Horizontal

Card image

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card-horizontal">
    <div class="card-left">
        <img class="card-thumb" src="..." alt="Card image">
    </div>
    <div class="card-right">
        <h3 class="card-title">Card title</h3>
        <p class="card-subtitle">Card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Sizing

Card work with cards of all sizes, including default card. use .card-{sm|md|lg|xl} class to get the desired size. By default stacked cards use .card-sm while horizontal cards use .card-xl

This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
<div class="card card-no-shadow card-bordered card-sm">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card card-no-shadow card-bordered card-lg">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card card-no-shadow card-bordered card-md">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card-horizontal">
    <div class="card-right">
        <div class="card-body">
            This is some text within a card body. 
        </div>
    </div>
</div>

Border

use .card-bordered to display the border on the card.By default horizontal cards display borders while stacked cards don’t.

This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
<div class="card">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card card-no-shadow">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card card-no-shadow card-bordered">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>

Shadow

use .card-shadow to display the shadow on the card.By default stacked cards display shadows while horizontal cards don’t.

This is some text within a card body.
This is some text within a card body.
<div class="card">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card-horizontal">
    <div class="card-right">
        <div class="card-body">
            This is some text within a card body. 
        </div>
    </div>
</div>

use .card-no-shadow to hide the shadow on the card.

This is some text within a card body.
This is some text within a card body.
<div class="card">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>
<div class="card card-no-shadow">
    <div class="card-body">
        This is some text within a card body. 
    </div>
</div>

Shadow sizing

use .card-shadow-{sm|md|lg|xl} class to get the desired size.

Card image

Card title

card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image

Card title

card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card">
    <img class="card-thumb" src="..." alt="Card image">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-subtitle">card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
<div class="card card-shadow-xl">
    <img class="card-thumb" src="..." alt="Card image">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-subtitle">card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Content type stacked card

Cards support a wide variety of content. Below are examples of what’s supported.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

This is some text within a card body.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Title,Subtitle and text

Card image

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card">
    <img class="card-thumb" src="..." alt="Card image">
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-subtitle">Card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Header

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer
<div class="card">
    <div class="card-header">
        <h3>Header</h3>
    </div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-subtitle">Card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

Content type horizontal card

Cards support a wide variety of content. Below are examples of what’s supported.I recommend always using .card-left and .card-right on your horizontal cards.

Left Side

Images

.card-thumb places an image to the left of the card.

Card image

This is the right side of the card.

<div class="card-horizontal">
    <div class="card-left">
        <img class="card-thumb" src="..." alt="Card image">
    </div>
    <div class="card-right">
        <p class="card-text"> This is the right side of the card.</p>
    </div>
</div>

Right Side

Title,Subtitle and text

Card image

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
<div class="card-horizontal">
    <div class="card-left">
        <img class="card-thumb" src="..." alt="Card image">
    </div>
    <div class="card-right">
        <h3 class="card-title">Card title</h3>
        <p class="card-subtitle">Card subtitle</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>