Tinnitus Child Theme

2.1 #molecules.archive-card-body Archive Card Body

FSE-neutralized card body used in archive templates. Includes shared styles for archive card title, reading time, and excerpt.

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

Example

Title

...

Markup

<div class="tinnitus-archive-card">
  <div class="tinnitus-archive-card__body is-layout-flow">
    <h3>Title</h3>
    <div class="wp-block-post-excerpt">
      <p class="wp-block-post-excerpt__excerpt">...</p>
    </div>
  </div>
</div>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_archive-card-body.scss, line 1

2.2 #molecules.archive-link Archive Link

"View all" link at the bottom of block sections.

Tokens: $spacing-tiny, $font-size-sm, $component-link-underline-offset

Example

View all research →

Markup

<p class="tinnitus-research-highlights__more">
  <a href="/research/">View all research &rarr;</a>
</p>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_archive-link.scss, line 1

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/tinnitus-child/assets/scss/molecules/_article-card.scss, line 1

2.4 #molecules.article-meta Article Meta

Inline meta row with dot separators between items.

Example

5 min read Last reviewed: Jan 2025

Markup

<div class="tinnitus-article-meta">
  <span class="tinnitus-reading-time">5 min read</span>
  <span class="tinnitus-last-reviewed">Last reviewed: Jan 2025</span>
</div>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_article-meta.scss, line 1

2.5 #molecules.footer-accordion Footer Accordion

Mobile accordion using <details>/<summary> for footer columns. Desktop: summary hidden, content visible via open attribute. Mobile: collapsible with chevron indicators.

Tokens: $spacing-micro, $component-footer-accordion-padding-bottom, $component-footer-summary-padding, $border-width-thin

Example

Markup

<details class="tinnitus-footer-accordion" open>
  <summary>Topics</summary>
  <h3 class="wp-block-heading tinnitus-footer-heading">Topics</h3>
  <ul class="tinnitus-footer-topics">...</ul>
</details>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_footer-accordion.scss, line 1

2.6 #molecules.footer-links Footer Links

Link lists in footer columns: topics, links, and language switcher.

Tokens: $spacing-micro, $opacity-hover

Example

Markup

<ul class="tinnitus-footer-topics">
  <li><a href="#">Topic</a></li>
</ul>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_footer-links.scss, line 1

2.7 #molecules.research-card Research Card

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/tinnitus-child/assets/scss/molecules/_research-card.scss, line 1

2.8 #molecules.source-citation Source Citation

Blockquote-style citation with label, title, and link.

Tokens: $spacing-sm, $spacing-tiny, $spacing-xs, $spacing-micro, $border-width-thick, $radius-md, $component-link-underline-offset, $opacity-hover

Example

Source

Study Title

Markup

<div class="tinnitus-source-citation">
  <p class="tinnitus-source-citation__label">Source</p>
  <p class="tinnitus-source-citation__title">
    <a href="#">Study Title</a>
  </p>
</div>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_source-citation.scss, line 1

2.9 #molecules.tag-strip Tag Strip

Flex container for tag pills.

Example

Tinnitus Treatment

Markup

<div class="tinnitus-tag-strip">
  <a class="tinnitus-tag" href="#">Tinnitus</a>
  <a class="tinnitus-tag" href="#">Treatment</a>
</div>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_tag-strip.scss, line 1

2.10 #molecules.tom-select Tom Select

Vendor theme overrides for Tom Select multi-select dropdowns.

Tokens: $component-filter-bar-select-min-width, $component-filter-bar-select-padding-x, $radius-md, $radius-sm, $shadow-sm

Example

...

Markup

<div class="tinnitus-filter-bar">
  <div class="ts-wrapper multi">
    <div class="ts-control">...</div>
    <div class="ts-dropdown">...</div>
  </div>
</div>

Source: web/app/themes/tinnitus-child/assets/scss/molecules/_tom-select.scss, line 1