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
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.
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-brand 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-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-bordered-md pv-border-critical pv-surface-critical 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.
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.
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.
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.
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.
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.
- Oh, the styles outside are frightful
- But the nav is so delightful
- And since we've no place to go
- Let it scroll
- Let it scroll
- Let it scroll
- ❄️
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>