Text Sizes

The tags h1, h2, h3, and h4 are styled by default and will appear as follows when the size is not multiplied by text-* classes:

Heading 1

Heading 2

Heading 3

Heading 4

WebUI does not define any base font size and just uses the browser default. The following classes can be used to set different sizes relative to the browser font size or parent element font size:

Class

Description

text-xs

Sets the font size to 0.75 times the browser font size or the parent element font size.

text-sm

Sets the font size to 0.875 times the browser font size or the parent element font size.

text-lg

Sets the font size to 1.125 times the browser font size or the parent element font size.

text-xl

Sets the font size to 1.25 times the browser font size or the parent element font size.

text-mega

Sets the font size to 2.5 times the browser font size or the parent element font size.

In order to increase or decrease the font size for the body, container, or even a single column, you just need to add one of the above classes to it. Then, any classes you use within that element will size relative to the parent font size. However, if you use the class text-md there will be no inherited change because text-md is actually 1em, which means multiply by 1.

For example, if you use text-lg on a container and specify text-lg on any columns within that container, then the text size would actually be equivalent to 20.25px for those columns, based on a browser font size of 16px.

Scalable Text

WebUI also provides progressive font rendering. It works by gradually increasing or decreasing the text size between the smallest and largest breakpoints. The table below shows each text size and its range.

Class

Size Range

Breakpoints

text-scalable-xs

0.56rem - 0.75rem

bp-1-over, bp-5-under

text-scalable-sm

0.66rem - 0.875rem

bp-1-over, bp-5-under

text-scalable-md

0.75rem - 1rem

bp-1-over, bp-5-under

text-scalable-lg

0.84rem - 1.125rem

bp-1-over, bp-5-under

text-scalable-xl

0.94rem - 1.25rem

bp-1-over, bp-5-under

text-scalable-mega

1.87rem - 2.5rem

bp-1-over, bp-5-under

Example

Large text that scales between the smallest and largest breakpoints.

Markup

<p class="text-scalable-lg">Large text that scales between the smallest and largest breakpoints.</p>

More Text Classes

WebUI includes the most commonly used text classes, so that you can create text that is both readable and pleasing to the eye.

Text Styles

text-italic
text-bold
text-upper
text-lower
text-capital
text-underline
text-line-through
text-dropcap

Text Behaviour

Class

Description

text

Sets the line height to 1.7em and removes text decoration.

text-normal

Sets the line height to 1.5em, removes text decoration, and sets white-space to normal.

text-wrap

Sets word-wrap and overflow-wrap to break-word.

text-nowrap

Sets white-space to nowrap.

Example

text

text-normal

text-wrap

text-nowrap

Pneumonoultramicro-scopicsilico-volcanoconiosis

Markup

<div class="container">
  <div class="table-row background-secondary text-center text-sm">
    <div class="table-col-5">
      text
    </div>
    <div class="table-col-5">
      text-normal
    </div>
    <div class="table-col-5">
      text-wrap
    </div>
    <div class="table-col-5">
      text-nowrap
    </div>	
  </div>	
  <div class="table-row">
    <div class="table-col-5 text">
      <div class="panel">Pneumonoultramicro-scopicsilico-volcanoconiosis</div>
    </div>
    <div class="table-col-5 text-normal">
      <div class="panel">Pneumonoultramicro-scopicsilico-volcanoconiosis</div>
    </div>
    <div class="table-col-5 text-wrap">
      <div class="panel">Pneumonoultramicro-scopicsilico-volcanoconiosis</div>
    </div>
    <div class="table-col-5 text-nowrap">
      <div class="panel">Pneumonoultramicro-scopicsilico-volcanoconiosis</div>
    </div>
  </div>
</div>

Text Direction

Example

text-direction-ltr

text-direction-rtl

Lorem ipsum dolor sit amet

Markup

<div class="container">
  <div class="table-row background-secondary text-center text-sm">
    <div class="table-col-10">
      text-direction-ltr
    </div>
    <div class="table-col-10">
      text-direction-rtl
    </div>
  </div>	
  <div class="table-row text-lg">
    <div class="table-col-10">
      <div class="panel height-lg text-direction-ltr">
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class="table-col-10">
      <div class="panel height-lg text-direction-rtl">
        Lorem ipsum dolor sit amet
      </div>
    </div>
  </div>
</div>

Text OrientationNot supported in Internet Explorer

Example

text-vertical-ltr

text-vertical-rtl

text-vertical-slr

text-vertical-srl

Pellentesque habitant morbi tristique

Markup

<div class="container">
  <div class="table-row background-secondary text-center text-sm">
    <div class="table-col-5">
      text-vertical-ltr
    </div>
    <div class="table-col-5">
      text-vertical-rtl
    </div>
    <div class="table-col-5">
      text-sideways-ltr
    </div>
    <div class="table-col-5">
      text-sideways-rtl
    </div>	
  </div>	
  <div class="table-row">
    <div class="table-col-5">
      <div class="panel height-lg text-vertical-ltr">Pellentesque habitant morbi tristique</div>
    </div>
    <div class="table-col-5">
      <div class="panel height-lg text-vertical-rtl">Pellentesque habitant morbi tristique</div>
    </div>
    <div class="table-col-5">
      <div class="panel height-lg text-sideways-slr">Pellentesque habitant morbi tristique</div>
    </div>
    <div class="table-col-5">
      <div class="panel height-lg text-sideways-srl">Pellentesque habitant morbi tristique</div>
    </div>	
  </div>
</div>

Mixed OrientationNot supported in Internet Explorer

Example

text-vertical-ltr, text-upright

text-vertical-ltr, text-upright-digits

民國105年4月16日

平成20年4月16日に

Markup

<div class="container">
  <div class="table-row background-secondary text-center text-sm">
    <div class="table-col-10">
      text-vertical-lr, text-upright
    </div>
    <div class="table-col-10">
      text-vertical-ltr, text-upright-digits
    </div>
  </div>	
  <div class="table-row text-lg">
    <div class="table-col-10">
      <div class="panel">
        <p lang="zh-Hant" class="text-vertical-ltr">
          民國<span class="text-upright">105</span>年<span class="text-upright">4</span>月<span class="text-upright">16</span>日
        </p>
      </div>
    </div>
    <div class="table-col-10">
      <div class="panel">
        <p lang="ja" class="text-vertical-ltr text-upright-digits">平成20年4月16日に</p>
      </div>
    </div>
  </div>
</div>

Customisation

Blockquotes

Example

Blockquote heading

Blockquotes look great with a little formatting and colour using WebUI classes.

— Blockquote footer

Markup

<blockquote class="boundary-left-accent-2 background-primary rounded-md">
  <p class="color-accent-2">Blockquote heading</p>
  <p>Blockquotes look great with a little formatting and colour using WebUI classes.</p>
  <p class="text-sm text-italic color-accent-5">— Blockquote footer</p>
</blockquote>