Tests for @superflycss/utilities-layout

u-flex is applied.

                 

<div class="u-flex">
   <div class="TestBoxLeft">
               First item in row</div>
   <div class="TestBox">
               Second item in row</div>
</div>

The items are laid out in a row.

First item in row

Second item in row

u-flex-bullseye is applied.

                 

<div class="TestCanvas 
            u-flex-bullseye
            u-min-height-15rem">
   <div class="TestBox">
               BULLSEYE</div>
</div>

The item(s) are centered both horizontally and vertically.

BULLSEYE

u-flex-inline is applied.

                 

<div class="TestBoxLeft
            u-flex-inline
            u-background-color-orange">
            First container
</div><div class="TestBox
            u-flex-inline
            u-background-color-orange">
            Second container</div>
<br>
<br>
<div class="TestBoxLeft
            u-flex-inline
            u-background-color-orange">
            First container
</div>
<div class="TestBox
            u-flex-inline
            u-background-color-orange">
            Second container</div>

The flex containers are laid out in a row. Note that if the container adjacent sides


</div><div></code>

do not appear on the same line in the as shown, space is introduced between the containers. See the second rendered row for an illustration.

First container

Second container

First container

Second container

u-flex-row is applied.

                 

<div class="TestCanvas
            u-flex 
            u-flex-row">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
    <div class="TestBox">
    Third item in row</div>
</div>

The items are laid out in a row.

First item in row

Second item in row

Third item in row

u-flex-row-reverse is applied.

                 

<div class="TestCanvas
            u-flex 
            u-flex-row-reverse">
  <div class="TestBox
              u-background-color-orange">
    First item in row</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBoxLeft
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

The items are laid out in a row reversed.

First item in row

Second item in row

Third item in row

u-flex-column is applied.

                 

<div class="TestCanvas 
            u-min-height-20rem
            u-flex 
            u-flex-column">
    <div class="TestBoxTop">
      First item in row</div>
    <div class="TestBoxTop">
      Second item in row</div>
      <div class="TestBox
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

The items are laid out in a column.

First item in row

Second item in row

Third item in row

u-flex-column-reverse is applied.

                 

<div class="TestCanvas 
            u-min-height-20rem
            u-flex 
            u-flex-column-reverse">
    <div class="TestBox
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxTop
                u-background-color-orange">
      Second item in row</div>
      <div class="TestBoxTop
                  u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items are laid out in a column reversed.

First item in row

Second item in row

Third item in row

u-flex-wrap is applied.

                 

<div class="TestCanvas
            u-flex 
            u-flex-wrap 
            u-width-25rem
            u-height-25rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox">
      Second item in row</div>
    <div class="TestBox
                u-background-color-orange
                u-border-style-none">
      Third item in row</div>
</div>

The items wrap onto the next line.

First item in row

Second item in row

Third item in row

u-flex-wrap-reverse is applied.

                 

<div class="TestCanvas
            u-flex 
            u-flex-wrap-reverse 
            u-width-25rem
            u-height-25rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox
                u-background-color-orange">
      Second item in row</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items wrap onto the next line in reverse.

First item in row

Second item in row

Third item in row

u-flex-no-wrap is applied.

                 

<div class="TestCanvas
          u-flex 
          u-flex-no-wrap 
          u-width-20rem
          u-height-20rem">
  <div class="TestBoxLeft 
              u-h6rem">
    First item in row</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBox
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

The items do not wrap onto the next line.

First item in row

Second item in row

Third item in row

u-flex-justify-start is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-justify-start
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items are aligned to the left side of the main axis.

First item in row

Second item in row

Third item in row

u-flex-justify-end is applied.

                 

<div class="TestCanvas
          u-flex
          u-flex-justify-end
          u-min-width-40rem
          u-min-height-10rem">
  <div class="TestBoxLeft">
    First item in row</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBox
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

The items are aligned to the right side of the main axis.

First item in row

Second item in row

Third item in row

u-flex-justify-center is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-justify-center
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxLeft
                u-background-color-orange">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items are centered on the main axis.

First item in row

Second item in row

Third item in row

u-flex-justify-center and u-flex-column are applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-justify-center
            u-flex-column
            u-min-width-40rem
            u-min-height-25rem">
    <div class="TestBoxTop
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxTop
                u-background-color-orange">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items are aligned to the center of the cross axis.

First item in row

Second item in row

Third item in row

u-flex-justify-between is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-justify-between
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items have space between eachother on the main axis.

First item in row

Second item in row

Third item in row

u-flex-justify-around is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-justify-around
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items have space around eachother on the main axis.

First item in row

Second item in row

Third item in row

u-flex-align-items-stretch is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-stretch
            u-min-width-40rem
            u-min-height-40rem">
    <div class="u-background-color-orange
                u-padding-1rem
                u-border-right-style-solid
                u-border-right-width-2px">
      First item in row</div>
    <div class="u-background-color-orange
                u-padding-1rem
                u-border-right-style-solid
                u-border-right-width-2px">
      Second item in row</div>
    <div class="u-padding-1rem
                u-border-right-style-solid
                u-border-right-width-2px
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The items stretch out along the cross axis to fill the container.

First item in row

Second item in row

Third item in row

u-flex-align-items-start is applied.

                 

<div class="TestCanvas 
            u-flex
            u-flex-align-items-start
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

The cross-start margin edge of the items is placed on the cross-start line.

First item in row

Second item in row

Third item in row

u-flex-align-items-end is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-end
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
      <div class="TestBox
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

The cross-end margin edge of the items is placed on the cross-end line.

First item in row

Second item in row

Third item in row

u-flex-align-items-center is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-center
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
      <div class="TestBox
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

The items are centered in the cross-axis.

First item in row

Second item in row

Third item in row

u-flex-align-items-baseline is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-baseline
            u-min-width-40rem
            u-min-height-20rem">
    <div class="TestBox
                u-padding-top-5rem
                u-height-8rem
                u-background-color-sf-charcoal-blue">
      First item in row</div>
    <div class="TestBox
                u-padding-top-3rem
                u-height-10rem
                u-background-color-sf-charcoal-blue">
      Second item in row</div>
      <div class="TestBox
                  u-padding-top-6rem
                  u-height-8rem
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

The items have their baselines aligned on the cross axis.

First item in row

Second item in row

Third item in row

u-flex-align-content-start is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-start
            u-min-height-30rem">
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
      u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

The items are packed to the start of the container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

u-flex-align-content-end is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-end
            u-min-height-20rem
            u-border-style-solid
            u-border-width-2px">
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                  u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

The items are packed to the end of the container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

u-flex-align-content-center is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-center
            u-min-height-25rem">
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="TestBox
            u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

The items are packed to the center of the container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

u-flex-align-content-stretch is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-stretch
            u-min-height-25rem">
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

The item stretch to take up the remaining space.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

u-flex-align-content-between is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-between
            u-min-height-30rem">
    <div class="TestBox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
            <div class="TestBox
                        u-background-color-orange">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
            <div class="TestBox
                        u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

The items evenly distributed with the first item at the start of the container and the last one at the end.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

u-flex-align-content-around is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-around
            u-min-height-26rem">
    <div class="TestBox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

The items evenly distributed with equal space around each line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

u-flex-align-self-start is applied.

                 

<div class="TestCanvas 
            u-flex
            u-min-height-10rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-start">
              u-flex-align-self-start</div>
  <div class="TestBox
              u-flex-align-self-end
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-end</div>
</div>

The item is aligned at cross axis start.

u-flex-align-self-start

u-flex-align-self-end

u-flex-align-self-end is applied.

                 

<div class="TestCanvas
            u-flex
            u-min-height-20rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-end">
              u-flex-align-self-end</div>
  <div class="TestBox
              u-flex-align-self-start
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-start</div>
</div>

The item is aligned at cross axis end.

u-flex-align-self-end

u-flex-align-self-start

u-flex-align-self-center is applied.

                 

<div class="TestCanvas
            u-flex
            u-min-height-20rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-center">
              u-flex-align-self-center</div>
  <div class="TestBox
              u-flex-align-self-start
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-start</div>
</div>

The item is aligned at cross axis center.

u-flex-align-self-center

u-flex-align-self-start

u-flex-align-self-stretch is applied.

                 

<div class="TestCanvas 
            u-flex
            u-min-height-20rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-stretch">
              u-flex-align-self-stretch</div>
  <div class="TestBox
              u-flex-align-self-start
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-start</div>
</div>

The item stretches from cross axis start to end.

u-flex-align-self-stretch

u-flex-align-self-start

u-flex-order-first is applied.

                 

<div class="TestCanvas
            u-flex
            u-min-height-10rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      First item</div>
    <div class="TestBox">
      Second item</div>
    <div class="TestBoxLeft
                u-flex-order-first
                u-background-color-sf-charcoal-blue">
      Third item in content order</div>
</div>

The item is positioned at the start.

First item

Second item

Third item in content order

u-flex-order-last is applied.

                 

<div class="TestCanvas
          u-flex
          u-min-height-10rem">
  <div class="TestBox
              u-flex-order-last">
    First item in content order</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBoxLeft 
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

The item is positioned last.

First item in content order

Second item in row

Third item in row

u-flex-grow is applied.

                 

<div class="TestCanvas
            u-flex 
            u-width-40rem
            u-height-10rem">
    <div class="TestBoxLeft
                u-flex-grow4
                u-background-color-orange">
      u-flex-grow3</div>
    <div class="TestBoxLeft
                u-flex-grow2">
      u-flex-grow2</div>
    <div class="TestBox 
                u-flex-grow5
                u-background-color-sf-charcoal-blue">
      u-flex-grow5</div>
</div>

The items grow according to the flex grow factor.

u-flex-grow3

u-flex-grow2

u-flex-grow5

u-flex-shrink is applied to items that are larger than their container.

                 

<div class="TestCanvas
            u-flex 
            u-width-40rem">
    <div class="TestBoxLeft
                u-flex-shrink5
                u-width-100
                u-background-color-orange">
      u-flex-shrink5</div>
    <div class="TestBoxLeft
                u-flex-shrink3
                u-width-100
                u-background-color-sf-charcoal-blue">
      u-flex-shrink3</div>
    <div class="TestBox
                u-flex-shrink5
                u-width-100
                u-background-color-orange">
      u-flex-shrink5</div>
</div>

The items shrink according to the flex shrink factor.

u-flex-shrink5

u-flex-shrink3

u-flex-shrink5

u-flex-expand-left is applied.

                 

<div class="TestCanvas
            u-flex
            u-width-40rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      Push</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-flex-expand-left">
      Push it good!</div>
</div>

The "Push it good!" item is pushed to the right side.

Push

It

Push it good!

u-flex-expand-right is applied.

                 

<div class="TestCanvas
            u-flex
            u-width-40rem">
    <div class="TestBox
                u-flex-expand-right">
      Push</div>
    <div class="TestBoxLeft
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-padding-1rem">
      Push it good!</div>
</div>

The "It" item is pushed to the right side.

Push

It

Push it good!

u-flex-expand-top is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-column
            u-height-20rem
            u-width-40rem">
    <div class="TestBox">
      Push</div>
    <div class="TestBoxTop
                u-flex-expand-top
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-background-color-orange">
      Push it good!</div>
  </div>

The items are pushed away from the item to the bottom.

Push

It

Push it good!

u-flex-expand-bottom is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-column
            u-height-20rem
            u-width-40rem">
    <div class="TestBoxTop">
      Push</div>
    <div class="TestBox
                u-flex-expand-bottom
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-padding-1rem
                u-background-color-orange">
      Push it good!</div>
</div>

The items are pushed away from the item to the bottom.

Push

It

Push it good!

u-flex-expand is applied.

                 

<div class="TestCanvas
            u-flex
            u-width-40rem">
    <div class="TestBox">
      Push</div>
    <div class="TestBox
                u-flex-expand
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox">
      Push it good!</div>
</div>

The item is centered using remaining space along the main axis.

Push

It

Push it good!

u-flex-expand is applied.

                 

<div class="TestCanvas
            u-flex
            u-flex-column
            u-height-20rem
            u-width-40rem">
    <div class="TestBox">
      Push</div>
    <div class="TestBox
                u-flex-expand
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-background-color-orange">
      Push it good!</div>
</div>

The item is centered using remaining space along the main and cross axis.

Push

It

Push it good!

u-flex-initial is applied.

                 

<div class="TestCanvas
            u-flex
            u-width-30rem
            u-height-30rem">
    <div class="TestBoxLeft
                u-flex-grow1">
      UNO</div>
    <div class="TestBox
                u-flex-grow1
                u-background-color-sf-charcoal-blue">
      DOS</div>
  </div>
  <div class="TestBox
              u-flex
              u-width-30rem">
      <div class="TestBoxLeft
                  u-flex-grow1
                  u-background-color-orange">
        TRES</div>
      <div class="TestBox
                  u-flex-grow1
                  u-flex-initial
                  u-width-20rem
                  u-background-color-sf-charcoal-blue">
        QUATRO</div>
  </div>

The "QUATRO" item is using the width and height properties.

UNO

DOS

TRES

QUATRO

u-flex-auto is applied.

                 

<div class="TestCanvas
            u-flex
            u-width-30rem
            u-height-20rem">
    <div class="TestBoxLeft
                u-flex-grow1">
      UNO</div>
    <div class="TestBox
                u-flex-grow1
                u-flex-auto
                u-width-1rem
                u-background-color-sf-charcoal-blue">
      DOS</div>
  </div>
  <div class="TestBox
              u-flex
              u-width-30rem">
      <div class="TestBox
                  u-flex-grow1
                  u-background-color-orange">
        TRES</div>
      <div class="TestBox
                  u-flex-grow1
                  u-flex-auto
                  u-width-15rem
                  u-background-color-sf-charcoal-blue">
        CUATRO</div>
</div>

The item is using the width and height properties and absorb additional main axis space proportionally.

UNO

DOS

TRES

CUATRO

u-flex-none is applied.

                 

<div class="TestCanvas
            u-flex
            u-width-30rem
            u-height-30rem
            u-border-style-solid
            u-border-width-2px">
    <div class="TestBox
                u-flex-grow1
                u-background-color-orange">
      UNO</div>
    <div class="TestBox
                u-flex-grow1
                u-background-color-sf-charcoal-blue">
      DOS</div>
  </div>
  <div class="TestBox
              u-flex
              u-width-30rem">
      <div class="TestBox
                  u-flex-grow1
                  u-background-color-orange">
        TRES</div>
      <div class="TestBox
                  u-flex-grow1
                  u-flex-none
                  u-width-30rem
                  u-background-color-sf-charcoal-blue">
        CUATRO</div>
</div>

The item sizes the item according to the width/height properties however the flex item is no longer flexible.

UNO

DOS

TRES

CUATRO

u-margin-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-margin-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-margin-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-margin-halfrem

u-m-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-m-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-m-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-m-halfrem

u-ml-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-ml-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-ml-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-ml-halfrem

u-mr-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-mr-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-mr-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-mr-halfrem

u-mt-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-mt-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-mt-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-mt-halfrem

u-mb-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-mb-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-mb-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-mb-halfrem

u-margin-[side]-[factor]rem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-20rem
      </div>
</div>
</div>

The correct margin dimension renders.

u-margin-top-0rem

u-margin-top-1rem

u-margin-top-2rem

u-margin-top-3rem

u-margin-top-4rem

u-margin-top-5rem

u-margin-top-6rem

u-margin-top-7rem

u-margin-top-8rem

u-margin-top-9rem

u-margin-top-10rem

u-margin-top-11rem

u-margin-top-12rem

u-margin-top-13rem

u-margin-top-14rem

u-margin-top-15rem

u-margin-top-16rem

u-margin-top-17rem

u-margin-top-18rem

u-margin-top-19rem

u-margin-top-20rem

u-margin-bottom-0rem

u-margin-bottom-1rem

u-margin-bottom-2rem

u-margin-bottom-3rem

u-margin-bottom-4rem

u-margin-bottom-5rem

u-margin-bottom-6rem

u-margin-bottom-7rem

u-margin-bottom-8rem

u-margin-bottom-9rem

u-margin-bottom-10rem

u-margin-bottom-11rem

u-margin-bottom-12rem

u-margin-bottom-13rem

u-margin-bottom-14rem

u-margin-bottom-15rem

u-margin-bottom-16rem

u-margin-bottom-17rem

u-margin-bottom-18rem

u-margin-bottom-19rem

u-margin-bottom-20rem

u-margin-left-0rem

u-margin-left-1rem

u-margin-left-2rem

u-margin-left-3rem

u-margin-left-4rem

u-margin-left-5rem

u-margin-left-6rem

u-margin-left-7rem

u-margin-left-8rem

u-margin-left-9rem

u-margin-left-10rem

u-margin-left-11rem

u-margin-left-12rem

u-margin-left-13rem

u-margin-left-14rem

u-margin-left-15rem

u-margin-left-16rem

u-margin-left-17rem

u-margin-left-18rem

u-margin-left-19rem

u-margin-left-20rem

u-margin-right-0rem

u-margin-right-1rem

u-margin-right-2rem

u-margin-right-3rem

u-margin-right-4rem

u-margin-right-5rem

u-margin-right-6rem

u-margin-right-7rem

u-margin-right-8rem

u-margin-right-9rem

u-margin-right-10rem

u-margin-right-11rem

u-margin-right-12rem

u-margin-right-13rem

u-margin-right-14rem

u-margin-right-15rem

u-margin-right-16rem

u-margin-right-17rem

u-margin-right-18rem

u-margin-right-19rem

u-margin-right-20rem

u-margin-[factor]rem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-20rem
      </div>
</div>
</div>

The correct margin dimension renders.

u-margin-0rem

u-margin-1rem

u-margin-2rem

u-margin-3rem

u-margin-4rem

u-margin-5rem

u-margin-6rem

u-margin-7rem

u-margin-8rem

u-margin-9rem

u-margin-10rem

u-margin-11rem

u-margin-12rem

u-margin-13rem

u-margin-14rem

u-margin-15rem

u-margin-16rem

u-margin-17rem

u-margin-18rem

u-margin-19rem

u-margin-20rem

u-m[factor]rem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m20rem
      </div>
</div>
</div>

The correct margin dimension renders.

u-m0rem

u-m1rem

u-m2rem

u-m3rem

u-m4rem

u-m5rem

u-m6rem

u-m7rem

u-m8rem

u-m9rem

u-m10rem

u-m11rem

u-m12rem

u-m13rem

u-m14rem

u-m15rem

u-m16rem

u-m17rem

u-m18rem

u-m19rem

u-m20rem

u-m[side][factor]rem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr20rem
      </div>
</div>
</div>

The correct margin dimension renders.

u-mt0rem

u-mt1rem

u-mt2rem

u-mt3rem

u-mt4rem

u-mt5rem

u-mt6rem

u-mt7rem

u-mt8rem

u-mt9rem

u-mt10rem

u-mt11rem

