Media WebUI

Text Alignment

Horizontal

To align text horizontally within block level elements you can use one of the following classes:

  • text-left
  • text-center
  • text-right
  • text-justify
Example
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Markup
<div class="container">
  <div class="table-row">
    <div class="table-col-5 text-left">
      <div class="panel">Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</div>
    </div>
    <div class="table-col-5 text-center">
      <div class="panel">Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</div>
    </div>
    <div class="table-col-5 text-right">
      <div class="panel">Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</div>
    </div>
    <div class="table-col-5 text-justify">
      <div class="panel">Pellentesque habitant morbi tristique senectus et 
      netus et malesuada fames ac turpis egestas.</div>
    </div>
  </div>
</div>

Vertical

To align inline elements vertically within another element's line box you can use one of the following classes:

  • vertical-top
  • vertical-middle
  • vertical-bottom
  • vertical-text-top
  • vertical-text-bottom
  • vertical-sub
  • vertical-super
Example
w vertical-top
w vertical-middle
w vertical-bottom
w vertical-text-top
w vertical-text-bottom
w vertical-sub
w vertical-super
Markup
<div class="form-row">
  <div class="form-col-6 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-top">vertical-top</span>
  </div>
  <div class="form-col-6 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-middle">vertical-middle</span>
  </div>
  <div class="form-col-6 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-bottom">vertical-bottom</span>
  </div>
</div>
<div class="form-row">
  <div class="form-col-5 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-text-top">vertical-text-top</span>
  </div>
  <div class="form-col-6 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-text-bottom">vertical-text-bottom</span>
  </div>
  <div class="form-col-4 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-sub">vertical-sub</span>
  </div>
  <div class="form-col-5 vertical-alignment respond-bp-3-under">
    <span class="text-bold pad-right-xs">w</span>
    <span class="vertical-super">vertical-super</span>
  </div>
</div>

In the above example a line-height of 2.5em has been applied to each column to make the vertical alignment within the element line box more pronounced for illustration purposes only.

Line Height

WebUI does not provide utility classes to apply various line heights, as this could promote typographical inconsistencies.

Element Alignment

Block Level Elements

To align block level HTML elements horizontally you can use one of the following classes:

  • align-left
  • align-center
  • align-right
  • align-media-left
  • align-media-center
  • align-media-right

The difference between the align-* and align-media-* classes is that align-* classes will use margin only to align content, but align-media-* classes will change the display property of the element being aligned to display: table. This means that, when using align-* classes, a block level element will stretch to any max-width that may be applied. On the other hand, align-media-* classes will cause an element to stretch only to the width of its content before alignment.

Example
Lorem ipsum
Lorem ipsum
Markup
<div class="gap-vertical-sm">
  <div class="align-center pad-xs background-accent-1-light" 
  style="max-width: 20rem;">
	  Lorem ipsum
  </div>
  <div class="align-media-center pad-xs background-accent-1-light" 
  style="max-width: 20rem;">
	  Lorem ipsum
  </div>
</div>

Inline Elements

In order to align images or other inline media elements such as video you should use the align-media-* classes. Using align-* classes on their own will not work for inline elements, unless you have already added the image class also, in which case either will work. This is because the image class sets the display property to block.

Example
Markup
<div class="gap-vertical-sm">
  <img src="images/landscape_1_small.jpg" class="align-media-center" />
  <img src="images/landscape_1_small.jpg" class="image align-center" />
</div>

Float Alignment

A set of classes using float alignment are available as follows:

  • move-left
  • move-right
  • move-left-stacked
  • move-right-stacked

As you might expect, the move-left and move-right classes use float: left and float: right CSS styles. You can also use move-left-stacked and move-right-stacked to align an element and stack all of its child elements vertically at the same time.

Example
Markup
<div class="container gap-vertical-sm move-right-stacked">
  <img src="images/landscape_1_small.jpg" class="image" />
  <img src="images/landscape_1_small.jpg" class="image" />	
</div>

<div class="container gap-vertical-sm move-left-stacked">
  <img src="images/landscape_1_small.jpg" class="image" />
  <img src="images/landscape_1_small.jpg" class="image" />	
</div>