Box

--ui-box-box-shadow: var(--ui-shared-box-shadow);
--ui-box-border: none;
--ui-box-border-radius: var(--ui-shared-border-radius);
--ui-box-padding: var(--ui-shared-content-padding);
--ui-box-background: #fff;
--ui-box-separator-border: 2px solid var(--ui-color-grey-100);

<div class="ui-box">
  Content
</div>

<div class="ui-box">
  <div class="--top">
    Content for top section
  </div>
  <div>
    Content Here
  </div>
  <div class="--bottom">
    Content for bottom section
  </div>
</div>

<div class="ui-box">
  <form>
    <div class="--top">
      Content for top section
    </div>
    <div>
      Inputs here...
    </div>
    <div class="--bottom">
      Content for bottom section
    </div>
  </form>
</div>

<div class="ui-box">
  <div class="--top">
    <div class="ui-titlepair">
      <div class="--title">
        These Are Title Pairs
      </div>
      <div class="--description">
        Which are very useful for labelling new sections
      </div>
    </div>
  </div>
  <div>
    Content Here
  </div>
  <div class="--bottom">
    Content for bottom section
  </div>
</div>