u-mt12rem

u-mt13rem

u-mt14rem

u-mt15rem

u-mt16rem

u-mt17rem

u-mt18rem

u-mt19rem

u-mt20rem

u-mb0rem

u-mb1rem

u-mb2rem

u-mb3rem

u-mb4rem

u-mb5rem

u-mb6rem

u-mb7rem

u-mb8rem

u-mb9rem

u-mb10rem

u-mb11rem

u-mb12rem

u-mb13rem

u-mb14rem

u-mb15rem

u-mb16rem

u-mb17rem

u-mb18rem

u-mb19rem

u-mb20rem

u-ml0rem

u-ml1rem

u-ml2rem

u-ml3rem

u-ml4rem

u-ml5rem

u-ml6rem

u-ml7rem

u-ml8rem

u-ml9rem

u-ml10rem

u-ml11rem

u-ml12rem

u-ml13rem

u-ml14rem

u-ml15rem

u-ml16rem

u-ml17rem

u-ml18rem

u-ml19rem

u-ml20rem

u-mr0rem

u-mr1rem

u-mr2rem

u-mr3rem

u-mr4rem

u-mr5rem

u-mr6rem

u-mr7rem

u-mr8rem

u-mr9rem

u-mr10rem

u-mr11rem

u-mr12rem

u-mr13rem

u-mr14rem

u-mr15rem

u-mr16rem

u-mr17rem

u-mr18rem

u-mr19rem

u-mr20rem

u-padding-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-halfrem
              u-border-style-solid
              u-border-width-2px">
              u-padding-halfrem</div>
              
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-top-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-top-halfrem</div>
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-bottom-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-bottom-halfrem</div>
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-left-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-left-halfrem</div>
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-right-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-right-halfrem</div>
  </div>

The padding style renders.

u-padding-halfrem

u-padding-top-halfrem

u-padding-bottom-halfrem

u-padding-left-halfrem

u-padding-right-halfrem

u-pl-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pl-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pl-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-pl-halfrem

u-pr-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pr-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pr-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-pr-halfrem

u-pt-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pt-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pt-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-pt-halfrem

u-pb-halfrem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pb-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pb-halfrem
      </div>
  </div>
</div>

The correct margin dimension renders.

u-pb-halfrem

u-padding-[side]-[factor]rem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-20rem</div>
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-20rem</div>
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-20rem</div>
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-20rem</div>
</div>

The correct padding dimension renders.

u-padding-top-0rem

u-padding-top-1rem

u-padding-top-2rem

u-padding-top-3rem

u-padding-top-4rem

u-padding-top-5rem

u-padding-top-6rem

u-padding-top-7rem

u-padding-top-8rem

u-padding-top-9rem

u-padding-top-10rem

u-padding-top-11rem

u-padding-top-12rem

u-padding-top-13rem

u-padding-top-14rem

u-padding-top-15rem

u-padding-top-16rem

u-padding-top-17rem

u-padding-top-18rem

u-padding-top-19rem

u-padding-top-20rem

u-padding-bottom-0rem

u-padding-bottom-1rem

u-padding-bottom-2rem

u-padding-bottom-3rem

u-padding-bottom-4rem

u-padding-bottom-5rem

u-padding-bottom-6rem

u-padding-bottom-7rem

u-padding-bottom-8rem

u-padding-bottom-9rem

u-padding-bottom-10rem

u-padding-bottom-11rem

u-padding-bottom-12rem

u-padding-bottom-13rem

u-padding-bottom-14rem

u-padding-bottom-15rem

u-padding-bottom-16rem

u-padding-bottom-17rem

u-padding-bottom-18rem

u-padding-bottom-19rem

u-padding-bottom-20rem

u-padding-left-0rem

u-padding-left-1rem

u-padding-left-2rem

u-padding-left-3rem

u-padding-left-4rem

u-padding-left-5rem

u-padding-left-6rem

u-padding-left-7rem

u-padding-left-8rem

u-padding-left-9rem

u-padding-left-10rem

u-padding-left-11rem

u-padding-left-12rem

u-padding-left-13rem

u-padding-left-14rem

u-padding-left-15rem

u-padding-left-16rem

u-padding-left-17rem

u-padding-left-18rem

u-padding-left-19rem

u-padding-left-20rem

u-padding-right-0rem

u-padding-right-1rem

u-padding-right-2rem

u-padding-right-3rem

u-padding-right-4rem

u-padding-right-5rem

u-padding-right-6rem

u-padding-right-7rem

u-padding-right-8rem

u-padding-right-9rem

u-padding-right-10rem

u-padding-right-11rem

u-padding-right-12rem

u-padding-right-13rem

u-padding-right-14rem

u-padding-right-15rem

u-padding-right-16rem

u-padding-right-17rem

u-padding-right-18rem

u-padding-right-19rem

u-padding-right-20rem

u-margin-[side]-[factor]rem is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-20rem
  </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-20rem
  </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-20rem
  </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-20rem
  </div>
</div>
</div>

The correct padding dimension renders.

u-margin-top-0rem

u-margin-top-1rem

u-margin-top-2rem

u-margin-top-3rem

u-margin-top-4rem

u-margin-top-5rem

u-margin-top-6rem

u-margin-top-7rem

u-margin-top-8rem

u-margin-top-9rem

u-margin-top-10rem

u-margin-top-11rem

u-margin-top-12rem

u-margin-top-13rem

u-margin-top-14rem

u-margin-top-15rem

u-margin-top-16rem

u-margin-top-17rem

u-margin-top-18rem

u-margin-top-19rem

u-margin-top-20rem

u-margin-bottom-0rem

u-margin-bottom-1rem

u-margin-bottom-2rem

u-margin-bottom-3rem

u-margin-bottom-4rem

u-margin-bottom-5rem

u-margin-bottom-6rem

u-margin-bottom-7rem

u-margin-bottom-8rem

u-margin-bottom-9rem

u-margin-bottom-10rem

u-margin-bottom-11rem

u-margin-bottom-12rem

u-margin-bottom-13rem

u-margin-bottom-14rem

u-margin-bottom-15rem

u-margin-bottom-16rem

u-margin-bottom-17rem

u-margin-bottom-18rem

u-margin-bottom-19rem

u-margin-bottom-20rem

u-margin-left-0rem

u-margin-left-1rem

u-margin-left-2rem

u-margin-left-3rem

u-margin-left-4rem

u-margin-left-5rem

u-margin-left-6rem

u-margin-left-7rem

u-margin-left-8rem

u-margin-left-9rem

u-margin-left-10rem

u-margin-left-11rem

u-margin-left-12rem

u-margin-left-13rem

u-margin-left-14rem

u-margin-left-15rem

u-margin-left-16rem

u-margin-left-17rem

u-margin-left-18rem

u-margin-left-19rem

u-margin-left-20rem

u-margin-right-0rem

u-margin-right-1rem

u-margin-right-2rem

u-margin-right-3rem

u-margin-right-4rem

u-margin-right-5rem

u-margin-right-6rem

u-margin-right-7rem

u-margin-right-8rem

u-margin-right-9rem

u-margin-right-10rem

u-margin-right-11rem

u-margin-right-12rem

u-margin-right-13rem

u-margin-right-14rem

u-margin-right-15rem

u-margin-right-16rem

u-margin-right-17rem

u-margin-right-18rem

u-margin-right-19rem

u-margin-right-20rem

u-border-width-[i]px is applied.

                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-border-width-0px">
              u-border-width-0px
  </div>
  <br><div class="TestBox
              u-border-width-1px">
              u-border-width-1px
  </div>
  <br><div class="TestBox
              u-border-width-2px">
              u-border-width-2px
  </div>
  <br><div class="TestBox
              u-border-width-3px">
              u-border-width-3px
  </div>
  <br><div class="TestBox
              u-border-width-4px">
              u-border-width-4px
  </div>
  <br><div class="TestBox
              u-border-width-5px">
              u-border-width-5px
  </div>
  <br><div class="TestBox
              u-border-width-6px">
              u-border-width-6px
  </div>
  <br><div class="TestBox
              u-border-width-7px">
              u-border-width-7px
  </div>
  <br><div class="TestBox
              u-border-width-8px">
              u-border-width-8px
  </div>
  <br><div class="TestBox
              u-border-width-9px">
              u-border-width-9px
  </div>
  <br><div class="TestBox
              u-border-width-10px">
              u-border-width-10px
  </div>
  <br><div class="TestBox
              u-border-width-11px">
              u-border-width-11px
  </div>
  <br><div class="TestBox
              u-border-width-12px">
              u-border-width-12px
  </div>
  <br><div class="TestBox
              u-border-width-13px">
              u-border-width-13px
  </div>
  <br><div class="TestBox
              u-border-width-14px">
              u-border-width-14px
  </div>
  <br><div class="TestBox
              u-border-width-15px">
              u-border-width-15px
  </div>
  <br><div class="TestBox
              u-border-width-16px">
              u-border-width-16px
  </div>
  <br><div class="TestBox
              u-border-width-17px">
              u-border-width-17px
  </div>
  <br><div class="TestBox
              u-border-width-18px">
              u-border-width-18px
  </div>
  <br><div class="TestBox
              u-border-width-19px">
              u-border-width-19px
  </div>
  <br><div class="TestBox
              u-border-width-20px">
              u-border-width-20px
  </div>
  <br>
</div>

The correct border width renders.

u-border-width-0px

u-border-width-1px

u-border-width-2px

u-border-width-3px

u-border-width-4px

u-border-width-5px

u-border-width-6px

u-border-width-7px

u-border-width-8px

