Pit Viper

v1.90.0

Pit Viper

v1.90.0
v1 / v2

  • Home
  • Utilities
  • Visual

Visual

Visual utilities allow you to adjust display values, add borders, or otherwise declare visual styles of an element not covered by other utility classes.

Blur

Use .pv-blur to blur the contents of a container. You can override the value of the blur filter with the custom property, --blur.

Custom Property Default Value Description
--blur 5px Blur value

Example
A container with the contents blurred.

Has anyone seen my glasses?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nobis eligendi ullam! Laboriosam libero cupiditate expedita dicta veritatis, ullam labore suscipit perspiciatis laudantium. Minus tenetur odit quam repudiandae eligendi hic.

HTML 
<div class="pv-surface pv-inset-square pv-blur" style="--blur: 3px">
  <p class="pv-heading-3">Has anyone seen my glasses?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nobis eligendi ullam! Laboriosam libero cupiditate expedita dicta veritatis, ullam labore suscipit perspiciatis laudantium. Minus tenetur odit quam repudiandae eligendi hic.</p>
</div>

Borders

Use the .pv-bordered utility to add a border and 2px radius to an element. Use .pv-bordered-md for a 5px radius, .pv-bordered-lg for a 12px radius, or you can override the default radius with a custom property, --radius.

Custom Property Default Value Description
--radius 2px Border radius

Example
And element with a default border (2px radius), an element with a medium border (5px radius) and an element with a large border (12px radius).

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

HTML 
<div class="pv-bordered pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-bordered-md pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-bordered-lg pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>

Border Flow

Use border flow to add a top border in to the children of a container. You can use a custom property to override the default border color.

Example
An accordion with a border flow container.

Billing Class

Institutional

In-patient and out-patient rates from hospitals or healthcare organizations. Recommended default source option.

Professional

Medical service and treatment rates from physicians or healthcare professionals. Much larger database, but could increase the size of the extract considerably.

HTML 
<div class="pv-surface-brand-gradient pv-text-inverse pv-inset-square">
  <details class="pv-accordion pv-bordered">
    <summary>Billing Class</summary>
    <div class="pv-border-flow pv-expand" style="--expand: 1rem; padding-bottom: 0">
      <div class="pv-inset-squish-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Institutional</p>
        <p class="pv-text-subdued">In-patient and out-patient rates from hospitals or healthcare organizations. Recommended default source option.</p>
      </div>
      <div class="pv-inset-squish-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Professional</p>
        <p class="pv-text-subdued">Medical service and treatment rates from physicians or healthcare professionals. Much larger database, but could increase the size of the extract considerably.</p>
      </div>
    </div>
  </details>
</div>

Single Borders

Use single border utilities to add a border only to one side of an element.

Example
Elements with a border on one of four sides.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

HTML 
<div class="pv-border-top pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-border-right pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-border-bottom pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-border-left pv-surface pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>

Border Color

Use border color utilities to override the color of borders, usually paired with a different surface color.

.pv-border-gradient is a little different. It’s implementation prevents it from working in combination with surface utilities. Background color, border radius and border width can all be overridden with custom properties.

Custom Property Default Value Description
--background #FFFFFF Background color of the container
--border-width 1px Border width
--radius 5px Border radius

Example
A bordered container with a different color from the default.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

HTML 
<div class="pv-bordered-md pv-border-accent pv-surface-brand-accent pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-bordered-md pv-border-warning pv-surface-warning pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>
<div class="pv-border-gradient pv-inset-square">
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>

Border Radius

Use radius utilities to apply a border radius to a container.

Classes Border Radius
.pv-radius-sm, .pv-radius-sm-top, .pv-radius-sm-bottom 2px
.pv-radius, .pv-radius-top, .pv-radius-bottom 5px
.pv-radius-lg, .pv-radius-lg-top, .pv-radius-lg-bottom 12px

Example
A container with top border radius of 5px.

