Naluma Theme

2.3 #molecules.article-card Article Card

Card with image, title, excerpt, and meta.

Tokens: $radius-lg, $shadow-sm, $spacing-micro, $spacing-xs, $line-height-snug, $component-card-aspect-ratio-w, $component-card-aspect-ratio-h

Example

Title

Summary...

5 min read

Markup

<div class="tinnitus-article-card">
  <a class="tinnitus-article-card__image-link" href="#">
    <img class="tinnitus-article-card__image" src="..." alt="...">
  </a>
  <div class="tinnitus-article-card__body">
    <a class="tinnitus-article-card__link" href="#">
      <h3 class="tinnitus-article-card__title">Title</h3>
    </a>
    <p class="tinnitus-article-card__excerpt">Summary...</p>
    <span class="tinnitus-article-card__meta">5 min read</span>
  </div>
</div>

Source: web/app/themes/naluma-theme/assets/scss/molecules/_article-card.scss, line 1