u-border-width-9px

u-border-width-10px

u-border-width-11px

u-border-width-12px

u-border-width-13px

u-border-width-14px

u-border-width-15px

u-border-width-16px

u-border-width-17px

u-border-width-18px

u-border-width-19px

u-border-width-20px

u-bw[i]px is applied.

                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-bw0px">
              u-bw0px
  </div>
  <br><div class="TestBox
              u-bw1px">
              u-bw1px
  </div>
  <br><div class="TestBox
              u-bw2px">
              u-bw2px
  </div>
  <br><div class="TestBox
              u-bw3px">
              u-bw3px
  </div>
  <br><div class="TestBox
              u-bw4px">
              u-bw4px
  </div>
  <br><div class="TestBox
              u-bw5px">
              u-bw5px
  </div>
  <br><div class="TestBox
              u-bw6px">
              u-bw6px
  </div>
  <br><div class="TestBox
              u-bw7px">
              u-bw7px
  </div>
  <br><div class="TestBox
              u-bw8px">
              u-bw8px
  </div>
  <br><div class="TestBox
              u-bw9px">
              u-bw9px
  </div>
  <br><div class="TestBox
              u-bw10px">
              u-bw10px
  </div>
  <br><div class="TestBox
              u-bw11px">
              u-bw11px
  </div>
  <br><div class="TestBox
              u-bw12px">
              u-bw12px
  </div>
  <br><div class="TestBox
              u-bw13px">
              u-bw13px
  </div>
  <br><div class="TestBox
              u-bw14px">
              u-bw14px
  </div>
  <br><div class="TestBox
              u-bw15px">
              u-bw15px
  </div>
  <br><div class="TestBox
              u-bw16px">
              u-bw16px
  </div>
  <br><div class="TestBox
              u-bw17px">
              u-bw17px
  </div>
  <br><div class="TestBox
              u-bw18px">
              u-bw18px
  </div>
  <br><div class="TestBox
              u-bw19px">
              u-bw19px
  </div>
  <br><div class="TestBox
              u-bw20px">
              u-bw20px
  </div>
  <br>
</div>

The correct border width renders.

u-bw0px

u-bw1px

u-bw2px

u-bw3px

u-bw4px

u-bw5px

u-bw6px

u-bw7px

u-bw8px

u-bw9px

u-bw10px

u-bw11px

u-bw12px

u-bw13px

u-bw14px

u-bw15px

u-bw16px

u-bw17px

u-bw18px

u-bw19px

u-bw20px

u-border-radius-[i]px is applied.

                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-border-width-4px
              u-border-radius-0px">
              u-border-radius-0px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-1px">
              u-border-radius-1px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-2px">
              u-border-radius-2px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-3px">
              u-border-radius-3px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-4px">
              u-border-radius-4px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-5px">
              u-border-radius-5px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-6px">
              u-border-radius-6px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-7px">
              u-border-radius-7px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-8px">
              u-border-radius-8px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-9px">
              u-border-radius-9px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-10px">
              u-border-radius-10px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-11px">
              u-border-radius-11px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-12px">
              u-border-radius-12px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-13px">
              u-border-radius-13px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-14px">
              u-border-radius-14px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-15px">
              u-border-radius-15px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-16px">
              u-border-radius-16px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-17px">
              u-border-radius-17px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-18px">
              u-border-radius-18px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-19px">
              u-border-radius-19px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-20px">
              u-border-radius-20px
    </div>
    <br>
</div>

The correct border radius renders.

u-border-radius-0px

u-border-radius-1px

u-border-radius-2px

u-border-radius-3px

u-border-radius-4px

u-border-radius-5px

u-border-radius-6px

u-border-radius-7px

u-border-radius-8px

u-border-radius-9px

u-border-radius-10px

u-border-radius-11px

u-border-radius-12px

u-border-radius-13px

u-border-radius-14px

u-border-radius-15px

u-border-radius-16px

u-border-radius-17px

u-border-radius-18px

u-border-radius-19px

u-border-radius-20px

u-br[i]px is applied.

                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-border-width-4px
              u-border-radius-0px">
              u-br0px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-1px">
              u-br1px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-2px">
              u-br2px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-3px">
              u-br3px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-4px">
              u-br4px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-5px">
              u-br5px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-6px">
              u-br6px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-7px">
              u-br7px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-8px">
              u-br8px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-9px">
              u-br9px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-10px">
              u-br10px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-11px">
              u-br11px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-12px">
              u-br12px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-13px">
              u-br13px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-14px">
              u-br14px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-15px">
              u-br15px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-16px">
              u-br16px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-17px">
              u-br17px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-18px">
              u-br18px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-19px">
              u-br19px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-20px">
              u-br20px
    </div>
    <br>
</div>

The correct border radius renders.

u-br0px

u-br1px

u-br2px

u-br3px

u-br4px

u-br5px

u-br6px

u-br7px

u-br8px

u-br9px

u-br10px

u-br11px

u-br12px

u-br13px

u-br14px

u-br15px

u-br16px

u-br17px

u-br18px

u-br19px

u-br20px

u-border-[side]-style-solid and u-border-[side]-width-[factor]px is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-0px">
              u-border-top-style-solid <br>
              u-border-top-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-1px">
              u-border-top-style-solid <br>
              u-border-top-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-2px">
              u-border-top-style-solid <br>
              u-border-top-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-3px">
              u-border-top-style-solid <br>
              u-border-top-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-4px">
              u-border-top-style-solid <br>
              u-border-top-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-5px">
              u-border-top-style-solid <br>
              u-border-top-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-6px">
              u-border-top-style-solid <br>
              u-border-top-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-7px">
              u-border-top-style-solid <br>
              u-border-top-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-8px">
              u-border-top-style-solid <br>
              u-border-top-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-9px">
              u-border-top-style-solid <br>
              u-border-top-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-10px">
              u-border-top-style-solid <br>
              u-border-top-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-11px">
              u-border-top-style-solid <br>
              u-border-top-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-12px">
              u-border-top-style-solid <br>
              u-border-top-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-13px">
              u-border-top-style-solid <br>
              u-border-top-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-14px">
              u-border-top-style-solid <br>
              u-border-top-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-15px">
              u-border-top-style-solid <br>
              u-border-top-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-16px">
              u-border-top-style-solid <br>
              u-border-top-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-17px">
              u-border-top-style-solid <br>
              u-border-top-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-18px">
              u-border-top-style-solid <br>
              u-border-top-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-19px">
              u-border-top-style-solid <br>
              u-border-top-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-20px">
              u-border-top-style-solid <br>
              u-border-top-width-20px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-0px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-1px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-2px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-3px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-4px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-5px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-6px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-7px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-8px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-9px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-10px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-11px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-12px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-13px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-14px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-15px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-16px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-17px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-18px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-19px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-20px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-20px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-0px">
              u-border-left-style-solid <br>
              u-border-left-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-1px">
              u-border-left-style-solid <br>
              u-border-left-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-2px">
              u-border-left-style-solid <br>
              u-border-left-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-3px">
              u-border-left-style-solid <br>
              u-border-left-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-4px">
              u-border-left-style-solid <br>
              u-border-left-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-5px">
              u-border-left-style-solid <br>
              u-border-left-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-6px">
              u-border-left-style-solid <br>
              u-border-left-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-7px">
              u-border-left-style-solid <br>
              u-border-left-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-8px">
              u-border-left-style-solid <br>
              u-border-left-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-9px">
              u-border-left-style-solid <br>
              u-border-left-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-10px">
              u-border-left-style-solid <br>
              u-border-left-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-11px">
              u-border-left-style-solid <br>
              u-border-left-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-12px">
              u-border-left-style-solid <br>
              u-border-left-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-13px">
              u-border-left-style-solid <br>
              u-border-left-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-14px">
              u-border-left-style-solid <br>
              u-border-left-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-15px">
              u-border-left-style-solid <br>
              u-border-left-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-16px">
              u-border-left-style-solid <br>
              u-border-left-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-17px">
              u-border-left-style-solid <br>
              u-border-left-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-18px">
              u-border-left-style-solid <br>
              u-border-left-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-19px">
              u-border-left-style-solid <br>
              u-border-left-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-20px">
              u-border-left-style-solid <br>
              u-border-left-width-20px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-0px">
              u-border-right-style-solid <br>
              u-border-right-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-1px">
              u-border-right-style-solid <br>
              u-border-right-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-2px">
              u-border-right-style-solid <br>
              u-border-right-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-3px">
              u-border-right-style-solid <br>
              u-border-right-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-4px">
              u-border-right-style-solid <br>
              u-border-right-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-5px">
              u-border-right-style-solid <br>
              u-border-right-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-6px">
              u-border-right-style-solid <br>
              u-border-right-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-7px">
              u-border-right-style-solid <br>
              u-border-right-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-8px">
              u-border-right-style-solid <br>
              u-border-right-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-9px">
              u-border-right-style-solid <br>
              u-border-right-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-10px">
              u-border-right-style-solid <br>
              u-border-right-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-11px">
              u-border-right-style-solid <br>
              u-border-right-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-12px">
              u-border-right-style-solid <br>
              u-border-right-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-13px">
              u-border-right-style-solid <br>
              u-border-right-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-14px">
              u-border-right-style-solid <br>
              u-border-right-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-15px">
              u-border-right-style-solid <br>
              u-border-right-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-16px">
              u-border-right-style-solid <br>
              u-border-right-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-17px">
              u-border-right-style-solid <br>
              u-border-right-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-18px">
              u-border-right-style-solid <br>
              u-border-right-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-19px">
              u-border-right-style-solid <br>
              u-border-right-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-20px">
              u-border-right-style-solid <br>
              u-border-right-width-20px</div>