Small radius on all corners

Small top radius only

Small bottom radius only

Medium radius on all corners

Medium top radius only

Medium bottom radius only

Large radius on all corners

Large top radius only

Large bottom radius only

HTML 
<div class="pv-radius-sm pv-surface-brand pv-inset-square  pv-text-inverse">
  <p>Small radius on all corners</p>
</div>  
<div class="pv-radius-sm-top pv-surface-brand pv-inset-square pv-text-inverse">
  <p>Small top radius only</p>
</div>
<div class="pv-radius-sm-bottom pv-surface-brand pv-inset-square pv-text-inverse">
  <p>Small bottom radius only</p>
</div>
<div class="pv-radius pv-surface-brand pv-inset-square  pv-text-inverse">
  <p>Medium radius on all corners</p>
</div>  
<div class="pv-radius-top pv-surface-brand pv-inset-square pv-text-inverse">
  <p>Medium top radius only</p>
</div>
<div class="pv-radius-bottom pv-surface-brand pv-inset-square pv-text-inverse">
  <p>Medium bottom radius only</p>
</div>
<div class="pv-radius-lg pv-surface-brand pv-inset-square  pv-text-inverse">
  <p>Large radius on all corners</p>
</div>  
<div class="pv-radius-lg-top pv-surface-brand pv-inset-square pv-text-inverse">
  <p>Large top radius only</p>
</div>
<div class="pv-radius-lg-bottom pv-surface-brand pv-inset-square pv-text-inverse">
  <p>Large bottom radius only</p>
</div>

Expand

Use the expand utility to break an element outside of the padding of its container. Primarily used with tables to align text and extend borders to the edges of the screen.

Custom Property Default Value Description
--expand 32px Amount to expand on each side

Expanded Table

Contract Payer Effective Status
CCH Eastport - CN
Single Case Agreement 		Insura Jan 22, 2021 Negotiating
Kyphoplasty - 10
Network Agreement 		Great Lakes Medical Alliance Jan 22, 2021 Draft
ACL Repair - 673
Single Case Agreement 		Steam Insurance Jan 22, 2021 Negotiating
HTML 
<p class="pv-heading-4">Expanded Table</p>
  <table class="pv-table pv-table-bordered pv-expand" style="--expand: 1rem">
    <thead>
      <tr>
        <th>Contract</th>
        <th>Payer</th>
        <th>Effective</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="#">CCH Eastport - CN</a><br>
          <span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
        </td>
        <td>Insura</td>
        <td>Jan 22, 2021</td>
        <td><span class="pv-status-yellow">Negotiating</span></td>
      </tr>
      <tr>
        <td>
          <a href="#">Kyphoplasty - 10</a><br>
          <span class="pv-text-subdued pv-text-body-xs">Network Agreement</span>
        </td>
        <td>Great Lakes Medical Alliance</td>
        <td>Jan 22, 2021</td>
        <td><span class="pv-status-red">Draft</span></td>
      </tr>
      <tr>
        <td>
          <a href="#">ACL Repair - 673</a><br>
          <span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
        </td>
        <td>Steam Insurance</td>
        <td>Jan 22, 2021</td>
        <td><span class="pv-status-yellow">Negotiating</span></td>
      </tr>
    </tbody>
  </table>

Hide

Use the hide utility to add display: none to an element, removing it from the flow of the document.

Example
A container using the hide utility. View the source to see the hidden content.

You won't see this because it's hidden.
HTML 
<span class="pv-hide">You won't see this because it's hidden.</span>

Hide Inactive

Use the hide inactive utility on a parent container to hide all direct children that do not have the data-active attribute.

Example
A list of items where only the active item is displayed.

  • This item is hidden until `data-active` is applied.
  • This item has `data-active` applied.
  • This item is hidden until `data-active` is applied.
