Media WebUI

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
Pneumonoultramicro-scopicsilico-volcanoconiosis
Pneumonoultramicro-scopicsilico-volcanoconiosis
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
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
Pellentesque habitant morbi tristique
Pellentesque habitant morbi tristique
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

民國105416

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