Pit Viper

v1.90.0

Pit Viper

v1.90.0
v1 / v2

  • Home
  • Components
  • Type

Type

Display Type

Compare prices before you get care.

.pv-display-1 48px -> 64px/76px

Compare prices before you get care.

.pv-display-2 40px -> 48px/56px

Compare prices before you get care.

.pv-display-3 32px -> 36px/44px

Compare prices before you get care.

.pv-display-4 24px/32px

HTML
<p class="pv-display-1">Compare prices before you get care.</p>
<p class="pv-display-2">Compare prices before you get care.</p>
<p class="pv-display-3">Compare prices before you get care.</p>
<p class="pv-display-4">Compare prices before you get care.</p>

Headings

Take advantage of hospital price transparency.

.pv-heading-1 44px/52px

Take advantage of hospital price transparency.

.pv-heading-2 36px/44px

Take advantage of hospital price transparency.

.pv-heading-3 28px/32px

Take advantage of hospital price transparency.

.pv-heading-4 24px/28px

Take advantage of hospital price transparency.

.pv-heading-5 20px/24px

HTML
<p class="pv-heading-1">Take advantage of hospital price transparency.</p>
<p class="pv-heading-2">Take advantage of hospital price transparency.</p>
<p class="pv-heading-3">Take advantage of hospital price transparency.</p>
<p class="pv-heading-4">Take advantage of hospital price transparency.</p>
<p class="pv-heading-5">Take advantage of hospital price transparency.</p>

Titles

Use titles for semi-bold body text with tighter line height.

Frank Franklin

.pv-text-title-xl 22px/28px

Frank Franklin

.pv-text-title-lg 20px/24px

Frank Franklin

.pv-text-title-md 18px/24px

Frank Franklin

.pv-text-title-sm 16px/20px

Frank Franklin

.pv-text-title-xs 14px/20px

HTML
<p class="pv-text-title-xl">Frank Franklin</p>
<p class="pv-text-title-lg">Frank Franklin</p>
<p class="pv-text-title-md">Frank Franklin</p>
<p class="pv-text-title-sm">Frank Franklin</p>
<p class="pv-text-title-xs">Frank Franklin</p>

Eyebrows

Straight from the source

.pv-text-eyebrow-lg 14px/20px

Straight from the source

.pv-text-eyebrow-sm 12px/16px

HTML
<p class="pv-text-eyebrow-lg">Straight from the source</p>
<p class="pv-text-eyebrow-sm">Straight from the source</p>

Body Text

Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.

.pv-text-body-xl 22px/32px

Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.

.pv-text-body-lg 20px/32px

Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.

.pv-text-body-md 18px/28px

Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.

.pv-text-body-sm 16px/24px

Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.

.pv-text-body-xs 14px/20px

HTML
<p class="pv-text-body-xl">Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.</p>
<p class="pv-text-body-lg">Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.</p>
<p class="pv-text-body-md">Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.</p>
<p class="pv-text-body-sm">Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.</p>
<p class="pv-text-body-xs">Just like you wouldn’t buy a car, rent an apartment or even order food without knowing the cost, you shouldn’t pay blindly for healthcare. Now you can compare prices before showing up for treatment.</p>

Emphasis

Subdued text uses a lighter color to reduce emphasis independent of font size and weight.

.pv-text-subdued

Strong text uses a bolder font weight to increase emphasis independent of font size and color.

Use <strong> on body text

HTML
<p class="pv-text-subdued">Subdued text uses a lighter color to reduce emphasis independent of font size and weight.</p>
<p><strong>Strong text uses a bolder font weight to increase emphasis independent of font size and color.</strong></p>

Text Alignment

Use text alignment utilities to center or right-align text. In rare cases where the text is centered by default, you may need to use pv-text-left to reset text alignment back to the left.

Example
Text left-aligned, centered, and right-aligned.

Here is some left-aligned text.

Here is some centered text.

Here is some right-aligned text.

