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-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

Muted color heading

Success color heading

Warning color heading

Danger color heading

<h3 class="wb-heading-3 wb-color-muted">Muted color heading<h3>
<h3 class="wb-heading-3 wb-color-success">Success color heading<h3>
<h3 class="wb-heading-3 wb-color-warning">Warning color heading<h3>
<h3 class="wb-heading-3 wb-color-danger">Danger color heading<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>