CSS Utilities

Utility classes for spacing, layout, type, and more, built on our design tokens.

Utilities are built on our tokens, so anything you compose with them stays consistent with the system.

To get started, add the design system to your project and apply the classes below.

Reset

Apply .pl-reset to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings.

Typeset

Applying .pl-typeset to a containing element will style all of its children text elements which can be useful for laying out typographic foundations.

<div class="pl-reset pl-typeset pl-margin-l">
  <h1>Heading level 1</h1>
  <h2>Heading level 2</h1>
  <h3>Heading level 3</h1>

  <p>Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p">HTML paragraphs</a> can be any structural grouping of related content.</p>
</div>

Spacing

Use .pl-margin-{size} or .pl-padding-{size} to set spacing on all sides of an element.

Available sizes include 0, 2xs, xs, s, m, l, xl, 2xl, and 3xl.

You can also specify the direction .pl-padding-{direction}-{size} using the following prefixes:

• b for bottom
• t for top
• x for left and right
• y for top and bottom
• l for left
• r for right

For the value behind each size, or to use spacing directly in your own CSS, see Tokens.

Display

Use display utility classes to control how elements are rendered.

• .pl-block
• .pl-inline
• .pl-inline-block
• .pl-flex
• .pl-inline-flex
• .pl-grid
• .pl-inline-grid
• .pl-none

Flex direction

Use flex direction utility classes to control the direction of flex items within a flex container. Switch between horizontal (row) and vertical (column) layouts with .pl-flex-row and .pl-flex-col.

Gap

Use .pl-gap-{size} to add consistent spacing between direct children of a flex or grid container. This utility is especially useful for layouts using CSS Flexbox or Grid, where you want to control the space between items without adding margin classes to each child.

Available sizes include: 0, 2xs, xs, s, m, l, xl, 2xl, and 3xl.

Border radius

Use .pl-border-radius to apply a standard border radius to an element, or .pl-border-radius-subtle for a more subtle rounding. These utilities help you quickly round the corners of boxes, cards, images, and other elements.

<style>
.border-radius-example {
  display: inline-block;
  background: var(--pl-color-bg-info);
  padding: var(--pl-space-2xs) var(--pl-space-m);
  border: solid 1px var(--pl-color-fg-info);
  color: var(--pl-color-fg-info);
}
</style>

<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-gap-m">
  <span class="border-radius-example pl-border-radius">Penn Libraries</span>
  <span class="border-radius-example pl-border-radius-subtle">Penn Libraries</span>
</div>

For the value behind each radius, or to use them directly in your own CSS, see Tokens.

Caps

Use .pl-caps for a small uppercase label, or .pl-caps--subtle for a quieter version. These work well for section labels, table headers, and short bits of text that introduce a heading or a group.

<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-flex-col pl-gap-2xs">
  <span class="pl-caps">New this month</span>
  <span class="pl-caps--subtle">New this month</span>
</div>

Line length

Use .pl-line-length to set a comfortable maximum line width for readable text. This utility is especially useful for paragraphs, article content, or any block of text where you want to improve legibility by preventing lines from becoming too long.

<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-flex-col pl-gap-m">
  <p>
    Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.
  </p>

  <p class="pl-line-length">
    Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.
  </p>
</div>

Line clamp

Use .pl-line-clamp to hold text to a set number of lines and end it with an ellipsis. It clamps to two lines by default. Set --pl-line-clamp to use a different number.

Clamp when the full text isn't needed to make a choice, such as repeated descriptions in a grid. If someone needs to read all of it to decide, let it wrap.

<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-flex-col pl-gap-m">
  <p class="pl-line-clamp">
    Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.
  </p>

  <p class="pl-line-clamp" style="--pl-line-clamp: 4">
    Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.
  </p>
</div>

The element becomes a block, so a <span> you clamp will stop flowing inline with the text around it.

Focus

Focusable elements like links, buttons, form controls, <summary>, and anything with a tabindex automatically receive a visible focus ring when reached with the keyboard. Try tabbing through the example below.

<div class="pl-reset pl-typeset pl-margin-l pl-flex pl-gap-m">
  <button class="pl-button pl-button--accent">Focus me</button>
  <a href="#">Or focus me</a>
</div>

To give a custom component the same focus ring, apply the --pl-focus-box-shadow token to its :focus-visible state. See Tokens.