Cards

<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 text-white">
      {{> curves/curve-1}}
    </div>
  </div>

  <!-- Body -->
  <div class="card-body">
    
    <!-- Form -->
    <form>
      <div class="form-floating">
        <input type="text" class="form-control form-control-flush" id="cardName" placeholder="Name">
        <label for="cardName">Name</label>
      </div>
      <div class="form-floating">
        <input type="email" class="form-control form-control-flush" id="cardEmail" placeholder="Email">
        <label for="cardEmail">Email</label>
      </div>
      <div class="form-floating">
        <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 w-100 btn-success lift" type="submit">
          Download a sample
        </button>
      </div>
    </form>

  </div>

</div>

<div class="card card-row shadow-light-lg">
  <div class="row gx-0">
    <a class="col-12 col-md-6 bg-cover card-img-start" 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-end shape-fluid-y text-white d-none d-md-block">
        {{> curves/curve-4}}
      </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>

<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 bg-white bg-opacity-20">

        <!-- Avatar -->
        <div class="avatar avatar-sm me-2">
          <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>
        
        <!-- Author -->
        <h6 class="text-uppercase text-white text-opacity-80 me-2 mb-0">
          Casey Fyfe
        </h6>
        
        <!-- Date -->
        <p class="h6 text-uppercase text-white text-opacity-80 mb-0 ms-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">
          {{> curves/curve-1}}
        </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-body-secondary">
          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 me-2">
          <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>
        
        <!-- Author -->
        <h6 class="text-uppercase text-body-secondary me-2 mb-0">
          Danny Devito
        </h6>
        
        <!-- Date -->
        <p class="h6 text-uppercase text-body-secondary mb-0 ms-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-body-secondary">
          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 me-2">
          <img src="../assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle">
        </div>
        
        <!-- Author -->
        <h6 class="text-uppercase text-body-secondary me-2 mb-0">
          Dave Gamache
        </h6>
        
        <!-- Date -->
        <p class="h6 text-uppercase text-body-secondary mb-0 ms-auto">
          <time datetime="2019-05-02">May 02</time>
        </p>

      </a>

    </div>

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

<div class="card shadow-lg">
  <div class="card-body">

    <!-- Preheading -->
    <div class="text-center mb-3">
      <span class="badge rounded-pill bg-primary-subtle">
        <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-body-secondary mb-5">
      per seat
    </p>

    <!-- List -->
    <div class="d-flex">
      
      <!-- Badge -->
      <div class="badge badge-rounded-circle bg-success-subtle mt-1 me-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 bg-success-subtle mt-1 me-4">
        <i class="fe fe-check"></i>
      </div>

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

    <!-- Button -->
    <a href="#!" class="btn w-100 btn-primary-subtle">
      Start for free <i class="fe fe-arrow-right ms-3"></i>
    </a>
    
  </div>
</div>