Borders

Version: 0.9.0

Edit

Utilities for setting full borders.

Border

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L9

Default Border

XXXS Border

XXS Border

XS Border

Zero Border

Inherit Border

Initial Border

Unset Border

<!-- border default -->
<div class="u-border">
  <p>Default Border</p>
</div>

<!-- border xxxs -->
<div class="u-border-xxxs">
  <p>XXXS Border</p>
</div>

<!-- border xxs -->
<div class="u-border-xxs">
  <p>XXS Border</p>
</div>

<!-- border xs -->
<div class="u-border-xs">
  <p>XS Border</p>
</div>

<!-- border zero -->
<div class="u-border-zero">
  <p>Zero Border</p>
</div>

<!-- border inherit -->
<div class="u-border-inherit">
  <p>Inherit Border</p>
</div>

<!-- border initial -->
<div class="u-border-initial">
  <p>Initial Border</p>
</div>

<!-- border unset -->
<div class="u-border-unset">
  <p>Unset Border</p>
</div>

Top Bottom Borders

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L86

Top Border

Bottom Border

Top and Bottom Border

<!-- border top -->
<div class="u-border-top">
  <p>Top Border</p>
</div>

<!-- border bottom -->
<div class="u-border-bottom">
  <p>Bottom Border</p>
</div>

<!-- border top bottom -->
<div class="u-border-top-bottom">
  <p>Top and Bottom Border</p>
</div>

Right Left Borders

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L1094

Right Border

Left Border

Right and Left Border

<!-- border right -->
<div class="u-border-right">
  <p>Right Border</p>
</div>

<!-- border left -->
<div class="u-border-left">
  <p>Left Border</p>
</div>

<!-- border right left -->
<div class="u-border-right-left">
  <p>Right and Left Border</p>
</div>

Dashed Border

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2102

Dashed Border

XXXS Dashed Border

XXS Dashed Border

XS Dashed Border

<!-- border dashed -->
<div class="u-border-dashed">
  <p>Dashed Border</p>
</div>

<!-- border dashed xxxs -->
<div class="u-border-dashed-xxxs">
  <p>XXXS Dashed Border</p>
</div>

<!-- border dashed xxs -->
<div class="u-border-dashed-xxs">
  <p>XXS Dashed Border</p>
</div>

<!-- border dashed xs -->
<div class="u-border-dashed-xs">
  <p>XS Dashed Border</p>
</div>

Dotted Border

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2144

Dotted Border

XXXS Dotted Border

XXS Dotted Border

XS Dotted Border

<!-- border dotted -->
<div class="u-border-dotted">
  <p>Dotted Border</p>
</div>

<!-- border dotted xxxs -->
<div class="u-border-dotted-xxxs">
  <p>XXXS Dotted Border</p>
</div>

<!-- border dotted xxs -->
<div class="u-border-dotted-xxs">
  <p>XXS Dotted Border</p>
</div>

<!-- border dotted xs -->
<div class="u-border-dotted-xs">
  <p>XS Dotted Border</p>
</div>

Black Border

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2185

Black Border

Black Dashed Border

Black Dotted Border

<!-- border black -->
<div class="u-border-black">
  <p>Black Border</p>
</div>

<!-- border black dashed -->
<div class="u-border-dashed-black">
  <p>Black Dashed Border</p>
</div>

<!-- border black dotted -->
<div class="u-border-dotted-black">
  <p>Black Dotted Border</p>
</div>

Reds

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2257

Red Border

Red Dashed Border

Red Dotted Border

<!-- border red -->
<div class="u-border-red">
  <p>Red Border</p>
</div>

<!-- border red dashed -->
<div class="u-border-dashed-red">
  <p>Red Dashed Border</p>
</div>

<!-- border red dotted -->
<div class="u-border-dotted-red">
  <p>Red Dotted Border</p>
</div>

Blues

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2329

Blue Border

<!-- border blue -->
<div class="u-border-blue">
  <p>Blue Border</p>
</div>

<!-- border blue dashed -->
<div class="u-border-dashed-blue">
  <p>Blue Border</p>
</div>

<!-- border blue dotted -->
<div class="u-border-dotted-blue">
  <p>Blue Border</p>
</div>

On Dark Border

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2401

On Dark Border

<!-- border on dark -->
<div class="u-border-on-dark">
  <p>On Dark Border</p>
</div>

<!-- border on dark dashed -->
<div class="u-border-dashed-on-dark">
  <p>On Dark Border</p>
</div>

<!-- border on dark dotted -->
<div class="u-border-dotted-on-dark">
  <p>On Dark Border</p>
</div>

On Light Border

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2473

On Light Border

<!-- border on light -->
<div class="u-border-on-light">
  <p>On Light Border</p>
</div>

<!-- border on light dashed -->
<div class="u-border-dashed-on-light">
  <p>On Light Border</p>
</div>

<!-- border on light dotted -->
<div class="u-border-dotted-on-light">
  <p>On Light Border</p>
</div>

Alert Borders

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/borders.scss#L2545

Danger Border

Info Border

Success Border

Warning Border

<!-- border danger -->
<div class="u-border-danger">
  <p>Danger Border</p>
</div>

<!-- border info -->
<div class="u-border-info">
  <p>Info Border</p>
</div>

<!-- border success -->
<div class="u-border-success">
  <p>Success Border</p>
</div>

<!-- border warning -->
<div class="u-border-warning">
  <p>Warning Border</p>
</div>