Skip to content
Site volume
Colourway

Components

Rule

A horizontal or vertical rule in four weights, or a line's 6 px top rule.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/rule
On this page

Example#

Look of this example
Live render of examples/rule/basic.tsx

Usage#

Use a rule to separate groups that whitespace alone does not: rows in a dense list, a section's top edge, the end of an article. Most groups need space, not a line.

  • Weights. soft (2 px in the soft rule ink), the default (2 px), strong (2 px in the text ink) and heavy (6 px in the text ink).
  • Line rules. line draws the 6 px rule in a line's ink, for the top of a line's section.
  • Semantics. Rules are decorative by default (aria-hidden); decorative={false} keeps the separator role when the break means something.
  • Die lines and perforations are the print kit's DieLine, not rules.

Anatomy#

The parts of examples/rule/basic.tsx, numbered:
  1. RuleAn hr in one of four weights..mk-rule[data-weight="soft"], .mk-rule
  2. Line rule6 px in the line's ink..mk-rule[data-mk-line]

Volume#

Reading layer: identical at every volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • A rule never carries meaning alone; the heading after it says what changed.

Do and don't#

Do

Websites

Growth

A soft rule between rows.

Don't

Websites

Growth

Heavy rules everywhere.

Heavy rules are for big breaks, like the end of an article. Used between every item, they turn a list into a cage.

Accessibility#

  • Decorative by default (aria-hidden); pass decorative=`` to keep separator semantics.

Props#

PropTypeDefaultDescription
weight"default" | "heavy" | "soft" | "strong"none
line"custom-apps" | "growth" | "maxos" | "software" | "websites"none
orientation"horizontal" | "vertical"none
decorativebooleantrueDefault true (`aria-hidden`).

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from RuleProps in packages/overprint-react/src/reading/rule/rule.tsx.

Tokens#

System tokens (5)

Its own properties (2)

  • --mk-rule-ink
  • --mk-rule-weight

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry