Typography
Classed based and non class based styles relating to type
Byline
Used for attribution of content.
www.wbez.org 1
.t-byline
HTML Example
<div class="t-meta t-byline">By <a href="/staff/Dan+Mihalopoulos">Dan Mihalopoulos</a> and <span>Kate McGee</span></div>
Datestamp
Used for timestamping of content.
ferris-ds 5
.t-datestamp
HTML Example
<time class="t-datestamp" datetime="2019-09-04T19:35:32Z">September 4, 2019</time>
Ellipsis
Accessibly truncate a long list of items with an ellipsis.
ferris-ds 1
www.wbez.org 3
.t-ellipsis
HTML Example
<div class="c-rubric t-links -subtle">
<ul class="c-rubric__wrap t-ellipsis">
<li class="c-rubric__item -topic">
<a href="#">
Government & Politics
</a>
</li>
<li class="c-rubric__item -show">
<a href="#">
Reset
<i class="c-icon t-size-xxs">
<svg aria-hidden="true">
<use xlink:href="#rss"></use>
</svg>
</i>
</a>
</li>
<li class="c-rubric__item -topic">
<a href="#">
Government & Politics
</a>
</li>
<li class="c-rubric__item -show">
<a href="#">
Reset
<i class="c-icon t-size-xxs">
<svg aria-hidden="true">
<use xlink:href="#rss"></use>
</svg>
</i>
</a>
</li>
<li class="c-rubric__item -topic">
<a href="#">
Government & Politics
</a>
</li>
<li class="c-rubric__item -show">
<a href="#">
Reset
<i class="c-icon t-size-xxs">
<svg aria-hidden="true">
<use xlink:href="#rss"></use>
</svg>
</i>
</a>
</li>
</ul>
</div>
Headline
Our default headline formatting. Does not include size.
Headlines are typically <h1> elements, but you can apply the styles to any header element to size appropriately. Linked headlines will be given a red underline style on hover.
ferris-ds 8
www.wbez.org 17
.t-headline
Story headline text with link.
HTML Example
<h1 class="t-headline {{ className }}">Story headline text <a>with link.</a></h1>
.-article
Story headline text with link.
Article headlines are special and have responsive font-sizing.
www.wbez.org 1
Links
Apply this to a parent to have descendant <a> tags inherit the respective link style. See elements/_links for default link styling.
ferris-ds 2
www.wbez.org 3
.t-links
Block of text in a paragraph. This is what links with a parent of this style look like. This is what a link inside an underline looks like.
HTML Example
<p class="t-links {{ className }}">Block of text in a paragraph. <a href="#">This is what links with a parent of this style look like.</a> <u><a href="#">This is what a link inside an underline looks like.</a></u></p>
.-subtle
Block of text in a paragraph. This is what links with a parent of this style look like. This is what a link inside an underline looks like.
Changes the color to $color-link-hover on hover/focus without underline
ferris-ds 2
www.wbez.org 3
.-underlined
Block of text in a paragraph. This is what links with a parent of this style look like. This is what a link inside an underline looks like.
Preserves the color, adds an underline on hover/focus
.-subtle.-underlined
Block of text in a paragraph. This is what links with a parent of this style look like. This is what a link inside an underline looks like.
Changes the color to $color-link-hover on hover/focus with underline
.-story
Block of text in a paragraph. This is what links with a parent of this style look like. This is what a link inside an underline looks like.
A special link treatment specific to stories.
Meta
Used for meta details. Styled smaller and lighter than the default text.
ferris-ds 1
www.wbez.org 6
.t-meta
HTML Example
<time class="t-meta">Published 10 a.m.</time>
Sectionhead
The section heading.
ferris-ds 1
www.wbez.org 6
.t-section-heading
Title for a section of text with link.
HTML Example
<h2 class="t-section-heading">Title for a section of text with <a>link.</a></h2>
Smallcaps
ferris-ds 2
www.wbez.org 7
.t-smallcaps
HTML Example
<span class="t-smallcaps {{ className }}">Lorem ipsum</span>
.-light
Applies a lighter font weight and increases the letter-spacing
www.wbez.org 1
.-section
Applies bottom margin and bumps down font-size
Smallhed
Our default smallhed formatting. Does not include size.
Small heds are typically <h3> elements, but you can apply the styles to any header element to size appropriately. Linked headlines will be given a red underline style on hover.
www.wbez.org 1
.t-smallhed
Story subhed text with link.
HTML Example
<h3 class="t-smallhed {{ className }}">Story subhed text <a>with link.</a></h3>
.-article
Story subhed text with link.
Article smallheds are special and have a designated font size.
www.wbez.org 1
Subhed
Our default subhed formatting. Does not include size.
Headlines are typically <h2> elements, but you can apply the styles to any header element to size appropriately. Linked headlines will be given a red underline style on hover.
ferris-ds 1
www.wbez.org 1
.t-subhed
Story subhed text with link.
HTML Example
<h2 class="t-subhed {{ className }}">Story subhed text <a>with link.</a></h2>
.-article
Story subhed text with link.
Article subheds are special and have a designated font size.
ferris-ds 1
www.wbez.org 1
Text align
t-align-<dir>
.t-align-left
Example
Left aligned
ferris-ds 1
www.wbez.org 3
.t-align-center
Example
Center aligned
ferris-ds 5
www.wbez.org 8
.t-align-right
Example
Right aligned
ferris-ds 1
Text case
t-<case>
.t-titlecase
Text transform helper.
Text transformed to Title Case
.t-uppercase
Text transform helper.
Text transformed to UPPERCASE
.t-uppercase.-wide
Text transform helper.
To be used with UPPERCASE to add kerning
.t-uppercase.-extra-wide
Text transform helper.
To be used with UPPERCASE to add more kerning
Text font variant
t-<font-variant>
.t-sans
Change inherit font family
Change inherit font family
Default sans
ferris-ds 1
www.wbez.org 2
.t-serif
Change inherit font family
Change inherit font family
Default serif
.t-slab
Change inherit font family
Change inherit font family
Default slab
Text font weight
t-weight-<type>
.t-weight-normal
Texas again mistakenly flags voters for citizenship reviews
Normal
ferris-ds 1
.t-weight-bold
Texas again mistakenly flags voters for citizenship reviews
Bold
www.wbez.org 1
Text size
t-size-<size>
ferris-ds 1
www.wbez.org 4
.t-size-xxxs
xxxs size
.t-size-xxs
xxs size
ferris-ds 9
www.wbez.org 1
.t-size-xs
xs size
ferris-ds 7
www.wbez.org 6
.t-size-s
s size
ferris-ds 12
www.wbez.org 12
.t-size-b
b size
ferris-ds 6
www.wbez.org 2
.t-size-m
m size
ferris-ds 4
www.wbez.org 2
.t-size-l
l size
ferris-ds 6
www.wbez.org 4
.t-size-xl
xl size
www.wbez.org 1
ferris-ds 1
.t-size-xxl
xxl size
ferris-ds 2
www.wbez.org 1
.t-size-giant
giant size
www.wbez.org 2
.t-size-xxxl
xxxl size
.t-size-inherit
1em