Tinnitus Child Theme

3 #organisms organisms

3.1 #organisms.archive-article Archive Article

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Article archive page: hero block, grid responsive overrides, and article card image styles.

Tokens: $spacing-sm, $spacing-xs, $spacing-tiny, $radius-lg, $radius-md, $shadow-sm, $line-height-normal, $component-link-underline-offset, $component-card-aspect-ratio-w, $component-card-aspect-ratio-h

Example
...

Title

Excerpt...

Read more
Markup 
<div class="tinnitus-archive-hero">
  <div class="tinnitus-archive-hero__image">
    <a href="#"><img class="tinnitus-archive-hero__img" src="..." alt="..."></a>
  </div>
  <div class="tinnitus-archive-hero__content">
    <h2 class="tinnitus-archive-hero__title"><a href="#">Title</a></h2>
    <p class="tinnitus-archive-hero__excerpt">Excerpt...</p>
    <a class="tinnitus-archive-hero__link" href="#">Read more</a>
  </div>
</div>
Source: web/app/themes/tinnitus-child/assets/scss/organisms/_archive-article.scss, line 1

3.2 #organisms.archive-research Archive Research

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Research archive page: research card modifier, FSE neutralization, and research-specific meta row.

Tokens: $spacing-tiny

Example
...
Markup 
<div class="tinnitus-archive-card tinnitus-archive-card--research is-layout-flow">
  <div class="tinnitus-archive-card__body">...</div>
</div>
Source: web/app/themes/tinnitus-child/assets/scss/organisms/_archive-research.scss, line 1

3.3 #organisms.card-grids Card Grids

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Shared 3-column grid layouts for block sections.

Tokens: $spacing-xs

Example
...
...
...
Markup 
<div class="tinnitus-research-highlights__grid">
  <div class="tinnitus-research-card">...</div>
  <div class="tinnitus-research-card">...</div>
  <div class="tinnitus-research-card">...</div>
</div>
Source: web/app/themes/tinnitus-child/assets/scss/organisms/_card-grids.scss, line 1

3.4 #organisms.filter-bar Filter Bar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Layout composition for search + filter controls. Responsive: stacks vertically on mobile.

Tokens: $spacing-xs, $spacing-micro, $component-filter-bar-search-flex-basis

Example
Markup 
<div class="tinnitus-filter-bar">
  <form class="tinnitus-filter-bar__form">
    <div class="tinnitus-filter-bar__search">
      <input class="tinnitus-filter-bar__input" type="text">
    </div>
    <div class="tinnitus-filter-bar__filters">
      <select class="tinnitus-filter-bar__select">...</select>
    </div>
    <button class="tinnitus-filter-bar__submit">Search</button>
  </form>
</div>
Source: web/app/themes/tinnitus-child/assets/scss/organisms/_filter-bar.scss, line 1

3.5 #organisms.footer Footer

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Footer column layout with tablet 2x2 grid and FSE overrides.

Tokens: $spacing-micro

Example
...
Markup 
<div class="tinnitus-footer-columns">
  <div class="wp-block-column">
    <details class="tinnitus-footer-accordion" open>...</details>
  </div>
</div>
Source: web/app/themes/tinnitus-child/assets/scss/organisms/_footer.scss, line 1

3.6 #organisms.single-article Single Article

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Two-column layout with sticky sidebar for article pages.

Tokens: $component-card-sticky-top

Example
...
Markup 
<div class="tinnitus-article-columns">
  <div class="tinnitus-article-columns__content">...</div>
  <aside class="tinnitus-article-columns__sidebar">...</aside>
</div>
Source: web/app/themes/tinnitus-child/assets/scss/organisms/_single-article.scss, line 1