Pit Viper

v1.90.0

Pit Viper

v1.90.0
v1 / v2

  • 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

F

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

H

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

H

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>