Cards

<div class="o-grid  o-grid--autoFit">

  <div class="o-grid-cell">
    <!-- Card 1 -->
    <div class="o-box  u-mb4  u-shadow1  u-borderAll  u-border2  u-borderTrans  u-bgWhite  u-hoverGrow  u-hoverShadow4  u-hoverBorderPrimary">
      <h2 class="u-caps">I'm a card</h2>
      <p>
        I have a border, colors, shadows, and even hover effects. Cool.
      </p>
    </div>
    <!-- End: Card 1 -->
  </div>

</div>

<div class="o-grid  o-grid--alignCenter">

  <div class="o-grid-cell  u-sizeFull">
    <h2>Padding sizes</h2>
    <p>These can span any number of columns but are generally used at 6 of 12 or 4 of 8 columns.</p>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--loosest  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Loosest Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--looser  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Looser Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--loose  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Loose Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Default Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--tight  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Tight Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--tighter  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Tighter Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--tightest  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Tightest Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--flush  u-bgGrayLightest  u-colorGrayDarker  u-mb4">
      <h2 class="u-colorBlackish">Flush (no) Padding</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

</div>

<div class="o-grid  o-grid--alignCenter">

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--looser  u-bgGrayDark  u-colorGrayLightest">
      <h2 class="u-colorWhite">Accelerate design reviews</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size6of12">
    <div class="o-box  o-box--looser  u-bgGrayDarkest  u-colorGrayLightest">
      <h2 class="u-colorWhite">Accelerate design reviews</h2>
      <p>Traditional design reviews are tedious, and centralizing feedback from all stakeholders is critical for avoiding costly changes during construction.</p>
    </div>
  </div>

</div>

<div class="o-grid  o-grid--alignCenter">

  <div class="o-grid-cell  u-sizeFull">
    <h2>Feature Cards</h2>
    <p>These should only ever span in 3rds, the length of 4 of 8 columns or
      4 of 12 columns.</p>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size4of12">
    <div class="o-box  o-box--loose  u-bgGrayLightest  u-colorGrayDarker">
      <h6 class="u-colorBlackish">Accelerate design reviews</h6>
      <p>Traditional design reviews are tedious, and centralizing</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size4of12">
    <div class="o-box  o-box--loose  u-bgGrayDark  u-colorGrayLightest">
      <h6 class="u-colorWhite">Accelerate design reviews</h6>
      <p>Traditional design reviews are tedious, and centralizing</p>
    </div>
  </div>

  <div class="o-grid-cell  u-size4of8  u-size4of12">
    <div class="o-box  o-box--loose  u-bgGrayDarkest  u-colorGrayLightest">
      <h6 class="u-colorWhite">Accelerate design reviews</h6>
      <p>Traditional design reviews are tedious, and centralizing</p>
    </div>
  </div>

</div>

<div class="o-grid">
  <div class="o-grid-cell  u-md-size4of8  u-lg-size4of12">
    <a href="#" class="u-block  u-colorGrayDarkest">
      <div class="o-box  u-mb4  u-shadow2  u-borderAll  u-border2  u-borderTrans  u-bgGrayLightest  u-radius  u-hoverShadow4  u-hoverBorderPrimary">
        <img class="u-block  u-mxAuto  u-mb5" src="https://placehold.it/217x169" alt="">
        <h2 class="u-caps  u-colorBlackish">Architect</h2>
        <span class="cta  u-colorPrimary">Learn More</span>
      </div>
    </a>
  </div>

  <div class="o-grid-cell  u-md-size4of8  u-lg-size4of12">
    <a href="#" class="u-block  u-colorGrayDarkest">
      <div class="o-box  u-mb4  u-shadow2  u-borderAll  u-border2  u-borderTrans  u-bgGrayLightest  u-radius  u-hoverShadow4  u-hoverBorderPrimary">
        <img class="u-block  u-mxAuto  u-mb5" src="https://placehold.it/217x169" alt="">
        <h2 class="u-caps  u-colorBlackish">Engineer</h2>
        <span class="cta  u-colorPrimary">Learn More</span>
      </div>
    </a>
  </div>

  <div class="o-grid-cell  u-md-size4of8  u-lg-size4of12">
    <a href="#" class="u-block  u-colorGrayDarkest">
      <div class="o-box  u-mb4  u-shadow2  u-borderAll  u-border2  u-borderTrans  u-bgGrayLightest  u-radius  u-hoverShadow4  u-hoverBorderPrimary">
        <img class="u-block  u-mxAuto  u-mb5" src="https://placehold.it/217x169" alt="">
        <h2 class="u-caps  u-colorBlackish">Owner</h2>
        <span class="cta  u-colorPrimary">Learn More</span>
      </div>
    </a>
  </div>

  <div class="o-grid-cell  u-md-size4of8  u-lg-size4of12">
    <a href="#" class="u-block  u-colorGrayDarkest">
      <div class="o-box  u-mb4  u-shadow2  u-borderAll  u-border2  u-borderTrans  u-bgGrayLightest  u-radius  u-hoverShadow4  u-hoverBorderPrimary">
        <img class="u-block  u-mxAuto  u-mb5" src="https://placehold.it/217x169" alt="">
        <h2 class="u-caps  u-colorBlackish">General Contractor</h2>
        <span class="cta  u-colorPrimary">Learn More</span>
      </div>
    </a>
  </div>

  <div class="o-grid-cell  u-md-size4of8  u-lg-size4of12">
    <a href="#" class="u-block  u-colorGrayDarkest">
      <div class="o-box  u-mb4  u-shadow2  u-borderAll  u-border2  u-borderTrans  u-bgGrayLightest  u-radius  u-hoverShadow4  u-hoverBorderPrimary">
        <img class="u-block  u-mxAuto  u-mb5" src="https://placehold.it/217x169" alt="">
        <h2 class="u-caps  u-colorBlackish">Subcontractor</h2>
        <span class="cta  u-colorPrimary">Learn More</span>
      </div>
    </a>
  </div>

  <div class="o-grid-cell  u-md-size4of8  u-lg-size4of12">
    <a href="#" class="u-block  u-colorGrayDarkest">
      <div class="o-box  u-mb4  u-shadow2  u-borderAll  u-border2  u-borderTrans  u-bgGrayLightest  u-radius  u-hoverShadow4  u-hoverBorderPrimary">
        <img class="u-block  u-mxAuto  u-mb5" src="https://placehold.it/217x169" alt="">
        <h2 class="u-caps  u-colorBlackish">Estimator</h2>
        <span class="cta  u-colorPrimary">Learn More</span>
      </div>
    </a>
  </div>
</div>