Tinnitus Child Theme

1.1 #atoms.archive-description Archive Description

Introductory description text on archive pages.

Tokens: $component-archive-description-max-width, $font-size-sm, $line-height-normal

Example

Browse our articles...

Markup

<p class="tinnitus-archive-description">Browse our articles...</p>

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

1.2 #atoms.button Button

All button variants and interactive states. Primary style is defined in theme.json (wp-element-button defaults). Secondary and text variants override via :where() for low specificity.

.is-style-secondary - Slate light background .is-style-text - Transparent background, teal text

Tokens: $color-primary, $color-base, $color-contrast, $color-secondary-light, $color-primary-light, $color-focus-ring, $component-focus-outline-width, $component-focus-outline-offset, $transition-fast

Example

Markup

<button class="wp-element-button ">Button</button>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_button.scss, line 1

1.3 #atoms.evidence-badge Evidence Badge

Color-coded badge indicating evidence strength level. Uses color-mix() for transparent backgrounds.

.tinnitus-badge-evidence--strong - Green: strong evidence .tinnitus-badge-evidence--moderate - Amber: moderate evidence .tinnitus-badge-evidence--preliminary - Red: preliminary evidence .tinnitus-badge-evidence--neutral - Grey: neutral/unrated

Tokens: $component-badge-padding-y, $component-badge-padding-x, $component-badge-bg-mix, $radius-sm, $border-width-thin, $font-size-xs

Example

Strong Evidence

Markup

<span class="tinnitus-badge-evidence ">Strong Evidence</span>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_evidence-badge.scss, line 1

1.4 #atoms.input Input

Text input field for filter bar search.

Tokens: $component-filter-bar-input-padding-x, $border-width-thin, $border-width-medium, $radius-md

Example

Markup

<input type="text" class="tinnitus-filter-bar__input" placeholder="Search...">

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_input.scss, line 1

1.5 #atoms.last-reviewed Last Reviewed

Timestamp showing when content was last reviewed.

Example

Last reviewed: Jan 2025

Markup

<span class="tinnitus-last-reviewed">Last reviewed: Jan 2025</span>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_last-reviewed.scss, line 1

1.6 #atoms.link Link

Focus ring and visited state for links. Also includes filter bar reset link.

Tokens: $component-focus-outline-width, $component-focus-outline-offset, $component-link-underline-offset, $color-focus-ring

Example

Link text

Markup

<a href="#">Link text</a>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_link.scss, line 1

1.7 #atoms.post-type-badge Post Type Badge

Labels content as article or research post type.

.tinnitus-post-type-badge--article - Teal background .tinnitus-post-type-badge--research - Slate background

Tokens: $component-badge-padding-y-sm, $component-badge-padding-x-sm, $radius-sm, $font-size-xs, $letter-spacing-wider

Example

Article

Markup

<span class="tinnitus-post-type-badge ">Article</span>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_post-type-badge.scss, line 1

1.8 #atoms.reading-time Reading Time

Displays estimated reading time.

Example

5 min read

Markup

<span class="tinnitus-reading-time">5 min read</span>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_reading-time.scss, line 1

1.9 #atoms.section-heading Section Heading

Headings for block sections and footer columns.

Example

Research Highlights

Markup

<h2 class="tinnitus-research-highlights__heading">Research Highlights</h2>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_section-heading.scss, line 1

1.10 #atoms.select Select

Dropdown select for filter bar.

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

Example

Markup

<select class="tinnitus-filter-bar__select">
  <option>All topics</option>
</select>

Source: web/app/themes/tinnitus-child/assets/scss/atoms/_select.scss, line 1

1.11 #atoms.tag-pill Tag Pill

Inline tag label with pill shape.

Tokens: $component-badge-padding-y, $component-badge-padding-x, $radius-full, $font-size-xs

Example

Tinnitus

Markup

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

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