Utilities

A few utilites we can use to apply additional styles

Typography Utilties

Class `.wb-u-font-bold` and `.wb-u-font-normal`

Apply .wb-u-font-bold to specify font weight to be bold, and .wb-u-font-normal for normal

Everything here
Will be bold
Except this item

<ul class='wb-list wb-u-font-bold'>
  <li>Everything here</li>
  <li>Will be bold</li>
  <li class='wb-u-font-normal'>Except this item</li>
</ul>

Class `.wb-u-font-heading`

Apply .wb-u-font-heading to override font style to our display type.

No override
With override

<a href="#">
  No override
</a>
<br/>
<a href="#" class='wb-u-font-heading'>
  With override
</a>

Class `.wb-u-whitespace-no-wrap`

Apply .wb-u-whitespace-no-wrap to make any text not line break.

This will keep all text on one line, even though the width is too small.

<p class='wb-u-whitespace-no-wrap' style='width: 30px'>
 This will keep all text on one line, even though the width is too small.
</p>

Class `.wb-u-break-word`

Apply .wb-u-break-word to allow words to break in the middle if needed.

Thisisaverylongwordanditcouldoverflowthecontainerbutluckilywecantellittobreakinthemiddleofwords

<p class='wb-u-break-word' style='width: 200px; background: #f8f1b0; padding: 10px;'>
 Thisisaverylongwordanditcouldoverflowthecontainerbutluckilywecantellittobreakinthemiddleofwords
</p>

Class `.wb-u-text-underline`

Apply .wb-u-text-underline to add an underline. Links that are not inside a <p> do not have an underline by default, so we can add it by applying this class.

I am a link and I need underline
I am a link and now I have a proper underline

<a href="#">I am a link and I need underline</a>
<br>
<a href="#" class="wb-u-text-underline">I am a link and now I have a proper underline</a>

Class `.wb-u-align-top` `.wb-u-align-middle` `.wb-u-align-bottom`, `.wb-u-align-baseline`

Apply these classes to override default vertical alignments. Note that these classes have !important applied to them since often times they are used to override nested definitions (for example, in table cells or table headers).

I'm aligned to the top

I'm aligned to the middle

I'm aligned to the bottom

I'm aligned to the baseline

<div class='wb-u-align-top' style='display: table-cell; height: 8rem; background: #f8f1b0; padding: 10px;'>
  I'm aligned to the top
</div>
<div class='wb-u-align-middle' style='display: table-cell; height: 8rem; background: #ebebfa; padding: 10px;'>
  I'm aligned to the middle
</div>
<div class='wb-u-align-bottom' style='display: table-cell; height: 8rem; background: #d6fbf5; padding: 10px;'>
  I'm aligned to the bottom
</div>
<div class='wb-u-align-baseline' style='display: table-cell; height: 8rem; background: #fbe8e2; padding: 10px;'>
  I'm aligned to the baseline
</div>

Color Utilities

Class `.wb-color-muted` `.wb-color-danger` `.wb-color-warning` `.wb-u-color-success`

Use these style to override default text styles

Info color

Brand color

Text color

Muted color

Success color

Warning color

Danger color

<h3 class="wb-heading-3 wb-color-info">Info color<h3>
<h3 class="wb-heading-3 wb-color-brand">Brand color<h3>
<h3 class="wb-heading-3 wb-color-text">Text color<h3>
<h3 class="wb-heading-3 wb-color-muted">Muted color<h3>
<h3 class="wb-heading-3 wb-color-success">Success color<h3>
<h3 class="wb-heading-3 wb-color-warning">Warning color<h3>
<h3 class="wb-heading-3 wb-color-danger">Danger color<h3>

Display Utilities

Class `.wb-display-inline`

Use this to change the display property of an element from block to inline-block. This can be useful for making form elements display as an inline element, like when applied to a dropdown followed by a paragraph.

I am a block

I am an inline-block

I am a paragraph followed by a dropdown:

<div style='background: #f8f1b0; padding: 10px;'>
  I am a block
</div>
<div class='wb-display-inline' style='background: #ebebfa; padding: 10px;'>
  I am an inline-block
</div>
<div>
  <p class='wb-display-inline'>I am a paragraph followed by a dropdown:</p>
  <div class='wb-dropdown wb-dropdown--small wb-display-inline'>
    <select class='wb-dropdown__select' id='moop' name='moop'>
      <option value='value_1'>Value 1</option>
      <option value='value_2222'>Value 2222</option>
      <option value='value_33333333'>Value 33333333</option>
    </select>
  </div>
</div>