</div>

The parameterized border renders.

u-border-top-style-solid
u-border-top-width-0px

u-border-top-style-solid
u-border-top-width-1px

u-border-top-style-solid
u-border-top-width-2px

u-border-top-style-solid
u-border-top-width-3px

u-border-top-style-solid
u-border-top-width-4px

u-border-top-style-solid
u-border-top-width-5px

u-border-top-style-solid
u-border-top-width-6px

u-border-top-style-solid
u-border-top-width-7px

u-border-top-style-solid
u-border-top-width-8px

u-border-top-style-solid
u-border-top-width-9px

u-border-top-style-solid
u-border-top-width-10px

u-border-top-style-solid
u-border-top-width-11px

u-border-top-style-solid
u-border-top-width-12px

u-border-top-style-solid
u-border-top-width-13px

u-border-top-style-solid
u-border-top-width-14px

u-border-top-style-solid
u-border-top-width-15px

u-border-top-style-solid
u-border-top-width-16px

u-border-top-style-solid
u-border-top-width-17px

u-border-top-style-solid
u-border-top-width-18px

u-border-top-style-solid
u-border-top-width-19px

u-border-top-style-solid
u-border-top-width-20px

u-border-bottom-style-solid
u-border-bottom-width-0px

u-border-bottom-style-solid
u-border-bottom-width-1px

u-border-bottom-style-solid
u-border-bottom-width-2px

u-border-bottom-style-solid
u-border-bottom-width-3px

u-border-bottom-style-solid
u-border-bottom-width-4px

u-border-bottom-style-solid
u-border-bottom-width-5px

u-border-bottom-style-solid
u-border-bottom-width-6px

u-border-bottom-style-solid
u-border-bottom-width-7px

u-border-bottom-style-solid
u-border-bottom-width-8px

u-border-bottom-style-solid
u-border-bottom-width-9px

u-border-bottom-style-solid
u-border-bottom-width-10px

u-border-bottom-style-solid
u-border-bottom-width-11px

u-border-bottom-style-solid
u-border-bottom-width-12px

u-border-bottom-style-solid
u-border-bottom-width-13px

u-border-bottom-style-solid
u-border-bottom-width-14px

u-border-bottom-style-solid
u-border-bottom-width-15px

u-border-bottom-style-solid
u-border-bottom-width-16px

u-border-bottom-style-solid
u-border-bottom-width-17px

u-border-bottom-style-solid
u-border-bottom-width-18px

u-border-bottom-style-solid
u-border-bottom-width-19px

u-border-bottom-style-solid
u-border-bottom-width-20px

u-border-left-style-solid
u-border-left-width-0px

u-border-left-style-solid
u-border-left-width-1px

u-border-left-style-solid
u-border-left-width-2px

u-border-left-style-solid
u-border-left-width-3px

u-border-left-style-solid
u-border-left-width-4px

u-border-left-style-solid
u-border-left-width-5px

u-border-left-style-solid
u-border-left-width-6px

u-border-left-style-solid
u-border-left-width-7px

u-border-left-style-solid
u-border-left-width-8px

u-border-left-style-solid
u-border-left-width-9px

u-border-left-style-solid
u-border-left-width-10px

u-border-left-style-solid
u-border-left-width-11px

u-border-left-style-solid
u-border-left-width-12px

u-border-left-style-solid
u-border-left-width-13px

u-border-left-style-solid
u-border-left-width-14px

u-border-left-style-solid
u-border-left-width-15px

u-border-left-style-solid
u-border-left-width-16px

u-border-left-style-solid
u-border-left-width-17px

u-border-left-style-solid
u-border-left-width-18px

u-border-left-style-solid
u-border-left-width-19px

u-border-left-style-solid
u-border-left-width-20px

u-border-right-style-solid
u-border-right-width-0px

u-border-right-style-solid
u-border-right-width-1px

u-border-right-style-solid
u-border-right-width-2px

u-border-right-style-solid
u-border-right-width-3px

u-border-right-style-solid
u-border-right-width-4px

u-border-right-style-solid
u-border-right-width-5px

u-border-right-style-solid
u-border-right-width-6px

u-border-right-style-solid
u-border-right-width-7px

u-border-right-style-solid
u-border-right-width-8px

u-border-right-style-solid
u-border-right-width-9px

u-border-right-style-solid
u-border-right-width-10px

u-border-right-style-solid
u-border-right-width-11px

u-border-right-style-solid
u-border-right-width-12px

u-border-right-style-solid
u-border-right-width-13px

u-border-right-style-solid
u-border-right-width-14px

u-border-right-style-solid
u-border-right-width-15px

u-border-right-style-solid
u-border-right-width-16px

u-border-right-style-solid
u-border-right-width-17px

u-border-right-style-solid
u-border-right-width-18px

u-border-right-style-solid
u-border-right-width-19px

u-border-right-style-solid
u-border-right-width-20px

u-b[side]s-solid and u-b[side]w[factor]px is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">

<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw0px">
            u-bts-solid<br>
            u-btw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw1px">
            u-bts-solid<br>
            u-btw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw2px">
            u-bts-solid<br>
            u-btw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw3px">
            u-bts-solid<br>
            u-btw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw4px">
            u-bts-solid<br>
            u-btw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw5px">
            u-bts-solid<br>
            u-btw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw6px">
            u-bts-solid<br>
            u-btw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw7px">
            u-bts-solid<br>
            u-btw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw8px">
            u-bts-solid<br>
            u-btw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw9px">
            u-bts-solid<br>
            u-btw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw10px">
            u-bts-solid<br>
            u-btw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw11px">
            u-bts-solid<br>
            u-btw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw12px">
            u-bts-solid<br>
            u-btw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw13px">
            u-bts-solid<br>
            u-btw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw14px">
            u-bts-solid<br>
            u-btw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw15px">
            u-bts-solid<br>
            u-btw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw16px">
            u-bts-solid<br>
            u-btw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw17px">
            u-bts-solid<br>
            u-btw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw18px">
            u-bts-solid<br>
            u-btw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw19px">
            u-bts-solid<br>
            u-btw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw20px">
            u-bts-solid<br>
            u-btw20px
</div>
<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw0px">
            u-bbs-solid<br>
            u-bbw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw1px">
            u-bbs-solid<br>
            u-bbw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw2px">
            u-bbs-solid<br>
            u-bbw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw3px">
            u-bbs-solid<br>
            u-bbw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw4px">
            u-bbs-solid<br>
            u-bbw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw5px">
            u-bbs-solid<br>
            u-bbw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw6px">
            u-bbs-solid<br>
            u-bbw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw7px">
            u-bbs-solid<br>
            u-bbw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw8px">
            u-bbs-solid<br>
            u-bbw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw9px">
            u-bbs-solid<br>
            u-bbw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw10px">
            u-bbs-solid<br>
            u-bbw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw11px">
            u-bbs-solid<br>
            u-bbw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw12px">
            u-bbs-solid<br>
            u-bbw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw13px">
            u-bbs-solid<br>
            u-bbw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw14px">
            u-bbs-solid<br>
            u-bbw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw15px">
            u-bbs-solid<br>
            u-bbw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw16px">
            u-bbs-solid<br>
            u-bbw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw17px">
            u-bbs-solid<br>
            u-bbw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw18px">
            u-bbs-solid<br>
            u-bbw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw19px">
            u-bbs-solid<br>
            u-bbw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw20px">
            u-bbs-solid<br>
            u-bbw20px
</div>
<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw0px">
            u-bls-solid<br>
            u-blw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw1px">
            u-bls-solid<br>
            u-blw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw2px">
            u-bls-solid<br>
            u-blw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw3px">
            u-bls-solid<br>
            u-blw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw4px">
            u-bls-solid<br>
            u-blw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw5px">
            u-bls-solid<br>
            u-blw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw6px">
            u-bls-solid<br>
            u-blw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw7px">
            u-bls-solid<br>
            u-blw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw8px">
            u-bls-solid<br>
            u-blw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw9px">
            u-bls-solid<br>
            u-blw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw10px">
            u-bls-solid<br>
            u-blw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw11px">
            u-bls-solid<br>
            u-blw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw12px">
            u-bls-solid<br>
            u-blw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw13px">
            u-bls-solid<br>
            u-blw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw14px">
            u-bls-solid<br>
            u-blw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw15px">
            u-bls-solid<br>
            u-blw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw16px">
            u-bls-solid<br>
            u-blw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw17px">
            u-bls-solid<br>
            u-blw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw18px">
            u-bls-solid<br>
            u-blw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw19px">
            u-bls-solid<br>
            u-blw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw20px">
            u-bls-solid<br>
            u-blw20px
</div>
<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw0px">
            u-brs-solid<br>
            u-brw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw1px">
            u-brs-solid<br>
            u-brw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw2px">
            u-brs-solid<br>
            u-brw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw3px">
            u-brs-solid<br>
            u-brw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw4px">
            u-brs-solid<br>
            u-brw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw5px">
            u-brs-solid<br>
            u-brw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw6px">
            u-brs-solid<br>
            u-brw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw7px">
            u-brs-solid<br>
            u-brw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw8px">
            u-brs-solid<br>
            u-brw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw9px">
            u-brs-solid<br>
            u-brw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw10px">
            u-brs-solid<br>
            u-brw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw11px">
            u-brs-solid<br>
            u-brw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw12px">
            u-brs-solid<br>
            u-brw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw13px">
            u-brs-solid<br>
            u-brw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw14px">
            u-brs-solid<br>
            u-brw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw15px">
            u-brs-solid<br>
            u-brw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw16px">
            u-brs-solid<br>
            u-brw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw17px">
            u-brs-solid<br>
            u-brw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw18px">
            u-brs-solid<br>
            u-brw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw19px">
            u-brs-solid<br>
            u-brw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw20px">
            u-brs-solid<br>
            u-brw20px