HTML
<p class="pv-text-left">Here is some left-aligned text.</p>
<p class="pv-text-center">Here is some centered text.</p>
<p class="pv-text-right">Here is some right-aligned text.</p>

Uppercase

Use the uppercase utility to transform text to all uppercase rather than hard-coding it as all caps.

Example
Text transformed to uppercase.

This text is uppercase.

HTML
<p class="pv-text-uppercase">This text is uppercase.</p>

Definition

Use the dfn element to indicate additional information is present in a tooltip.

Example
A definition element.

+8

HTML
<p><dfn title="+8 additional users">+8</dfn></p>

Blockquote

Use the blockquote element to indicate an excerpt of text from another source.

Example
A blockquote element.

Insura PPO Agreement - NPFNE28 1

Insura PPO Base Agreement (insura-ppo-base-4-23.pdf - Page 44) 2

...am adipiscing. Curabitur turpis. Pellentesque auctor neque nec urna. Vestibulum eu odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia...

HTML
<blockquote>
<p class="pv-flex">
<strong>Insura PPO Agreement - NPFNE28</strong>
<span class="pv-tag-green">1</span>
</p>
<p class="pv-flex">
<span><strong>Insura PPO Base Agreement</strong> (insura-ppo-base-4-23.pdf - Page 44)</span>
<span class="pv-tag-green">2</span>
</p>
<p>...am adipiscing. Curabitur turpis. Pellentesque auctor neque nec urna. Vestibulum eu odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia...</p>
</blockquote>

Styled Blockquote

Use Pit Viper’s blockquote styling for marketing content.

Example
A styled blockquote.

It's really been the first time we've had actual data to point to and back up broader recommendations.

— Casey, OneOncology
HTML
<div class="pv-surface-brand pv-text-inverse">
<blockquote class="pv-blockquote">
<p>It's really been the first time we've had actual data to point to and back up broader recommendations.</p>
<cite>&mdash; Casey, OneOncology</cite>
</blockquote>
</div>

Use .pv-link-external to show an icon indicating that the link will open in a new tab. Use pv-text-inverse on dark backgrounds to set the arrow color to white. Used in conjunction with target="_blank".

Example
New tab indicators on default and inverse backgrounds.

HTML
<p class="pv-surface pv-inset-square pv-stack pv-bordered"><a href="" target="_blank" class="pv-link-external">Test</a></p>
<p class="pv-surface-brand pv-text-inverse pv-inset-square"><a href="" target="_blank" class="pv-link-external">Test</a></p>

Lists

Default

Use the ul element for a default unordered list, or ol for an ordered list.

Example
Default lists using only the ul and ol elements.

  • This is an unordered list
  • It uses bullet points
  • Pretty exciting, right?
  1. This is an ordered list
  2. It uses numbers
  3. Not as exciting but still pretty cool

Removing List Styling

Sometimes you may want the semantics of a list without the styling. Add the role="list" attribute to remove the bullets and default padding from an unordered list.

Example
A group of elements in an ordered list with styling removed.

  • This is an unordered list
  • The styling has been removed
  • By adding the `role="list"` attribute
HTML
<ul role="list">
<li>This is an unordered list</li>
<li>The styling has been removed</li>
<li>By adding the `role="list"` attribute</li>
</ul>

List Styles

Current Step

For a multi-step process, add aria-current="step" to announce a singular current step for screenreaders (visually it should look no different from completed, past steps), and data-list-incomplete to display future or incomplete steps.

Example
Steps 1 and 2 are complete and current, respectively.

  1. Start by selecting the type of organizations you’d like to compare.
  2. Confirm a data source. If you need to compare Medicare and Medicaid rates, switch to the Hospital Database.
  3. Select the organizations you’d like to compare. If it’s helpful, also choose an organization to focus on.
