Media WebUI

Border Classes

Sizing Classes

Class
Width
border-xs
0.063rem
border-sm
0.078rem (Default)
border-md
0.125rem
border-lg
0.188rem
border-xl
0.25rem

Using one of the above classes without a border color class will show a border in the default border color defined in the WebUI color palette.

Color Classes

There are border color classes for most colors in the WebUI color palette. The simplest format used for these is border-[color], which will affect all borders of an element. You can also specify which border to color by using the format border-[side]-[color]. For example: border-top-accent-1.

Borders

If the element being styled already has a border with the required width, then you don't need to use the border sizing classes.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="width-md height-md border-md border-info">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-lg border-top-success">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-xl border-top-dark border-left-danger">
    </div>
  </div>
</div>

Rounding Classes

Classes
Radius
rounded-sm , rounded-top-sm , rounded-left-sm , rounded-bottom-sm , rounded-right-sm
0.188rem
rounded-md , rounded-top-md , rounded-left-md , rounded-bottom-md , rounded-right-md
0.375rem
rounded-lg , rounded-top-lg , rounded-left-lg , rounded-bottom-lg , rounded-right-lg
0.563rem
Example
rounded-sm
rounded-md
rounded-lg
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-md border-accent-1 rounded-sm">
      <span class="place-middle-center">rounded-sm</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-md border-accent-1 rounded-md">
      <span class="place-middle-center">rounded-md</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-md border-accent-1 rounded-lg">
        <span class="place-middle-center">rounded-lg</span>
    </div>
  </div>
</div>

Behavioural Classes

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: border-right-hover-success or border-top-focus-dark.

Example
Hover
Hover
Focus
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-md border-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-lg border-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-xl border-right-focus-info border-left-focus-warning" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>

Border Cap Classes

Class
Description
border-cap-top-focus-*
Defines a border open at the bottom and shown when the element is in focus.
border-cap-left-focus-*
Defines a border open on the right and shown when the element is in focus.
border-cap-right-focus-*
Defines a border open on the left and shown when the element is in focus.
border-cap-bottom-focus-*
Defines a border open at the top and shown when the element is in focus.
border-cap-top-hover-*
Defines a border open at the bottom and shown when a hover event is triggered.
border-cap-left-hover-*
Defines a border open on the right and shown when a hover event is triggered.
border-cap-right-hover-*
Defines a border open on the left and shown when a hover event is triggered.
border-cap-bottom-hover-*
Defines a border open at the top and shown when a hover event is triggered.
border-cap-horizontal-focus-*
Defines a border open at the top and bottom, and shown when the element is in focus.
border-cap-vertical-focus-*
Defines a border open on the left and right, and shown when the element is in focus.
border-cap-horizontal-hover-*
Defines a border open at the top and bottom, and shown when a hover event is triggered.
border-cap-vertical-hover-*
Defines a border open on the left and right, and shown when a hover event is triggered.

Border caps allow you to partially surround an element with a border that does not extend into any open sides of an element. The element must have a border size defined using the standard WebUI border classes, if a border is not already present. Most WebUI theme colors can be used and are appended to the end of the class name in common with other classes. The full format for border cap classes is border-cap-[cap type]-[event]-[theme color].

Border Caps

Currently, WebUI only supports border caps that are shown as a result of hover or focus events.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <button class="button-md menu-button-accent-2 border-lg border-cap-left-focus-accent-2-light rounded-left-md">Left Border Cap</button>
  </div>
  <div class="table-col">
    <button class="button-md menu-button-accent-4 border-lg border-cap-top-focus-accent-4-light rounded-top-md">Top Border Cap</button>
  </div>
  <div class="table-col">
    <button class="button-md menu-button-accent-1 border-lg border-cap-vertical-focus-accent-1-light">Vertical Border Cap</button>
  </div>
  <div class="table-col">
    <button class="button-md menu-button-info border-lg border-cap-horizontal-focus-info-light">Horizontal Border Cap</button>
  </div>  
</div>

Boundary Classes

Classes

Class
Width
boundary-*
0.188rem

Boundaries are available in only one size and make use of CSS box-shadow to create a boundary inside the element border.

There are boundary classes for most colors in the WebUI color palette. The simplest format used for these is boundary-[color], which will affect all sides of an element. You can also specify which side of the element the boundary will appear using the format boundary-[side]-[color]. For example: boundary-top-accent-1.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="width-md height-md border-sm boundary-info">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm boundary-top-success">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm boundary-top-dark boundary-left-danger">
    </div>
  </div>