</div>
</div>

The parameterized border renders.

u-bts-solid
u-btw0px

u-bts-solid
u-btw1px

u-bts-solid
u-btw2px

u-bts-solid
u-btw3px

u-bts-solid
u-btw4px

u-bts-solid
u-btw5px

u-bts-solid
u-btw6px

u-bts-solid
u-btw7px

u-bts-solid
u-btw8px

u-bts-solid
u-btw9px

u-bts-solid
u-btw10px

u-bts-solid
u-btw11px

u-bts-solid
u-btw12px

u-bts-solid
u-btw13px

u-bts-solid
u-btw14px

u-bts-solid
u-btw15px

u-bts-solid
u-btw16px

u-bts-solid
u-btw17px

u-bts-solid
u-btw18px

u-bts-solid
u-btw19px

u-bts-solid
u-btw20px

u-bbs-solid
u-bbw0px

u-bbs-solid
u-bbw1px

u-bbs-solid
u-bbw2px

u-bbs-solid
u-bbw3px

u-bbs-solid
u-bbw4px

u-bbs-solid
u-bbw5px

u-bbs-solid
u-bbw6px

u-bbs-solid
u-bbw7px

u-bbs-solid
u-bbw8px

u-bbs-solid
u-bbw9px

u-bbs-solid
u-bbw10px

u-bbs-solid
u-bbw11px

u-bbs-solid
u-bbw12px

u-bbs-solid
u-bbw13px

u-bbs-solid
u-bbw14px

u-bbs-solid
u-bbw15px

u-bbs-solid
u-bbw16px

u-bbs-solid
u-bbw17px

u-bbs-solid
u-bbw18px

u-bbs-solid
u-bbw19px

u-bbs-solid
u-bbw20px

u-bls-solid
u-blw0px

u-bls-solid
u-blw1px

u-bls-solid
u-blw2px

u-bls-solid
u-blw3px

u-bls-solid
u-blw4px

u-bls-solid
u-blw5px

u-bls-solid
u-blw6px

u-bls-solid
u-blw7px

u-bls-solid
u-blw8px

u-bls-solid
u-blw9px

u-bls-solid
u-blw10px

u-bls-solid
u-blw11px

u-bls-solid
u-blw12px

u-bls-solid
u-blw13px

u-bls-solid
u-blw14px

u-bls-solid
u-blw15px

u-bls-solid
u-blw16px

u-bls-solid
u-blw17px

u-bls-solid
u-blw18px

u-bls-solid
u-blw19px

u-bls-solid
u-blw20px

u-brs-solid
u-brw0px

u-brs-solid
u-brw1px

u-brs-solid
u-brw2px

u-brs-solid
u-brw3px

u-brs-solid
u-brw4px

u-brs-solid
u-brw5px

u-brs-solid
u-brw6px

u-brs-solid
u-brw7px

u-brs-solid
u-brw8px

u-brs-solid
u-brw9px

u-brs-solid
u-brw10px

u-brs-solid
u-brw11px

u-brs-solid
u-brw12px

u-brs-solid
u-brw13px

u-brs-solid
u-brw14px

u-brs-solid
u-brw15px

u-brs-solid
u-brw16px

u-brs-solid
u-brw17px

u-brs-solid
u-brw18px

u-brs-solid
u-brw19px

u-brs-solid
u-brw20px

u-border-style-[style] is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-none
              u-border-width-5px">
              u-border-style-none</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-dotted
              u-border-width-5px">
              u-border-style-dotted</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-dashed
              u-border-width-5px">
              u-border-style-dashed</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-solid
              u-border-width-5px">
              u-border-style-solid</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-double
              u-border-width-5px">
              u-border-style-double</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-groove
              u-border-width-5px">
              u-border-style-groove</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-ridge
              u-border-width-5px">
              u-border-style-ridge</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-inset
              u-border-width-5px">
              u-border-style-inset</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-outset
              u-border-width-5px">
              u-border-style-outset</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-initial
              u-border-width-5px">
              u-border-style-initial</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-inherit
              u-border-width-5px">
              u-border-style-inherit</div>
</div>

The border style renders.

u-border-style-none

u-border-style-dotted

u-border-style-dashed

u-border-style-solid

u-border-style-double

u-border-style-groove

u-border-style-ridge

u-border-style-inset

u-border-style-outset

u-border-style-initial

u-border-style-inherit

u-border-[side]-style-[style] and u-border-[side]-width-5px is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-none
              u-border-top-width-5px">
              u-border-top-style-none
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-dotted
              u-border-top-width-5px">
              u-border-top-style-dotted
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-dashed
              u-border-top-width-5px">
              u-border-top-style-dashed
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-top-width-5px">
              u-border-top-style-solid
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-double
              u-border-top-width-5px">
              u-border-top-style-double
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-groove
              u-border-top-width-5px">
              u-border-top-style-groove
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-ridge
              u-border-top-width-5px">
              u-border-top-style-ridge
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-inset
              u-border-top-width-5px">
              u-border-top-style-inset
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-outset
              u-border-top-width-5px">
              u-border-top-style-outset
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-initial
              u-border-top-width-5px">
              u-border-top-style-initial
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-inherit
              u-border-top-width-5px">
              u-border-top-style-inherit
              u-border-top-width-5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-none
              u-border-bottom-width-5px">
              u-border-bottom-style-none
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-dotted
              u-border-bottom-width-5px">
              u-border-bottom-style-dotted
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-dashed
              u-border-bottom-width-5px">
              u-border-bottom-style-dashed
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-bottom-width-5px">
              u-border-bottom-style-solid
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-double
              u-border-bottom-width-5px">
              u-border-bottom-style-double
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-groove
              u-border-bottom-width-5px">
              u-border-bottom-style-groove
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-ridge
              u-border-bottom-width-5px">
              u-border-bottom-style-ridge
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-inset
              u-border-bottom-width-5px">
              u-border-bottom-style-inset
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-outset
              u-border-bottom-width-5px">
              u-border-bottom-style-outset
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-initial
              u-border-bottom-width-5px">
              u-border-bottom-style-initial
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-inherit
              u-border-bottom-width-5px">
              u-border-bottom-style-inherit
              u-border-bottom-width-5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-none
              u-border-left-width-5px">
              u-border-left-style-none
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-dotted
              u-border-left-width-5px">
              u-border-left-style-dotted
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-dashed
              u-border-left-width-5px">
              u-border-left-style-dashed
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-left-width-5px">
              u-border-left-style-solid
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-double
              u-border-left-width-5px">
              u-border-left-style-double
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-groove
              u-border-left-width-5px">
              u-border-left-style-groove
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-ridge
              u-border-left-width-5px">
              u-border-left-style-ridge
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-inset
              u-border-left-width-5px">
              u-border-left-style-inset
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-outset
              u-border-left-width-5px">
              u-border-left-style-outset
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-initial
              u-border-left-width-5px">
              u-border-left-style-initial
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-inherit
              u-border-left-width-5px">
              u-border-left-style-inherit
              u-border-left-width-5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-none
              u-border-right-width-5px">
              u-border-right-style-none
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-dotted
              u-border-right-width-5px">
              u-border-right-style-dotted
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-dashed
              u-border-right-width-5px">
              u-border-right-style-dashed
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-right-width-5px">
              u-border-right-style-solid
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-double
              u-border-right-width-5px">
              u-border-right-style-double
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-groove
              u-border-right-width-5px">
              u-border-right-style-groove
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-ridge
              u-border-right-width-5px">
              u-border-right-style-ridge
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-inset
              u-border-right-width-5px">
              u-border-right-style-inset
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-outset
              u-border-right-width-5px">
              u-border-right-style-outset
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-initial
              u-border-right-width-5px">
              u-border-right-style-initial
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-inherit
              u-border-right-width-5px">
              u-border-right-style-inherit
              u-border-right-width-5px</div>
</div>

The border style renders.

u-border-top-style-none u-border-top-width-5px

u-border-top-style-dotted u-border-top-width-5px

u-border-top-style-dashed u-border-top-width-5px

u-border-top-style-solid u-border-top-width-5px

u-border-top-style-double u-border-top-width-5px

u-border-top-style-groove u-border-top-width-5px

u-border-top-style-ridge u-border-top-width-5px

u-border-top-style-inset u-border-top-width-5px

u-border-top-style-outset u-border-top-width-5px

u-border-top-style-initial u-border-top-width-5px

u-border-top-style-inherit u-border-top-width-5px

u-border-bottom-style-none u-border-bottom-width-5px

u-border-bottom-style-dotted u-border-bottom-width-5px

u-border-bottom-style-dashed u-border-bottom-width-5px

u-border-bottom-style-solid u-border-bottom-width-5px

u-border-bottom-style-double u-border-bottom-width-5px

u-border-bottom-style-groove u-border-bottom-width-5px

u-border-bottom-style-ridge u-border-bottom-width-5px

u-border-bottom-style-inset u-border-bottom-width-5px

u-border-bottom-style-outset u-border-bottom-width-5px

u-border-bottom-style-initial u-border-bottom-width-5px

u-border-bottom-style-inherit u-border-bottom-width-5px

u-border-left-style-none u-border-left-width-5px

