Home
Layouts
Two Row

Two Row

Two Row Layout

This layout solves a very specific use case where you have a .pv-scroller nested inside another layout and the scroller needs an area below it that only takes up as much room as its content needs.

Example
A scrolling box of comments with a text input below for adding comments.

Comments

Frank Franklin

Cherry Creek Network

Hey Harry, we're all set — everything looks good, thanks! Let's get 18 in when you're back in town.

Oct 22 10:00AM

Harold Harrison

Insura

Frank, we updated the numbers. Take a look when you get a sec and let us know, thanks.

Oct 21 5:08PM

Harold Harrison

Insura

Updated ETA – Taking a look ASAP, by EOD. FYI it's BAU, checking with CFO - TBD...

Oct 21 9:00AM

Notify everybody

Manage

HTML

<div class="pv-layout-two-row">
  <div class="pv-scroller pv-inset-square-24 pv-flow-24">
    <h4 class="pv-heading-5">Comments</h4>
    <div class="pv-text-body-xs pv-flow-8">
      <div class="pv-flex">
        <div class="pv-avatar">F</div>
        <div>
          <p class="pv-text-body-sm"><strong>Frank Franklin</strong></p>
          <p class="pv-text-subdued ">Cherry Creek Network</p>
        </div>
      </div>
      <p>Hey Harry, we're all set &mdash; everything looks good, thanks! Let's get 18 in when you're back in town.</p>
      <p class="pv-text-subdued">Oct 22 10:00AM</p>
    </div>
    <div class="pv-text-body-xs pv-flow-8">
      <div class="pv-flex">
        <div class="pv-avatar">H</div>
        <div>
          <p class="pv-text-body-sm"><strong>Harold Harrison</strong></p>
          <p class="pv-text-subdued ">Insura</p>
        </div>
      </div>
      <p>Frank, we updated the numbers. Take a look when you get a sec and let us know, thanks.</p>
      <p class="pv-text-subdued">Oct 21 5:08PM</p>
    </div>
    <div class="pv-text-body-xs pv-flow-8">
      <div class="pv-flex">
        <div class="pv-avatar">H</div>
        <div>
          <p class="pv-text-body-sm"><strong>Harold Harrison</strong></p>
          <p class="pv-text-subdued ">Insura</p>
        </div>
      </div>
      <p>Updated ETA &ndash; Taking a look ASAP, by EOD. FYI it's BAU, checking with CFO - TBD...</p>
      <p class="pv-text-subdued">Oct 21 9:00AM</p>
    </div>
  </div>
  <div class="pv-inset-square-16">
    <div class="pv-space-between pv-text-body-xs pv-stack-4">
      <p>Notify   <strong>everybody</strong></p>
      <a href="">Manage</a>
    </div>
    <div class="pv-relative">
      <input type="text" class="pv-input-text pv-input-padded-end">
      <button type="button" class="pv-button-icon"><svg aria-hidden="true" class="pv-icon-20"><use xlink:href="#send"></use></svg><span class="pv-visually-hidden">Send</span></button>
    </div>
  </div>
</div>