</div>

Behavioural Classes

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: boundary-right-hover-success or boundary-top-focus-dark.

Boundaries

WebUI only supports hover and focus boundaries on all sides or a single side of an element.

Example
Hover
Hover
Focus
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm boundary-right-focus-info" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>

Outline Classes

Classes

Class
Width
outline-*
0.188rem

Outlines are available in only one size and make use of CSS box-shadow to create an outline outside the element border.

There are outline classes for most colors in the WebUI color palette. The simplest format used for these is outline-[color], which will affect all sides of an element. You can also specify which side of the element the outline will appear using the format outline-[side]-[color]. For example: outline-top-accent-1.

Example
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="width-md height-md border-sm outline-info">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm outline-top-success">
    </div>
  </div>
  <div class="table-col">
    <div class="width-md height-md border-sm outline-top-dark outline-left-danger">
    </div>
  </div>
</div>

Behavioural Classes

The behavioural classes provide color changes on hover or focus events. The format is as described above, but with the addition of hover or focus. For example: outline-right-hover-success or outline-top-focus-dark.

Outlines

WebUI only supports hover and focus outlines on all sides or a single side of an element.

Example
Hover
Hover
Focus
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md border-sm outline-hover-accent-1">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm outline-bottom-hover-accent-3">
      <span class="place-middle-center">Hover</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md border-sm outline-right-focus-info" tabindex="0">
        <span class="place-middle-center">Focus</span>
    </div>
  </div>
</div>

Shadow Classes

Classes

Class
Description
raised-sm
Creates a small raised effect.
raised-md
Creates a medium raised effect.
raised-md
Creates a large raised effect.
Example
raised-sm
raised-md
raised-lg
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-md height-md accent-1 raised-sm">
      <span class="place-middle-center">raised-sm</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md accent-1 raised-md">
      <span class="place-middle-center">raised-md</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-md height-md accent-1 raised-lg">
      <span class="place-middle-center">raised-lg</span>
    </div>
  </div>
</div>

Transition Classes

Classes

Class
Description
transition-*
Affects: color, background-color, border-color, box-shadow, width, height.
color-transition-*
Affects: color only.
background-color-transition-*
Affects: background color only.
border-color-transition-*
Affects: border color only.
boundary-transition-*
Affects: boundary only.
outline-transition-*
Affects: outline only.
width-transition-*
Affects: width only.
height-transition-*
Affects: height only.
left-transition-*
Affects: left position only.
top-transition-*
Affects: top position only.

All transition classes require a transition duration to be appended to the end of the class name. The duration is specified as short, medium, or long. The simplest format used for these is transition-[duration], which will transition multiple properties. You can also target individual properties using the format [property]-transition-[duration]. For example: color-transition-short or border-color-transition-medium.

Example
Short border focus transition
Medium boundary focus transition
Long outline focus transition
Markup
<div class="table-row text-sm col-padding-md">
  <div class="table-col">
    <div class="container width-lg height-lg border-lg border-focus-info border-color-transition-short" tabindex="0">
      <span class="place-middle-center">Short border focus transition</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-lg height-lg border-sm boundary-focus-success boundary-transition-medium" tabindex="0">
      <span class="place-middle-center">Medium boundary focus transition</span>
    </div>
  </div>
  <div class="table-col">
    <div class="container width-lg height-lg border-sm outline-focus-accent-2 outline-transition-long" tabindex="0">
      <span class="place-middle-center">Long outline focus transition</span>
    </div>
  </div>
</div>

Visibility Classes

Class
Description
hidden
Sets the display style to none and removes the element from the document layout.
invisible
Sets the visibility property to hidden, keeping the element in the document layout.
faded
Sets the opacity property to 0, keeping the element in the document layout.

Media Classes

Class
Description
image
Sets an image element to block level with a maximum width of 100% and auto height.
media-fill
Sets the object-fit property to fill.
media-contain
Sets the object-fit property to contain.
media-cover
Sets the object-fit property to cover.
media-scale-down
Sets the object-fit property to scale-down.
media-none
Sets the object-fit property to none.

Other Classes

Class
Description
nobreak
Prevents a page break, column break, or region break from occurring inside an element.
layer-top
Sets the z-index of an element to be above all other WebUI component z-index settings.
screen-reader
Sets the specified element to be accessible to screen readers only.