Design System Dev Resource
Menu

Text styles

headings

headings

Display 1 / Utopia Std Semibold

Display 2 / Utopia Std Semibold

Display 3 / Utopia Std Semibold

H1 / Utopia Std Semibold

H1b / Effra Regular

H2 / Utopia Std Semibold

H2b / Effra Regular

H3 / Utopia Std Semibold

H3b / Effra Bold

SCSS file 
<h1 class="bh-heading-display-1">Display 1 / Utopia Std Semibold</h1>
<h2 class="bh-heading-display-2">Display 2 / Utopia Std Semibold</h2>
<h3 class="bh-heading-display-3">Display 3 / Utopia Std Semibold</h3>
<h1 class="bh-heading-h1">H1 / Utopia Std Semibold</h1>
<h1 class="bh-heading-h1b">H1b / Effra Regular</h1>
<h2 class="bh-heading-h2">H2 / Utopia Std Semibold</h2>
<h2 class="bh-heading-h2b">H2b / Effra Regular</h2>
<h3 class="bh-heading-h3">H3 / Utopia Std Semibold</h3>
<h3 class="bh-heading-h3b">H3b / Effra Bold</h3>

headings with links

Display 1 / Inline Link / Black Link

Display 2 / Inline Link / Black Link

Display 3 / Inline Link / Black Link

H1 / Inline Link / Black Link

H1b / Inline Link / Black Link

H2 / Inline Link / Black Link

H2b / Inline Link / Black Link

H3 / Inline Link / Black Link

H3b / Inline Link / Black Link

SCSS file 
<h1 class="bh-heading-display-1">Display 1 / <a href="#" title="">Inline Link</a> / <a class="bh-heading-display-1-alt-link" href="#" title="">Black Link</a></h1>
<h2 class="bh-heading-display-2">Display 2 / <a href="#" title="">Inline Link</a> / <a class="bh-heading-display-2-alt-link" href="#" title="">Black Link</a></h2>
<h3 class="bh-heading-display-3">Display 3 / <a href="#" title="">Inline Link</a> / <a class="bh-heading-display-3-alt-link" href="#" title="">Black Link</a></h3>
<h1 class="bh-heading-h1">H1 / <a href="#" title="">Inline Link</a> / <a class="bh-heading-h1-alt-link" href="#" title="">Black Link</a></h1>
<h1 class="bh-heading-h1b">H1b / <a href="#" title="">Inline Link</a> / <a class="bh-heading-h1b-alt-link" href="#" title="">Black Link</a></h1>
<h2 class="bh-heading-h2">H2 / <a href="#" title="">Inline Link</a> / <a class="bh-heading-h2-alt-link" href="#" title="">Black Link</a></h2>
<h2 class="bh-heading-h2b">H2b / <a href="#" title="">Inline Link</a> / <a class="bh-heading-h2b-alt-link" href="#" title="">Black Link</a></h2>
<h3 class="bh-heading-h3">H3 / <a href="#" title="">Inline Link</a> / <a class="bh-heading-h3-alt-link" href="#" title="">Black Link</a></h3>
<h3 class="bh-heading-h3b">H3b / <a href="#" title="">Inline Link</a> / <a class="bh-heading-h3b-alt-link" href="#" title="">Black Link</a></h3>

subtitles

subtitles

Subtitle 1 / Effra Bold

Subtitle 2 / Effra Bold
SCSS file 
<h4 class="bh-subtitle-1">Subtitle 1 / Effra Bold</h4>
<h5 class="bh-subtitle-2">Subtitle 2 / Effra Bold</h5>

subtitles with links

Subtitle 1 / Inline Link / Black Link

Subtitle 2 / Inline Link / Black Link
SCSS file 
<h4 class="bh-subtitle-1">Subtitle 1 / <a href="#" title="">Inline Link</a> / <a class="bh-subtitle-1-alt-link" href="#" title="">Black Link</a></h4>
<h5 class="bh-subtitle-2">Subtitle 2 / <a href="#" title="">Inline Link</a> / <a class="bh-subtitle-2-alt-link" href="#" title="">Black Link</a></h5>

body copy

body copy

Body 1 Main / Effra Regular

Body 1 Strong / Effra Bold

Body 1 Tight / Effra Regular

Body 2 Main / Effra Regular

Body 2 Strong / Effra Bold

Body 2 Tight / Effra Regular

SCSS file 
<p class="bh-body-1-main">Body 1 Main / Effra Regular</p>
<p class="bh-body-1-strong">Body 1 Strong / Effra Bold</p>
<p class="bh-body-1-tight">Body 1 Tight / Effra Regular</p>
<p class="bh-body-2-main">Body 2 Main / Effra Regular</p>
<p class="bh-body-2-strong">Body 2 Strong / Effra Bold</p>
<p class="bh-body-2-tight">Body 2 Tight / Effra Regular</p>

body copy with links

Body 1 Main / Inline Link / Black Link

Body 1 Strong / Inline Link / Black Link

Body 1 Tight / Inline Link / Black Link

Body 2 Main / Inline Link / Black Link

Body 2 Strong / Inline Link / Black Link

Body 2 Tight / Inline Link / Black Link

SCSS file 
<p class="bh-body-1-main">Body 1 Main / <a href="#" title="">Inline Link</a> / <a class="bh-body-1-main-alt-link" href="#" title="">Black Link</a></p>
<p class="bh-body-1-strong">Body 1 Strong / <a href="#" title="">Inline Link</a> / <a class="bh-body-1-strong-alt-link" href="#" title="">Black Link</a></p>
<p class="bh-body-1-tight">Body 1 Tight / <a href="#" title="">Inline Link</a> / <a class="bh-body-1-tight-alt-link" href="#" title="">Black Link</a></p>
<p class="bh-body-2-main">Body 2 Main / <a href="#" title="">Inline Link</a> / <a class="bh-body-2-main-alt-link" href="#" title="">Black Link</a></p>
<p class="bh-body-2-strong">Body 2 Strong / <a href="#" title="">Inline Link</a> / <a class="bh-body-2-strong-alt-link" href="#" title="">Black Link</a></p>
<p class="bh-body-2-tight">Body 2 Tight / <a href="#" title="">Inline Link</a> / <a class="bh-body-2-tight-alt-link" href="#" title="">Black Link</a></p>

miscellaneous

miscellaneous

Caption / Effra Regular
Overline / Effra Medium Button text / Effra Medium
SCSS file 
<figcaption class="bh-caption">Caption / Effra Regular</figcaption>
<span class="bh-overline">Overline / Effra Medium</span>
<span class="bh-button-text">Button text / Effra Medium</span>

miscellaneous with links

Caption / Inline Link / Black Link
Overline / Inline Link / Black Link Button text link
SCSS file 
<figcaption class="bh-caption">Caption / <a href="#" title="">Inline Link</a> / <a class="bh-caption-alt-link" href="#" title="">Black Link</a></figcaption>
<span class="bh-overline">Overline / <a href="#" title="">Inline Link</a> / <a class="bh-overline-alt-link" href="#" title="">Black Link</a></span>
<a href="#" class="bh-button-link" title="">Button text link</a>
<button type="button" class="bh-button-link">Button text button</button>

© Banner Health