HTML 
<ul class="pv-hide-inactive">
  <li>This item is hidden until `data-active` is applied.</li>
  <li data-active>This item has `data-active` applied.</li>
  <li>This item is hidden until `data-active` is applied.</li>
</ul>

Hide on Small/Large

Add -on-small or -on-large to hide an element on viewports smaller or larger than the medium breakpoint, respectively.

Example
Two containers using hide-on-small and hide-on-large. Only one container will be visible depending on the width of the viewport.

This will only appear when the viewport is above ⬆️ the breakpoint.
This will only appear when the viewport is below ⬇️ the breakpoint.
HTML 
<div class="pv-hide-on-small">This will only appear when the viewport is above ⬆️ the breakpoint.</div>
<div class="pv-hide-on-large">This will only appear when the viewport is below ⬇️ the breakpoint.</div>

Visually Hidden

Use .pv-visually-hidden when text should only be accessible to screen readers or other assistive technology. Often this is the case with using icons that are buttons, and there is no space for associated text.

Example
A button with only an icon, and visually hidden text.

HTML 
<button type="button" class="pv-button-primary pv-inset-square">
  <svg aria-hidden="true" class="pv-icon-24">
    <use xlink:href="#zoom-in"></use>
  </svg>
  <span class="pv-visually-hidden">Zoom In</span>
</button>

Inline Block

Add pv-inline-block to have the broswer treat an element like a line of text, but have access to padding and margin capabilities. This is most likely used for inlining SVGs.

Example
An inlined SVG.

Follows CMS Display Guidelines

HTML 
<p class="pv-text-eyebrow-sm pv-flex" style="--flex-gap: 2px;">
  Follows <a class="pv-text-inherit pv-link-external" target="_blank" href="https://cmsgov.github.io/hpt-tool/txt-generator/">CMS Display Guidelines</a>
  <svg class="pv-icon-10 pv-inline-block pv-text-brand" aria-hidden="true"><use xlink:href="#check"></use></svg>
</p>

Line Clamp

Use the line clamp utility to limit the length of a block of text to a set number of lines. You can toggle this class to display the full text. Use the custom property --lines to override the default number of lines shown.

Note: A clamped container cannot contain block elements (like paragraphs) because Safari is dumb.

Custom Property Default Value Description
--lines 3 Number of lines of text to show

Example
A block of text clamped to three lines. Clicking on the text toggles the clamp.

The Price Transparency Rule is a federal law that went into effect January 2021. This law requires all hospitals to make their prices publicly available via a machine-readable file (MRF). There are a couple of other laws at play here, but essentially, price transparency is achieved by making the costs associated with medical services public. Our data is sourced from the machine-readable files posted by the hospitals themselves as a part of compliance with the government's Price Transparency Rule. While Turquoise Health is working towards a future where providers and payers collaborate on our platform to create 100% upfront price certainty, it's important to note the limitations and errors that are sometimes found in this data.

HTML 
<p class="pv-flow pv-line-clamp" onclick="this.classList.toggle('pv-line-clamp')">
  The Price Transparency Rule is a federal law that went into effect January 2021. This law requires all hospitals to make their prices publicly available via a machine-readable file (MRF). There are a couple of other laws at play here, but essentially, price transparency is achieved by making the costs associated with medical services public. Our data is sourced from the machine-readable files posted by the hospitals themselves as a part of compliance with the government's Price Transparency Rule. While Turquoise Health is working towards a future where providers and payers collaborate on our platform to create 100% upfront price certainty, it's important to note the limitations and errors that are sometimes found in this data.
</p>

Margin Auto

Use the margin-auto utility to horizontally center a block element.

Example
A button centered using margin-auto.

HTML 
<button type="button" class="pv-button-primary pv-margin-auto">Button</button>

Max Content

Use the max-content utility to set the width of an element to the maximum width of the content within. Useful on the rare occasion you want an element’s width to behave like an inline element but retain its display property (block/flex).

Example
A link with button styling with max-content added.

