Naluma Theme

2.7 #molecules.research-card Research Card

Toggle example guides Toggle HTML markup

Card displaying research summary with badge, title, meta, and excerpt.

Tokens: $spacing-micro, $spacing-xs, $radius-lg, $shadow-sm, $line-height-snug, $line-height-normal

Example
Strong

Study Title

 2024

Summary...

Markup 
<div class="tinnitus-research-card">
  <span class="tinnitus-badge-evidence tinnitus-badge-evidence--strong">Strong</span>
  <a class="tinnitus-research-card__link" href="#">
    <h3 class="tinnitus-research-card__title">Study Title</h3>
  </a>
  <span class="tinnitus-research-card__meta">2024</span>
  <p class="tinnitus-research-card__excerpt">Summary...</p>
</div>
Source: web/app/themes/naluma-theme/assets/scss/molecules/_research-card.scss, line 1