<div class="card">
  <div class="card-header">
    <img src="http://placekitten.com/48/48" class="card-header-avatar" />
    <div>
      <h3 class="card-header-heading">Nice Title</h3>
      <h4 class="card-header-subheading">A Very Nice Subtitle</h4>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit accusamus numquam blanditiis obcaecati ullam, fugiat repudiandae autem at nostrum labore doloribus non porro similique eveniet.</p>
  <p>
    <a href="#" class="card-action">More Information</a>
  </p>
</div>
/* ----- Variables ----- */

:root {
  --blue600: #007ace;
  --gray500: #a0aec0;
  --gray700: #4a5568;
  --gray900: #1a202c;
}

/* ----- Global / Reset ----- */

body {
  font: 16px/1.5 system-ui, sans-serif;
}

h3, h4 {
  font-weight: normal;
  line-height: 1.25;
  margin: 0;
}

p {
  margin: 0 0 1rem;
}
p:last-child {
  margin-bottom: 0;
}

/* ----- Card ----- */

.card {
  border: 1px solid var(--gray500);
  border-radius: 0.25rem;
  color: var(--gray700);
  max-width: 26rem;
  margin: 1rem;
  padding: 1rem;
}

/* Action */

.card-action {
  color: var(--blue600);
  transition: 300ms opacity ease-in-out; 
}

.card-action:hover,
.card-action:focus {
  opacity: 0.5;
}

/* Header */

.card-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-header-avatar {
  border-radius: 50%;
  height: 3rem;
  width: 3rem;
}

.card-header-heading {
  color: var(--gray900);
  font-size: 1.125rem;
  font-weight: bold;
}

.card-header-subheading {
  font-size: 0.875rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.