View All Features
HTML 
<a href="#" class="pv-button-primary pv-max-content">View All Features</a>

No Wrap

Use the nowrap utility to prevent text from wrapping inside of a container, commonly used in table cells.

Example
A table with a first column using the nowrap utility.

Contract Provider Effective Modified Status Actions
CCH Eastport - CN
Single Case Agreement 		Stonybrook Memorial Jan 22, 2021 Jan 22, 2021 Negotiating
Kyphoplasty - 010
Network Agreement 		ARK Family Health Jan 22, 2021 Jan 22, 2021 Draft
HTML 
<table class="pv-table pv-table-bordered">
  <thead class="pv-inset-square">
    ...
  </thead>
  <tbody>
    <tr>
      <td class="pv-nowrap">
        <a href="#">CCH Eastport - CN</a><br>
        <span class="pv-text-subdued pv-text-body-xs">Single Case Agreement</span>
      </td>
      ...
    </tr>
  </tbody>
</table>

Outline Warning

Use the outline warning utility to add a yellow outline to an element. It will overlap any borders around it, even those coming from parent or sibling elements.

Example
A container with a warning outline, inside a bordered container and next to a sibling element with a right border.

Priced

789

Adjudicated

566

Aging

412

Review
HTML 
<div class="pv-inset-square-32 pv-space-between pv-surface pv-flex-item pv-outline-warning" style="--flex-align: flex-start">
  <div>
    <p class="pv-stack-4">Aging</p>
    <p class="pv-heading-1">412</p>
  </div>
  <div class="pv-flex pv-text-warning" style="--flex-gap: 6px">
    <a href="" class="pv-text-inherit">Review</a>
    <svg aria-hidden="true" class="pv-icon">
      <title>alert-circle</title>
      <use xlink:href="#alert-circle"></use>
    </svg>
  </div>
</div>

Relative Positioning

Use the relative utility to establish a positioning context for absolute- or fixed-position children.

Example
An absolute positioned button inside a relative positioned container.

HTML 
<div class="pv-relative" style="height: 200px">
  <button type="button" class="pv-button-primary" style="position: absolute; top: 0; right: 0;">Button</button>
</div>

Scroll

Use the scroll utility on a container to automatically add a horizontal scrollbar if the container’s content exceeds with width of the container.

Example
A wide table inside of a container using the scroll utility.

Contract Provider Payer Effective Modified Status Actions
CCH Eastport - CN
Single Case Agreement 		Stonybrook Memorial Insura Jan 22, 2021 Jan 22, 2021 Negotiating
Kyphoplasty - 010
Network Agreement 		ARK Family Health Great Lakes Medical Alliance Jan 22, 2021 Jan 22, 2021 Draft
HTML 
<div class="pv-scroll">
  <table class="pv-table pv-table-bordered">
    ...
  </table>
</div>

Shadow

Use the shadow utility to add a box-shadow to an element.

Example
A bordered container with a shadow.

You can put a price on healthcare.

Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.

HTML 
<div class="pv-bordered pv-surface pv-inset-squish pv-shadow">
  <p class="pv-heading-3 pv-stack-8">You can put a price
on healthcare.</p>
  <p>Just like you wouldn’t buy a car, rent an apartment, or even order food without knowing the cost, you shouldn’t just pay for healthcare.</p>
</div>

Shimmer

Use .pv-shimmer to indicate that elements are loading.

Custom Property Default Value Description
--shimmer-rgb 255, 255, 255 RGB value for the shimmer gradient. Needs to match the container background.

Example
A shimmering container.

Still loading...

Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nobis eligendi ullam! Laboriosam libero cupiditate expedita dicta veritatis, ullam labore suscipit perspiciatis laudantium. Minus tenetur odit quam repudiandae eligendi hic.

