Utilities
A small, finite set of single-purpose helpers for accessibility, layout, and typography needs that recur but don't belong to a component. Porchlight is not utility-first: each utility earns its place by serving a recurring need.
.pl-u-sr-only and .pl-u-focusable-sr-only
Hide content from sighted users while keeping it for assistive tech. Use.pl-u-sr-only when the element should stay hidden on focus, and.pl-u-focusable-sr-only for skip links that reveal themselves.
.pl-u-truncate
One-line truncation with an ellipsis. Use for table cells, breadcrumbs, file names.
.pl-u-min-0 and .pl-u-wrap-anywhere
Helpers for flex/grid truncation and very long generated tokens.
request_01JZ8Y7Q3Y1QYJH9D8A2WMV6YV_extremely_long_generated_identifier.pl-u-flow
Vertical rhythm for a prose block: space between children, not before/after.
First paragraph: no top margin.
Second paragraph: spaced from the first via the sibling selector.
Third paragraph: consistent rhythm throughout.
.pl-u-marginless
Remove default block margins from a single text element inside dense app chrome.
A marginless paragraph inside a compact row.
.pl-u-surface
Panel styling for ad-hoc grouping (when you don't need a full .pl-c-card): bg, text, border, radius.
.pl-u-muted
Secondary/caption text color.
Primary text. Secondary, muted text.
Small muted metadata text.
.pl-u-icon-title
Leading icon + title pattern that keeps the icon attached to the title line.
Badge/chip group
Use .pl-l-cluster with a smaller gap for wrapping groups of compact labels.
.pl-u-full-bleed
Break an element out to the viewport edges inside a constrained container (a wide table or image in a prose column).