Spacing

Spacing utilities allow you to adjust the padding and/or margins of an element or group of elements. Refer to Spacing in Visual Style to learn more about the naming conventions used below.

Margin

Use margin utilities to adjust the spacing between elements.

Stack

Stack adds margin to the bottom on an element. You can append a value to the class itself to set the size in pixels based on Pit Viper’s spacing values.

Alternatively, you can override the default value (16px) of pv-stack with the custom property --stack-size. Only use this method when the above classes aren’t sufficient.

Example
A heading with bottom margin followed by a paragraph of text.

<p class="pv-heading-5 pv-stack">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>

Stack Responsive

Add -responsive to a stack utility to reduce the spacing by half below the medium breakpoint.

Example
A container with 32px of bottom margin on large screens and 16px of bottom margin on small screens.

<div class="pv-surface pv-inset-square pv-stack-32-responsive">
  <p>This container has half as much bottom margin on small screens.</p>
</div>
<div class="pv-surface pv-inset-square">
  <p>Another container.</p>
</div>

Flow

Flow adds margin to the bottom of all direct children of an element. Use this instead of applying multiple stack classes to each child element. The last child element will not include a bottom margin to avoid adding unwanted addition space to the bottom of a container.

You can use the custom property --flow-size to override the default value of 16px.

You can also use the stack class inside of a flow block to override the margin value for an individual child element.

Example
A heading with a bottom margin of 8px followed by several paragraphs of text, with equal bottom margins of 16px.

<div class="pv-flow">
  <p class="pv-heading-5 pv-stack-8">Bundled together with care.</p>
  <p>Standard Service Packages gather all medical services, materials, and fees associated with a healthcare procedure and represent them as a single code.</p>
  <p>Created by industry experts and a team of A-list engineers, Standard Service Packages are neatly bundled, aptly categorized, and accurately tagged to meet the needs of patients, providers, and payers.</p>
  <p>We're simplifying the world of healthcare billing.</p>
</div>

Padding

Use padding utilities to add spacing inside of an element.

Inset Square

Inset Square adds equal padding to all sides of an element. You can append a value to the class itself to set the size in pixels based on Pit Viper’s spacing values.

Alternatively, you can override the default value (16px) of pv-inset-square with the custom property --inset-size. Only use this method when the above classes aren’t sufficient.

Example
A heading and paragraph inside of a container with 16px of padding on all sides.

<div class="pv-inset-square pv-surface">
  <p class="pv-heading-4 pv-stack">Shop healthcare just like anything else.</p>
  <p>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>
</div>

Inset Square Responsive

Add -responsive to an inset-square utility to reduce the spacing by half below the medium breakpoint.

Example
A container with 32px of padding on large screens and 16px of padding on small screens.

<div class="pv-surface pv-inset-square-32-responsive">
  <p>This container has half as much padding on small screens.</p>
</div>

Inset Squish

Inset Squish adds more padding to the sides of an element than the top and bottom.

Alternatively, you can override the default value (12px 16px) of pv-inset-squish with the custom property --inset-size, which takes two space-separated values: block (top/bottom) and inline(left/right) padding. Only use this method when the above classes aren’t sufficient.

Example
A heading and paragraph inside of a container with 12px of padding on the top and bottom and 16px of padding on the left and right.

<div class="pv-inset-squish-12 pv-surface">
  <p class="pv-heading-4 pv-stack">Shop healthcare just like anything else.</p>
  <p>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>
</div>

Inset Inline

Inset Inline adds padding only to the sides of an element.

Alternatively, you can override the default value (16px) of pv-inset-inline with the custom property --inset-size. Only use this method when the above classes aren’t sufficient.

Example
A heading and paragraph inside of a container with 16px of padding on the left and right.

<div class="pv-inset-inline-16 pv-surface">
  <p class="pv-heading-4 pv-stack">Shop healthcare just like anything else.</p>
  <p>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>
</div>

Inset Block

Inset Block adds padding only to the top and bottom of an element.

Alternatively, you can override the default value (16px) of pv-inset-block with the custom property --inset-size. Only use this method when the above classes aren’t sufficient.

Example
A heading and paragraph inside of a container with 16px of padding on the top and bottom.

<div class="pv-inset-block-16 pv-surface">
  <p class="pv-heading-4 pv-stack">Shop healthcare just like anything else.</p>
  <p>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>
</div>

Inset Block Responsive

Add -responsive to an inset-block utility to reduce the top and bottom padding by half below the medium breakpoint.

Example
A container with 32px of top and bottom padding on large screens and 16px of top and bottom padding on small screens.

<div class="pv-surface pv-inset-block-32-responsive">
  <p>This container has half as much top and bottom padding on small screens.</p>
</div>

Resources

• Space in Design Systems - Nathan Curtis on the terminology and conventions around spacing values.
• Flow CSS Utility - Andy Bell discusses the flow technique.