HTML 
<div class="pv-container-sm pv-surface pv-bordered pv-inset-square pv-shimmer">
  <p class="pv-heading-3">Still loading...</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus nobis eligendi ullam! Laboriosam libero cupiditate expedita dicta veritatis, ullam labore suscipit perspiciatis laudantium. Minus tenetur odit quam repudiandae eligendi hic.</p>
</div>

Sticky

Use .pv-sticky, or [data-sticky] for interactions, to make an element sticky. For table headings, it is recommended to use [data-sticky], as there are properties that get applied specifically to th elements.

You can override the top value with a custom property. Use this to adjust the vertical positioning of the header if it’s not appearing where it should. Use --top: unset to use the --bottom property instead.

Custom Property Default Value Description
--top 0px The top position of the sticky header
--bottom unset The bottom position of the sticky header. unset makes sure it doesn't conflict with top property

Example
A topbar navigation that is sticky.

  1. Oh, the styles outside are frightful
  2. But the nav is so delightful
  3. And since we've no place to go
  4. Let it scroll
  5. Let it scroll
  6. Let it scroll
  7. ❄️
HTML 
<div class="pv-container-sm pv-surface pv-bordered" style="overflow-x: auto; max-height: 200px;">
    <nav class="pv-flow-8 pv-space-between pv-inset-squish-16 pv-surface pv-border-bottom pv-sticky">
      <a href="#" class="pv-flex-item">
        <img src="https://static.turquoise.health/static/images/logo.svg" alt="Turquoise Health">
      </a>
      <a href="#">Need Help?</a>
    </nav>
    <ol class="pv-flow-16 pv-inset-square-24 pv-text-center" role="list">
      <li>Oh, the styles outside are frightful</li>
      <li>But the nav is so delightful</li>
      <li>And since we've no place to go</li>
      <li>Let it scroll</li>
      <li>Let it scroll</li>
      <li>Let it scroll</li>
      <li>❄️</li>
    </ol>
  </div>

Truncate

Use the truncate utility to prevent text from wrapping and displaying ellipsis in place of any overflowing text.

You can use the title attribute to include the full truncated text so when a user hovers over it they can see the full content of the text in a native tooltip.

By default the text will fit the available space before truncating, but you can override the max-width to make it shorter.

Custom Property Default Value Description
--max-width 100% Width of the text before it is truncated

Example
A block of truncated text in a container with a max-width of 300px.

It's your right to know the cost of healthcare. Take advantage of hospital price transparency by comparing the costs of services and providers near you.

HTML 
<p class="pv-truncate" title="It's your right to know the cost of healthcare. Take advantage of hospital price transparency by comparing the costs of services and providers near you.">It's your right to know the cost of healthcare. Take advantage of hospital price transparency by comparing the costs of services and providers near you.</p>

Width

Full Width

Use the full-width utility to set the width of an element to 100%.

Example
A button set to full-width.

HTML 
<button type="button" class="pv-button-primary pv-full-width">Button</button>

Responsive Width

Use .pv-width-responsive to control an element’s min-width at different screen sizes.

Custom Property Default Value Description
--min-width-small auto Set min-width for screen sizes under 768px
--min-width-large auto Set min-width for screen sizes over or equal to 768px

Example
A dropdown with different min-widths above and below 768px.

123,456 Total Hospitals

HTML 
<div class="pv-flex-responsive" style="--flex-align: center;">
  <pv-dropdown-auto-close class="pv-dropdown pv-width-responsive" style="--min-width-small: 100%; --min-width-large: 240px;">
    <button type="button" class="pv-select-multiple pv-input-small pv-text-default" onclick="this.toggleAttribute('data-dropdown')">All States</button>
    <div class="pv-popover pv-full-width">
      <ul role="list" class="pv-popover-list">
        <li>
          <a href="#">All States</a>
        </li>
        <li>
          <a href="#">Texas</a>
        </li>
      </ul>
    </div>
  </pv-dropdown-auto-close>
  <p>123,456 Total Hospitals</p>
</div>