Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap documentation

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

Border

Landkit only

Add a contextual border to the top of the card component. Three sizing options are available.

Card border
<div class="card card-border border-success">
  <div class="card-body">
    Card border
  </div>
</div>
Card border large
<div class="card card-border card-border-lg border-danger">
  <div class="card-body">
    Card border large
  </div>
</div>
Card border extra large
<div class="card card-border card-border-xl border-primary">
  <div class="card-body">
    Card border extra large
  </div>
</div>

Bleed

Landkit only

Spans the card component from edge to edge and removes its border radius on extra small screens.

Card bleed
<div class="card card-bleed">
  <div class="card-body">
    Card bleed
  </div>
</div>

Signup

Landkit only

Combination of the default Bootstrap card component with an image at the top and a form in the body of it.

...
<div class="card shadow-light-lg">
  
  <!-- Image -->
  <img src="../assets/img/photos/photo-2.jpg" alt="..." class="card-img-top">

  <!-- Shape -->
  <div class="position-relative">
    <div class="shape shape-bottom shape-fluid-x svg-shim text-white">
      @@include("../assets/img/shapes/curves/curve-1.svg")
    </div>
  </div>

  <!-- Body -->
  <div class="card-body">
    
    <!-- Form -->
    <form>
      <div class="form-label-group">
        <input type="text" class="form-control form-control-flush" id="cardName" placeholder="Name">
        <label for="cardName">Name</label>
      </div>
      <div class="form-label-group">
        <input type="email" class="form-control form-control-flush" id="cardEmail" placeholder="Email">
        <label for="cardEmail">Email</label>
      </div>
      <div class="form-label-group">
        <input type="password" class="form-control form-control-flush" id="cardPassword" placeholder="Password">
        <label for="cardPassword">Password</label>
      </div>
      <div class="mt-6">
        <button class="btn btn-block btn-success lift" type="submit">
          Download a sample
        </button>
      </div>
    </form>

  </div>

</div>

Testimonials

Landkit only

Combination of the card component, grid utilities and the blockquote for a testimonials component.

“Working at Landkit has been a dream. The team is amazing, the office is perfect, and I feel like I'm part of a family. I'll be here for a great many years.”

William Callan
<div class="card card-row shadow-light-lg">
  <div class="row no-gutters">
    <a class="col-12 col-md-6 bg-cover card-img-left" style="background-image: url(../assets/img/photos/photo-1.jpg);" href="#!">

      <!-- Image (placeholder) -->
      <img src="../assets/img/photos/photo-1.jpg" alt="..." class="img-fluid d-md-none invisible">

      <!-- Shape -->
      <div class="shape shape-right shape-fluid-y svg-shim text-white d-none d-md-block">
        @@include("../assets/img/shapes/curves/curve-4.svg")
      </div>

    </a>
    <div class="col-12 col-md-6 order-md-1">

      <!-- Body -->
      <div class="card-body">
        <blockquote class="blockquote mb-0 text-center">
          
          <!-- Text -->
          <p class="mb-5 mb-md-7">
            “Working at Landkit has been a dream. The team is amazing, the office is perfect, and I feel like I'm part of a family. I'll be here for a great many years.”
          </p>

          <!-- Footer -->
          <footer class="blockquote-footer">
            <span class="h6 text-uppercase">William Callan</span>
          </footer>

        </blockquote>
      </div>

    </div>

  </div>
</div>

Block cards

Landkit only

The card component without images, with an image at the top, and an image in the background.

Using Unsplash to improve your listing visibility

Using free stock photos of your surrounding areas can skyrocket your popularity.

...
Casey Fyfe

...

Photos should appeal to a sense of adventure

Cozy vibes are out and this summer you should focus on making customer's feel brave.

...
Danny Devito

It's the little touches that make memories.

Once you have your rental posted, you should focus on how you can differentiate your home with little touches. Chocolates, specialty coffee, fast wifi, nice toiletries, or a personal note. Small touches can make a huge difference.

...
Dave Gamache