HTML
<ol role="list" style="max-width: 360px">
<li data-list-style="display">Start by selecting the type of organizations you’d like to compare.</li>
<li data-list-style="display" aria-current="step">Confirm a data source. If you need to compare Medicare and Medicaid rates, switch to the Hospital Database.</li>
<li data-list-style="display" data-list-incomplete>Select the organizations you’d like to compare. If it’s helpful, also choose an organization to focus on.</li>
</ol>

Display Style

Use data-list-style="display" to replace the default list numbers with our headline font.

Example
An ordered list with a display style.

  1. Start by selecting the type of organizations you’d like to compare.
  2. Confirm a data source. If you need to compare Medicare and Medicaid rates, switch to the Hospital Database.
  3. Select the organizations you’d like to compare. If it’s helpful, also choose an organization to focus on.
HTML
<ol role="list" style="max-width: 360px">
<li data-list-style="display">Start by selecting the type of organizations you’d like to compare.</li>
<li data-list-style="display">Confirm a data source. If you need to compare Medicare and Medicaid rates, switch to the Hospital Database.</li>
<li data-list-style="display">Select the organizations you’d like to compare. If it’s helpful, also choose an organization to focus on.</li>
</ol>

Dos and Don’ts List

Use data-list-style="do" or data-list-style="dont" to replace bullet points with do and don’t icons, respectively.

Example
A dos and don’ts list.

  • We give consumers insight into the price of healthcare.
  • We enable the adoption of price transparency.
  • We build products for efficient, patient-centric transactions.
  • We encourage competition with accessible, usable data.
  • We don't pick sides or play favorites with healthcare organizations.
  • We don't advise in contract negotiations.
  • We don't take investments from providers and payers.
HTML
<ul>
<li data-list-style="do">We give consumers insight into the price of healthcare.</li>
<li data-list-style="do">We enable the adoption of price transparency.</li>
<li data-list-style="do">We build products for efficient, patient-centric transactions.</li>
<li data-list-style="do">We encourage competition with accessible, usable data.</li>
<li data-list-style="dont">We don't pick sides or play favorites with healthcare organizations.</li>
<li data-list-style="dont">We don't advise in contract negotiations.</li>
<li data-list-style="dont">We don't take investments from providers and payers.</li>
</ul>

Checkmarks

Use data-list-style="check" to replace the default bullets with checkmarks.

Example
A list with checkmark styling.

  • All affiliated providers are in network
  • This service does not require pre-authorization
  • This service is medically necessary for patient
HTML
<ul data-list-style="check" class="pv-flow" style="--flow-size: .5rem">
<li>All affiliated providers are in network</li>
<li>This service does not require pre-authorization</li>
<li>This service is medically necessary for patient</li>
</ul>

Keyboard

Use the keyboard class to indicate a keyboard command.

Example
A keyboard command.

Hold shift to select consecutive orgs.

HTML
<p>Hold <kbd class="pv-kbd">shift</kbd> to select consecutive orgs.</p>

Mark

Use the mark class to highlight a span of text.

Example
A mark.

11 Payment for Services. Provider shall be compensated by Customer for Covered Services at the lesser of Provider’s billed charges or the rates set forth in Schedule 3.1 (the “Allowed Amount”), less applicable claim submission timeframe of 90 Days payment by Provider, Provider shall provide Turquoise Health with necessary EFT information and have and maintain the ability to electronically accept EOP/Form 835.

HTML
<p>11 Payment for Services. Provider shall be compensated by Customer for Covered Services at the lesser of Provider’s billed charges or the rates set forth in Schedule 3.1 (the “Allowed Amount”), less applicable claim submission timeframe of <mark class="pv-mark pv-flex-inline" style="--flex-gap: .25rem;"><span>90 Days</span> <svg aria-hidden="true" class="pv-icon">
<title>edit</title>
<use xlink:href="#edit"></use>
</svg></mark> payment by Provider, Provider shall provide Turquoise Health with necessary EFT information and have and maintain the ability to electronically accept EOP/Form 835.</p>