<div class="card p-0" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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="post card h-100 p-0 border-0 shadow-sm">
  <img class="card-img-top" src="..." alt="...">
  <div class="card-body">
    <p class="card-text mb-2"><small class="text-muted">March 31, 2019</small></p>
    <a href="blog-single-post.html" class="h4 card-title d-block mb-2">Google’s Relevance to Social Media Basics</a>

    <p class="card-text">Suspendisse ultrices erat dapibus pulvinar molestie interdum..</p>
  </div>

  <div class="card-footer pb-4">
    <div class="d-inline-block mr-3">
      <img class="rounded-circle" src="..." alt="...">
    </div>

    <div class="d-inline-block">
      <a href="#0"><span class="text-muted">By Beulah Baird</span></a>
    </div>
  </div>
</div> <!-- Card for a Post/Artile -->

<div class="post featured-post card card-side-to-side p-0 border-0 shadow">
<div class="row no-gutters align-items-md-center">
  <div class="col-md-6 col-lg-5 position-relative">
    <img class="card-side-to-side__image img-fluid" src="..." alt="...">
  </div> <!-- Left Side Card -->

  <div class="col-md-6 col-lg-7">
    <div class="card-body px-5 pt-0">
      <p class="card-text mb-2"><small class="text-muted">April 24, 2019</small></p>
      <a href="blog-single-post.html" class="h3 card-title d-block mb-3">7 Simple Social Media Tips</a>

      <p class="card-text">Suspendisse ultrices erat dapibus pulvinar molestie interdum..</p>
    </div>

    <div class="card-footer px-5 pb-5 pb-md-2">
      <div class="d-inline-block mr-3">
        <img class="rounded-circle" src="..." >
      </div>

      <div class="d-inline-block">
        <a href="#0"><span class="text-muted">By Beulah Baird</span></a>
      </div>
    </div>
  </div>
</div> <!-- Right Side Card -->
</div>

<div class="card card-profile">
<div class="card-body text-center p-0">
  <div class="profile__avatar">
    <img class="rounded-circle" src="..." alt="...">
  </div>

  <div class="h4 profile__name mt-3 mb-0">Lindsey Smith</div>

  <p class="profile__job-title">CEO</p>

  <ul class="nav profile__social justify-content-around mt-5 mt-md-3 mx-5">
    <li>
      <a href="#0" class="nav-link__icon"><i class="fab fa-facebook-f"></i></a>
    </li>
    <li>
      <a href="#0" class="nav-link__icon"><i class="fab fa-twitter"></i></a>
    </li>
    <li>
      <a href="#0" class="nav-link__icon"><i class="fab fa-linkedin-in"></i></a>
    </li>
  </ul>
</div>
</div>

<a href="#0" class="card p-0 mb-3 border-0 shadow-sm shadow--on-hover">
  <div class="card-body">
    <span class="row justify-content-between align-items-center">
      <span class="col-md-5 color--heading">
        <span class="badge badge-circle background--danger text-white mr-3">GD</span> Senior Graphic Designer
      </span>

      <span class="col-5 col-md-3 my-3 my-sm-0 color--text">
        <i class="fas fa-clock mr-1"></i> Full time
      </span>

      <span class="col-7 col-md-3 my-3 my-sm-0 color--text">
        <i class="fas fa-map-marker-alt mr-1"></i> San Fransisco, US
      </span>

      <span class="d-none d-md-block col-1 text-center color--text">
        <small><i class="fas fa-chevron-right"></i></small>
      </span>
    </span>
  </div>
</a>

<div class="card p-5 rounded-lg border-0 shadow-lg">
  <ul class="list-group list-group-flush">
    <li class="list-group-item px-0 pt-0">
      <i class="fas fa-map-marker-alt mr-2"></i> San Fransisco, US
    </li>
    <li class="list-group-item px-0">
      <i class="fas fa-clock mr-2"></i> Full time
    </li>
    <li class="list-group-item px-0 pb-0">
      <i class="fas fa-user-friends mr-1"></i> Design
    </li>
  </ul>
  <div class="card-body px-0 pt-5 pb-0">
    <a href="#0" class="btn btn-primary">Apply Now</a>
  </div>
</div>