u-border-left-style-dotted u-border-left-width-5px

u-border-left-style-dashed u-border-left-width-5px

u-border-left-style-solid u-border-left-width-5px

u-border-left-style-double u-border-left-width-5px

u-border-left-style-groove u-border-left-width-5px

u-border-left-style-ridge u-border-left-width-5px

u-border-left-style-inset u-border-left-width-5px

u-border-left-style-outset u-border-left-width-5px

u-border-left-style-initial u-border-left-width-5px

u-border-left-style-inherit u-border-left-width-5px

u-border-right-style-none u-border-right-width-5px

u-border-right-style-dotted u-border-right-width-5px

u-border-right-style-dashed u-border-right-width-5px

u-border-right-style-solid u-border-right-width-5px

u-border-right-style-double u-border-right-width-5px

u-border-right-style-groove u-border-right-width-5px

u-border-right-style-ridge u-border-right-width-5px

u-border-right-style-inset u-border-right-width-5px

u-border-right-style-outset u-border-right-width-5px

u-border-right-style-initial u-border-right-width-5px

u-border-right-style-inherit u-border-right-width-5px

u-b[side]s-[style] and u-b[side]w5px is applied.

                 

<div class="u-flex u-flex-column u-width-40rem">
  
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-none
              u-btw5px">
              u-bts-none
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-dotted
              u-btw5px">
              u-bts-dotted
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-dashed
              u-btw5px">
              u-bts-dashed
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-solid
              u-btw5px">
              u-bts-solid
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-double
              u-btw5px">
              u-bts-double
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-groove
              u-btw5px">
              u-bts-groove
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-ridge
              u-btw5px">
              u-bts-ridge
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-inset
              u-btw5px">
              u-bts-inset
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-outset
              u-btw5px">
              u-bts-outset
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-initial
              u-btw5px">
              u-bts-initial
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-inherit
              u-btw5px">
              u-bts-inherit
              <br>
              u-bwt5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-none
              u-bbw5px">
              u-bbs-none
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-dotted
              u-bbw5px">
              u-bbs-dotted
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-dashed
              u-bbw5px">
              u-bbs-dashed
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-solid
              u-bbw5px">
              u-bbs-solid
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-double
              u-bbw5px">
              u-bbs-double
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-groove
              u-bbw5px">
              u-bbs-groove
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-ridge
              u-bbw5px">
              u-bbs-ridge
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-inset
              u-bbw5px">
              u-bbs-inset
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-outset
              u-bbw5px">
              u-bbs-outset
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-initial
              u-bbw5px">
              u-bbs-initial
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-inherit
              u-bbw5px">
              u-bbs-inherit
              <br>
              u-bwb5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-none
              u-blw5px">
              u-bls-none
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-dotted
              u-blw5px">
              u-bls-dotted
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-dashed
              u-blw5px">
              u-bls-dashed
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-solid
              u-blw5px">
              u-bls-solid
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-double
              u-blw5px">
              u-bls-double
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-groove
              u-blw5px">
              u-bls-groove
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-ridge
              u-blw5px">
              u-bls-ridge
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-inset
              u-blw5px">
              u-bls-inset
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-outset
              u-blw5px">
              u-bls-outset
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-initial
              u-blw5px">
              u-bls-initial
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-inherit
              u-blw5px">
              u-bls-inherit
              <br>
              u-bwl5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-none
              u-brw5px">
              u-brs-none
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-dotted
              u-brw5px">
              u-brs-dotted
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-dashed
              u-brw5px">
              u-brs-dashed
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-solid
              u-brw5px">
              u-brs-solid
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-double
              u-brw5px">
              u-brs-double
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-groove
              u-brw5px">
              u-brs-groove
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-ridge
              u-brw5px">
              u-brs-ridge
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-inset
              u-brw5px">
              u-brs-inset
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-outset
              u-brw5px">
              u-brs-outset
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-initial
              u-brw5px">
              u-brs-initial
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-inherit
              u-brw5px">
              u-brs-inherit
              <br>
              u-bwr5px</div>
</div>

The border style renders.

u-bts-none
u-bwt5px

u-bts-dotted
u-bwt5px

u-bts-dashed
u-bwt5px

u-bts-solid
u-bwt5px

u-bts-double
u-bwt5px

u-bts-groove
u-bwt5px

u-bts-ridge
u-bwt5px

u-bts-inset
u-bwt5px

u-bts-outset
u-bwt5px

u-bts-initial
u-bwt5px

u-bts-inherit
u-bwt5px

u-bbs-none
u-bwb5px

u-bbs-dotted
u-bwb5px

u-bbs-dashed
u-bwb5px

u-bbs-solid
u-bwb5px

u-bbs-double
u-bwb5px

u-bbs-groove
u-bwb5px

u-bbs-ridge
u-bwb5px

u-bbs-inset
u-bwb5px

u-bbs-outset
u-bwb5px

u-bbs-initial
u-bwb5px

u-bbs-inherit
u-bwb5px

u-bls-none
u-bwl5px

u-bls-dotted
u-bwl5px

u-bls-dashed
u-bwl5px

u-bls-solid
u-bwl5px

u-bls-double
u-bwl5px

u-bls-groove
u-bwl5px

u-bls-ridge
u-bwl5px

u-bls-inset
u-bwl5px

u-bls-outset
u-bwl5px

u-bls-initial
u-bwl5px

u-bls-inherit
u-bwl5px

u-brs-none
u-bwr5px

u-brs-dotted
u-bwr5px

u-brs-dashed
u-bwr5px

u-brs-solid
u-bwr5px

u-brs-double
u-bwr5px

u-brs-groove
u-bwr5px

u-brs-ridge
u-bwr5px

u-brs-inset
u-bwr5px

u-brs-outset
u-bwr5px

u-brs-initial
u-bwr5px

u-brs-inherit
u-bwr5px

u-sizeFit is applied.

                 

<div class="u-flex TestCanvas">
  <div class="TestBox u-sizeFit 
                u-background-color-md-amber-900">u-sizeFit me.</div>
</div>

The the flex item is shrink wrapped and does not expand.

u-sizeFit me.

u-sizeFill is applied.

                 

<div class="u-flex  TestCanvas">
  <div class="TestBoxLeft u-sizeFit 
                u-background-color-md-amber-900">u-sizeFit me.</div>
  <div class="u-sizeFill TestBox">
    u-sizeFill me.
  </div>
</div>

The the flex item expands to the end of the container.

u-sizeFit me.

u-sizeFill me.

.u-[size]-sizeFit is applied.

                 


<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-sizeFit u-background-color-md-amber-900">
    u-sizeFit Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-md-size-sizeFit u-background-color-md-amber-900">
    u-sm-sizeFit Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-md-sizeFit u-background-color-md-amber-900">
    u-md-sizeFit Me
  </div>
</div>

<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-lg-sizeFit u-background-color-md-amber-900">
    u-lg-sizeFit Me
  </div>
</div>

The TestBox should sizeFit when the viewport is bigger than [size]-viewport. Downsize the viewport to see the responsive fit switch off and the u-size3of4 switch on.

u-sizeFit Me

u-sm-sizeFit Me

u-md-sizeFit Me

u-lg-sizeFit Me

.u-[size]-sizeFill is applied.

                 


<div class="u-flex TestCanvas">
  <div class="TextBox u-sizeFill u-background-color-md-amber-900">
    u-sizeFill Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-sm-sizeFill u-background-color-md-amber-900">
    u-sm-sizeFill Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-md-sizeFill u-background-color-md-amber-900">
    u-md-sizeFill Me
  </div>
</div>

<div class="u-flex TestCanvas">
  <div class="TextBox u-lg-sizeFill u-background-color-md-amber-900">
    u-lg-sizeFill Me
  </div>
</div>

The TestBox should sizeFill when the viewport is bigger than [size]-viewport. Downsize the viewport to see the responsive fit switch off.

u-sizeFill Me

u-sm-sizeFill Me

u-md-sizeFill Me

u-lg-sizeFill Me

u-sizeFill is applied.

                 

 <div class="u-flex TestCanvas">
      <div class="u-sizeFill TestBoxLeft">
        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
        aliquip nec. Atqui diceret ceteros.
      </div>
      <div class="u-sizeFill TestBoxLeft">
        content
      </div>
      <div class="u-sizeFill TestBox">
        content
      </div>
</div>

Space is distributed evenly regardless of contained content.

Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.

content

u-sizeFillAlt is applied.

                 

 <div class="u-flex TestCanvas">
      <div class="u-sizeFillAlt TestBoxLeft">
        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
        aliquip nec. Atqui diceret ceteros.
      </div>
      <div class="u-sizeFillAlt TestBoxLeft">
        content
      </div>
      <div class="u-sizeFillAlt TestBox">
        even more content in here
      </div>
</div>
 <div class="u-flex TestCanvas">
      <div class="u-sizeFillAlt TestBoxLeft">
        aliquip nec. Atqui diceret ceteros.
      </div>
      <div class="u-sizeFillAlt TestBoxLeft">
        content
      </div>
      <div class="u-sizeFillAlt TestBox">
        even more content in here
      </div>
</div>

The space is distributed based on the width taken up by content content.

Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.

content

even more content in here

aliquip nec. Atqui diceret ceteros.

content

even more content in here

u-sizeFull is applied.

                 

 <div class="TestCanvas">
      <div class="u-sizeFull TestBox">
        Lorem ipsum.
      </div>
</div>

The elements width is set to 100% and it expands to the full width of the container.

Lorem ipsum.

u-sizeXofY is applied.

                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size11of12 TestBox">11 of 12</div>
 </div>

