Our typographical styles for headers, text, and links.
.wb-heading-{x}
Headings are defined in 6 different levels, where {x} can be
1 to 6, with 1 being the biggest header size and 6 the smallest. They should
be applied to a header tag.
<h1 class='wb-heading-1'>Horton Hears a Who</h1>
<h1 class='wb-heading-2'>Horton Hears a Who</h1>
<h1 class='wb-heading-3'>Horton Hears a Who</h1>
<h1 class='wb-heading-4'>Horton Hears a Who</h1>
<h1 class='wb-heading-5'>Horton Hears a Who</h1>
<h1 class='wb-heading-6'>Horton Hears a Who</h1>.wb-heading--inverse
Apply this modifier to make the headings white, typically used when the heading is on a blue background.
<h1 class='wb-heading-1 wb-heading--inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-2 wb-heading--inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-3 wb-heading--inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-4 wb-heading--inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-5 wb-heading--inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-6 wb-heading--inverse'>Horton Hears a Who</h1>.wb-heading--colored
The color modifier should only be applied to heading levels 1 to 3, as these are typically used as display messages.
<h1 class='wb-heading-1 wb-heading--colored'>Horton Hears a Who</h1>
<h1 class='wb-heading-2 wb-heading--colored'>Horton Hears a Who</h1>
<h1 class='wb-heading-3 wb-heading--colored'>Horton Hears a Who</h1>.wb-heading--colored-inverse
Colored heading can be used on blue background too, like the example above, it should only be used for heading levels 1 to 3.
<h1 class='wb-heading-1 wb-heading--colored-inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-2 wb-heading--colored-inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-3 wb-heading--colored-inverse'>Horton Hears a Who</h1>.wb-heading--muted
A muted heading, which should only be used as a subtitle.
<h1 class='wb-heading-1 wb-heading--muted'>Horton Hears a Who</h1>
<h1 class='wb-heading-2 wb-heading--muted'>Horton Hears a Who</h1>
<h1 class='wb-heading-3 wb-heading--muted'>Horton Hears a Who</h1>.wb-heading--muted-inverse
Muted heading on colored background.
<h1 class='wb-heading-1 wb-heading--muted-inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-2 wb-heading--muted-inverse'>Horton Hears a Who</h1>
<h1 class='wb-heading-3 wb-heading--muted-inverse'>Horton Hears a Who</h1>.wb-heading__subtext
Use .wb-heading__subtext to create breaks in headings
that requires multiple styles and lines. Each subtext can be styled with
.wb-heading--{modifier}.
<h1 class='wb-heading-2 wb-heading--inverse'>
On the fifteenth of May
<span class='wb-heading__subtext wb-heading--colored-inverse'>In the jungle of Nool</span>
<span class='wb-heading__subtext wb-heading--inverse'>In the heat of the day</span>
<span class='wb-heading__subtext wb-heading--colored-inverse'>In the cool of the pool</span>
</h1>If there is a need to have different font sizes for headings,
then its better to use multiple headers instead of using .wb-heading__subtext.
<h1 class='wb-heading-2 wb-heading--inverse wb-u-margin-b-0'>On the fifteenth of May</h1>
<h2 class='wb-heading-3 wb-heading--colored-inverse wb-u-margin-b-0'>In the jungle of Nool</h2>
<h3 class='wb-heading-4 wb-heading--inverse wb-u-margin-b-0'>In the heat of the day</h3>
<h4 class='wb-heading-5 wb-heading--colored-inverse wb-u-margin-b-0'>In the cool of the pool</h4>.wb-text
Our regular text styles. Can be applied to a <p>, <div>, <span>, or
lists. Links within the text that don't have any class will automatically
get an underline.
If we didn’t have birthdays, you wouldn’t be you. If you’d never been born, well then what would you do? If you’d never been born, well then what would you be? You might be a fish! Or a toad in a tree! You might be a doorknob!
<p class='wb-text'>
If we didn’t have birthdays, <a href='#'>you wouldn’t be you</a>. If you’d
never been born, well then what would you do? If you’d never been born,
well then what would you be? You might be a fish! Or a toad in a tree!
You might be a doorknob!
</p>
<ul class='wb-text'>
<li><a href='#'>I always have an underline</a></li>
<li><a href='#' class='just-a-placeholder-class'>I only have underline on hover</a></li>
<ul>.wb-text--small
Our smaller text. This is often used for footer text or disclaimer information.
If we didn’t have birthdays, you wouldn’t be you. If you’d never been born, well then what would you do? If you’d never been born, well then what would you be? You might be a fish! Or a toad in a tree! You might be a doorknob!
<p class='wb-text wb-text--small'>
If we didn’t have birthdays, <a href='#'>you wouldn’t be you</a>. If you’d
never been born, well then what would you do? If you’d never been born,
well then what would you be? You might be a fish! Or a toad in a tree!
You might be a doorknob!
</p>.wb-text--inverse
Text should be white when used on a blue background. The modifier inverses
the colors of any <a> within the text as well.
If we didn’t have birthdays, you wouldn’t be you. If you’d never been born, well then what would you do? If you’d never been born, well then what would you be? You might be a fish! Or a toad in a tree! You might be a doorknob!
<p class='wb-text wb-text--inverse'>
If we didn’t have birthdays, <a href='#'>you wouldn’t be you</a>. If you’d
never been born, well then what would you do? If you’d never been born,
well then what would you be? You might be a fish! Or a toad in a tree!
You might be a doorknob!
</p>.wb-text--muted
Makes the text muted. Should be used for secondary information. If the text
has a link, usually you want to apply .wb-link--muted to the link as well.
If we didn’t have birthdays, you wouldn’t be you. If you’d never been born, well then what would you do? If you’d never been born, well then what would you be? You might be a fish! Or a toad in a tree! You might be a doorknob!
<p class='wb-text wb-text--muted'>
If we didn’t have birthdays, <a href='#' class='wb-link--muted'>you wouldn’t
be you</a>. If you’d never been born, well then what would you do? If you’d
never been born, well then what would you be? You might be a fish! Or a toad
in a tree! You might be a doorknob!
</p>.wb-text--error
Makes the text show in our error color. This is most often used in with our form elements for displaying validation messages.
Someting went wrong!
<p class='wb-text wb-text--error'>
Someting went wrong!
</p>.wb-link--muted
Makes the link take on the same color as its parent.
One fish, two fish, red fish, blue fish.
<p class='wb-text'>
One fish, two fish, red fish,
<a href='#' class='wb-link--muted'>blue</a> fish.
</p>.wb-list .wb-list--empty
Apply to <ul> and <ol> to align the bullets/numbers to .wb-text. If
bullets/numbers are not needed, use the modifier .wb-list--empty.
Bullet points below should fall right below the "B" of this paragraph:
Numbers below should all right below the "N" of this paragraph:
This list does not have any bullets or numbers:
<p class='wb-text'>
Bullet points below should fall right below the "B" of this paragraph:
</p>
<ul class='wb-list'>
<li>Horton hears a who</li>
<li>The little prince</li>
<li>Good night moon</li>
</ul>
<p class='wb-text'>
Numbers below should all right below the "N" of this paragraph:
</p>
<ol class='wb-list'>
<li>Horton hears a who</li>
<li>The little prince</li>
<li>Good night moon</li>
</ol>
<p class='wb-text'>
This list does not have any bullets or numbers:
</p>
<ul class='wb-list wb-list--empty'>
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</ul>