<div class="row">
  <div class="col-12 col-xl-4 d-flex">
    
    <!-- Card -->
    <div class="card mb-6 mb-xl-0 pt-14 overlay overlay-black overlay-30 bg-cover shadow-light-lg" style="background-image: url(../assets/img/photos/photo-8.jpg);">

      <!-- Body -->
      <a class="card-body mt-auto" href="#!">

        <!-- Heading -->
        <h3 class="text-white">
          Using Unsplash to improve your listing visibility
        </h3>

        <!-- Text -->
        <p class="mb-0 text-white">
          Using free stock photos of your surrounding areas can skyrocket your popularity.
        </p>

      </a>

      <!-- Meta -->
      <a class="card-meta" href="#!">

        <!-- Divider -->
        <hr class="card-meta-divider border-white-20">

        <!-- Avatar -->
        <div class="avatar avatar-sm mr-2">
          <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>
        
        <!-- Author -->
        <h6 class="text-uppercase text-white-80 mr-2 mb-0">
          Casey Fyfe
        </h6>
        
        <!-- Date -->
        <p class="h6 text-uppercase text-white-80 mb-0 ml-auto">
          <time datetime="2019-05-02">May 02</time>
        </p>

      </a>
      
    </div>

  </div>
  <div class="col-12 col-xl-4 d-flex">
    
    <!-- Card -->
    <div class="card mb-6 mb-xl-0 shadow-light-lg">

      <!-- Image -->
      <a class="card-img-top" href="#!">
        <img src="../assets/img/photos/photo-7.jpg" alt="..." class="img-fluid">
      </a>

      <!-- Shape -->
      <div class="position-relative">
        <div class="shape shape-fluid-x shape-bottom text-white">
          @@include("../assets/img/shapes/curves/curve-1.svg")
        </div>
      </div>

      <!-- Body -->
      <a class="card-body" href="#!">

        <!-- Heading -->
        <h3>
          Photos should appeal to a sense of adventure
        </h3>

        <!-- Text -->
        <p class="mb-0 text-muted">
          Cozy vibes are out and this summer you should focus on making customer's feel brave.
        </p>

      </a>
        
      <!-- Meta -->
      <a class="card-meta" href="#!">

        <!-- Divider -->
        <hr class="card-meta-divider">

        <!-- Avatar -->
        <div class="avatar avatar-sm mr-2">
          <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>
        
        <!-- Author -->
        <h6 class="text-uppercase text-muted mr-2 mb-0">
          Danny Devito
        </h6>
        
        <!-- Date -->
        <p class="h6 text-uppercase text-muted mb-0 ml-auto">
          <time datetime="2019-05-02">May 02</time>
        </p>

      </a>

    </div>

  </div>
  <div class="col-12 col-xl-4 d-flex">
    
    <!-- Card -->
    <div class="card shadow-light-lg">

      <!-- Body -->
      <a class="card-body my-auto" href="#!">

        <!-- Heading -->
        <h3 class="mt-auto">
          It's the little touches that make memories.
        </h3>

        <!-- Text -->
        <p class="mb-0 text-muted">
          Once you have your rental posted, you should focus on how you can differentiate your home with little touches. Chocolates, specialty coffee, fast wifi, nice toiletries, or a personal note. Small touches can make a huge difference.
        </p>

      </a>

      <!-- Meta -->
      <a class="card-meta" href="#!">

        <!-- Divider -->
        <hr class="card-meta-divider">

        <!-- Avatar -->
        <div class="avatar avatar-sm mr-2">
          <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>
        
        <!-- Author -->
        <h6 class="text-uppercase text-muted mr-2 mb-0">
          Dave Gamache
        </h6>
        
        <!-- Date -->
        <p class="h6 text-uppercase text-muted mb-0 ml-auto">
          <time datetime="2019-05-02">May 02</time>
        </p>

      </a>

    </div>

  </div>
</div> <!-- / .row -->

Price

Landkit only

Combination of the card component, styled lists and other components.

Basic
$ 0 /mo

per seat

Rich landing pages

100+ components

Start for free
Standard
$ 29 /mo

per seat