The item is sized by the ratio.

The flex item size to x/y width of the parent container.

1 of 2

1 of 3

2 of 3

1 of 4

2 of 4

3 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

1 of 8

2 of 8

3 of 8

4 of 8

5 of 8

6 of 8

7 of 8

1 of 10

2 of 10

3 of 10

4 of 10

5 of 10

6 of 10

7 of 10

8 of 10

9 of 10

1 of 12

2 of 12

3 of 12

4 of 12

5 of 12

6 of 12

7 of 12

8 of 12

9 of 12

10 of 12

11 of 12

u-sm-sizeXofY is applied.

                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-sm-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size11of12 TestBox">11 of 12</div>
 </div>

The item is sized by the ratio if the reponsive utility is triggered.

The flex item size to x/y width of the parent container.

1 of 2

1 of 3

2 of 3

1 of 4

2 of 4

3 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

1 of 8

2 of 8

3 of 8

4 of 8

5 of 8

6 of 8

7 of 8

1 of 10

2 of 10

3 of 10

4 of 10

5 of 10

6 of 10

7 of 10

8 of 10

9 of 10

1 of 12

2 of 12

3 of 12

4 of 12

5 of 12

6 of 12

7 of 12

8 of 12

9 of 12

10 of 12

11 of 12

u-md-sizeXofY is applied.

                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-md-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-md-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-md-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-md-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size11of12 TestBox">11 of 12</div>
 </div>

The item is sized by the ratio if the reponsive utility is triggered.

The flex item size to x/y width of the parent container.

1 of 2

1 of 3

2 of 3

1 of 4

2 of 4

3 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

1 of 8

2 of 8

3 of 8

4 of 8

5 of 8

6 of 8

7 of 8

1 of 10

2 of 10

3 of 10

4 of 10

5 of 10

6 of 10

7 of 10

8 of 10

9 of 10

1 of 12

2 of 12

3 of 12

4 of 12

5 of 12

6 of 12

7 of 12

8 of 12

9 of 12

10 of 12

11 of 12

u-lg-sizeXofY is applied.

                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-lg-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size11of12 TestBox">11 of 12</div>
 </div>

The item is sized by the ratio if the reponsive utility is triggered.

The flex item size to x/y width of the parent container.

1 of 2

1 of 3

2 of 3

1 of 4

2 of 4

3 of 4

1 of 6

2 of 6

3 of 6

4 of 6

5 of 6

1 of 8

2 of 8

3 of 8

4 of 8

5 of 8

6 of 8

7 of 8

1 of 10

2 of 10

3 of 10

4 of 10

5 of 10

6 of 10

7 of 10

8 of 10

9 of 10

1 of 12

2 of 12

3 of 12

4 of 12

5 of 12

6 of 12

7 of 12

8 of 12

9 of 12

10 of 12

11 of 12

u-beforeXofY is applied.

                 

<div class="TestBoxTop u-before1of2 dev-Box">1of2</div>
<div class="TestBox u-before1of3 dev-Box">1of3</div>
<div class="TestBox u-before2of3 dev-Box">2of3</div>

<div class="TestBox u-before1of4 dev-Box">1of4</div>
<div class="TestBox u-before2of4 dev-Box">2of4</div>
<div class="TestBox u-before3of4 dev-Box">3of4</div>    

<div class="TestBox u-before1of6 dev-Box">1of6</div>
<div class="TestBox u-before2of6 dev-Box">2of6</div>
<div class="TestBox u-before3of6 dev-Box">3of6</div>
<div class="TestBox u-before4of6 dev-Box">4of6</div>
<div class="TestBox u-before5of6 dev-Box">5of6</div>

<div class="TestBox u-before1of8 dev-Box">1of8</div>
<div class="TestBox u-before2of8 dev-Box">2of8</div>
<div class="TestBox u-before3of8 dev-Box">3of8</div>
<div class="TestBox u-before4of8 dev-Box">4of8</div>
<div class="TestBox u-before5of8 dev-Box">5of8</div>
<div class="TestBox u-before6of8 dev-Box">6of8</div>
<div class="TestBox u-before7of8 dev-Box">7of8</div>

<div class="TestBox u-before1of10 dev-Box">1of10</div>
<div class="TestBox u-before2of10 dev-Box">2of10</div>
<div class="TestBox u-before3of10 dev-Box">3of10</div>
<div class="TestBox u-before4of10 dev-Box">4of10</div>
<div class="TestBox u-before5of10 dev-Box">5of10</div>
<div class="TestBox u-before6of10 dev-Box">6of10</div>
<div class="TestBox u-before7of10 dev-Box">7of10</div>
<div class="TestBox u-before8of10 dev-Box">8of10</div>
<div class="TestBox u-before9of10 dev-Box">9of10</div>

<div class="TestBox u-before1of12 dev-Box">1of12</div>
<div class="TestBox u-before2of12 dev-Box">2of12</div>
<div class="TestBox u-before3of12 dev-Box">3of12</div>
<div class="TestBox u-before4of12 dev-Box">4of12</div>
<div class="TestBox u-before5of12 dev-Box">5of12</div>
<div class="TestBox u-before6of12 dev-Box">6of12</div>
<div class="TestBox u-before7of12 dev-Box">7of12</div>
<div class="TestBox u-before8of12 dev-Box">8of12</div>
<div class="TestBox u-before9of12 dev-Box">9of12</div>
<div class="TestBox u-before10of12 dev-Box">10of12</div>
<div class="TestBox u-before11of12 dev-Box">11of12</div>

offsets by X/Y of the parent container.

1of2

1of3

2of3

1of4

2of4

3of4

1of6

2of6

3of6

4of6

5of6

1of8

2of8

3of8

4of8

5of8

6of8

7of8

1of10

2of10

3of10

4of10

5of10

6of10

7of10

8of10

9of10

1of12

2of12

3of12

4of12

5of12

6of12

7of12

8of12

9of12

10of12

11of12

u-beforeNone is applied.

                 

<div class="TestBox 
            u-before4of12 
            u-beforeNone 
            u-sm-beforeNone 
            u-md-beforeNone 
            u-lg-beforeNone">
4of12 / beforeNone
</div>

it removes any margin space before.

4of12 / beforeNone

u-afterXofY is applied.

                 

<div class="TestBoxTop u-after1of2 dev-Box">1of2</div>
<div class="TestBox u-after1of3 dev-Box">1of3</div>
<div class="TestBox u-after2of3 dev-Box">2of3</div>

<div class="TestBox u-after1of4 dev-Box">1of4</div>
<div class="TestBox u-after2of4 dev-Box">2of4</div>
<div class="TestBox u-after3of4 dev-Box">3of4</div>    

<div class="TestBox u-after1of6 dev-Box">1of6</div>
<div class="TestBox u-after2of6 dev-Box">2of6</div>
<div class="TestBox u-after3of6 dev-Box">3of6</div>
<div class="TestBox u-after4of6 dev-Box">4of6</div>
<div class="TestBox u-after5of6 dev-Box">5of6</div>

<div class="TestBox u-after1of8 dev-Box">1of8</div>
<div class="TestBox u-after2of8 dev-Box">2of8</div>
<div class="TestBox u-after3of8 dev-Box">3of8</div>
<div class="TestBox u-after4of8 dev-Box">4of8</div>
<div class="TestBox u-after5of8 dev-Box">5of8</div>
<div class="TestBox u-after6of8 dev-Box">6of8</div>
<div class="TestBox u-after7of8 dev-Box">7of8</div>

<div class="TestBox u-after1of10 dev-Box">1of10</div>
<div class="TestBox u-after2of10 dev-Box">2of10</div>
<div class="TestBox u-after3of10 dev-Box">3of10</div>
<div class="TestBox u-after4of10 dev-Box">4of10</div>
<div class="TestBox u-after5of10 dev-Box">5of10</div>
<div class="TestBox u-after6of10 dev-Box">6of10</div>
<div class="TestBox u-after7of10 dev-Box">7of10</div>
<div class="TestBox u-after8of10 dev-Box">8of10</div>
<div class="TestBox u-after9of10 dev-Box">9of10</div>

<div class="TestBox u-after1of12 dev-Box">1of12</div>
<div class="TestBox u-after2of12 dev-Box">2of12</div>
<div class="TestBox u-after3of12 dev-Box">3of12</div>
<div class="TestBox u-after4of12 dev-Box">4of12</div>
<div class="TestBox u-after5of12 dev-Box">5of12</div>
<div class="TestBox u-after6of12 dev-Box">6of12</div>
<div class="TestBox u-after7of12 dev-Box">7of12</div>
<div class="TestBox u-after8of12 dev-Box">8of12</div>
<div class="TestBox u-after9of12 dev-Box">9of12</div>
<div class="TestBox u-after10of12 dev-Box">10of12</div>
<div class="TestBox u-after11of12 dev-Box">11of12</div>

offsets by X/Y of the parent container.

1of2

1of3

2of3

1of4

2of4

3of4

1of6

2of6

3of6

4of6

5of6

1of8

2of8

3of8

4of8

5of8

6of8

7of8

1of10

2of10

3of10

4of10

5of10

6of10

7of10

8of10

9of10

1of12

2of12

3of12

4of12

5of12

6of12

7of12

8of12

9of12

10of12

11of12

u-afterNone is applied.

                 

<div class="TestBox 
            u-after4of12 
            u-afterNone 
            u-sm-afterNone 
            u-md-afterNone 
            u-lg-afterNone">
4of12 / beforeNone
</div>

it removes any margin space after.

4of12 / beforeNone