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>— Casey, OneOncology</cite>
</blockquote>
</div>
Links Opening in New Tab
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?
- This is an ordered list
- It uses numbers
- 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.
- Start by selecting the type of organizations you’d like to compare.
- Confirm a data source. If you need to compare Medicare and Medicaid rates, switch to the Hospital Database.
- 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.
- Start by selecting the type of organizations you’d like to compare.
- Confirm a data source. If you need to compare Medicare and Medicaid rates, switch to the Hospital Database.
- 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>