Rich landing pages

100+ components

Flexible licensing

Speedy build tooling

6 months free support

Start with Standard
Premium
$ 49 /mo

per seat

Rich landing pages

100+ components

Flexible licensing

Speedy build tooling

6 months free support

256-bit encryption

Guaranteed 100% uptime

Unlimited users

Start with Premium
<div class="card shadow-lg">
  <div class="card-body">

    <!-- Preheading -->
    <div class="text-center mb-3">
      <span class="badge badge-pill badge-primary-soft">
        <span class="h6 text-uppercase">Basic</span>
      </span>
    </div>

    <!-- Price -->
    <div class="d-flex justify-content-center">
      <span class="h2 mb-0 mt-2">$</span>
      <span class="price display-2 mb-0" data-annual="0" data-monthly="0">0</span>
      <span class="h2 align-self-end mb-1">/mo</span>
    </div>

    <!-- Text -->
    <p class="text-center text-muted mb-5">
      per seat
    </p>

    <!-- List -->
    <div class="d-flex">
      
      <!-- Badge -->
      <div class="badge badge-rounded-circle badge-success-soft mt-1 mr-4">
        <i class="fe fe-check"></i>
      </div>

      <!-- Text -->
      <p>
        Rich landing pages
      </p>
      
    </div>
    <div class="d-flex">
      
      <!-- Badge -->
      <div class="badge badge-rounded-circle badge-success-soft mt-1 mr-4">
        <i class="fe fe-check"></i>
      </div>

      <!-- Text -->
      <p class="mb-5">
        100+ components
      </p>
      
    </div>

    <!-- Button -->
    <a href="#!" class="btn btn-block btn-primary-soft">
      Start for free <i class="fe fe-arrow-right ml-3"></i>
    </a>
    
  </div>
</div>

Portfolio

Landkit only

Variations of the card component.

...
Branding

Landkit Redesign
...
Branding

Landkit Redesign
...
Branding

Landkit Redesign
<!-- Card -->
<a class="card card-flush mb-7 mb-md-0" href="#!">

  <!-- Image -->
  <div class="card-zoom">
    <img class="card-img-top rounded shadow-light-lg" src="../assets/img/portfolio/portfolio-5.jpg" alt="...">
  </div>

  <!-- Footer -->
  <div class="card-footer">

    <!-- Preheading -->
    <h6 class="text-uppercase mb-1 text-muted">Branding</h6>

    <!-- Heading -->
    <h4 class="mb-0">Landkit Redesign</h4>

  </div>

</a>

<!-- Card -->
<a class="card shadow-light-lg mb-7 mb-md-0" href="#!">

  <!-- Image -->
  <div class="card-zoom">
    <img class="card-img-top" src="../assets/img/portfolio/portfolio-6.jpg" alt="...">
  </div>

  <!-- Body -->
  <div class="card-body">

    <!-- Shape -->
    <div class="shape shape-bottom-100 shape-fluid-x svg-shim text-white">
      @@include("../assets/img/shapes/curves/curve-1.svg")
    </div>

    <!-- Preheading -->
    <h6 class="text-uppercase mb-1 text-muted">Branding</h6>

    <!-- Heading -->
    <h4 class="mb-0">Landkit Redesign</h4>

  </div>

</a>

<!-- Card -->
<a class="card shadow-light-lg" href="#!">

  <!-- Image -->
  <div class="card-zoom">
    <img class="card-img" src="../assets/img/portfolio/portfolio-11.jpg" alt="...">
  </div>

  <!-- Overlay -->
  <div class="card-img-overlay card-img-overlay-hover">
    <div class="card-body bg-white">

      <!-- Shape -->
      <div class="shape shape-bottom-100 shape-fluid-x svg-shim text-white">
        @@include("../assets/img/shapes/curves/curve-1.svg")
      </div>

      <!-- Preheading -->
      <h6 class="text-uppercase mb-1 text-muted">Branding</h6>

      <!-- Heading -->
      <h4 class="mb-0">Landkit Redesign</h4>

    </div>
  </div>

</a>
Jump to