<article class="rf-card">
    <figure class="rf-card__figure">
      <img src="https://picsum.photos/id/237/350/200" alt="Example picture" />
    </figure>
    <div class="rf-card__content">
      <h2 class="rf-card__title"><small class="rf-card__subtitle">Image gallery</small>Adorable doggos of the week</h2>
      <p class="rf-card__text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada quis dolor nec malesuada.
      </p>
        <a class="rf-card__link" href="#">View gallery</a>
    </div>
  </article>
/*
 * EDITOR ONLY - Basic setup just to make development easier, no need to copy this
 */

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  max-width: 350px;
  padding: 2em 0;
  margin: 0 auto;
  width: 720px;
  line-height: 1.6;
  font-family: Helvetica, Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
 * REFACTORED COMPONENT STYLES
 */

:root {
  --color-background: #f5f5f5;
  --color-text-negative: #ffffff;
  --color-cta: #880000;
}

.rf-card {
  background: var(--color-background);
}

.rf-card__figure {
  margin: 0;
}

.rf-card__title {
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.5em;
}

.rf-card__subtitle {
  font-size: 0.5em;
  opacity: 0.8;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  padding-left: 0.5em;
  margin-left: -0.5em;
  margin-right: -0.5em;
  border-bottom: 1px solid currentColor;
  display: block;
}

.rf-card__content {
  padding: 2em 1.5em 1em;
}

.rf-card__text {
  font-size: 0.9em;
  margin-top: 0;
}

.rf-card__link {
  color: var(--color-text-negative);
  background-color: var(--color-cta);
  padding: 1em;
  display: flex;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.