Skip to content
Site volume
Colourway

Components

LineCard

The division card: a head band in the line's ink, the block on its corner, the body on the line's tint.

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

Example#

Look of this example

Websites

3 tiers

Hand-coded websites for small businesses.

Timeline
2 to 6 weeks

Website builds

Live render of examples/line-card/basic.tsx

Usage#

Use a line card to introduce one of the four lines of work (Websites, Growth, Software, Custom apps), usually as a grid of four on the home page. It carries the line's ink, letter and glyph, so the meaning never rests on colour alone (D-C2).

  • Parts. line (required), title (defaults to the line's name), count (a badge such as "3 tiers"), description, one fact, href and cta.
  • The block is the line's badge by default; the 3D kit's BlockCss or BlockSvg can take its place through block. It overlaps the head's corner and never sits under the title.
  • Volume swap. The head band is the line's plate from Studio; at Quiet it is the stock with a 6 px top rule in the line's ink. This is the one sanctioned volume change in the reading layer (N8).
  • Grid. Four columns from lg, two from sm, one below.

Anatomy#

Websites

3 tiers

Hand-coded websites for small businesses.

Timeline
2 to 6 weeks

Website builds

The parts of examples/line-card/basic.tsx, numbered:
  1. Headdata-mk-part="head"
  2. Blockdata-mk-part="block"
  3. Titledata-mk-part="title"
  4. Countdata-mk-part="count"
  5. Bodydata-mk-part="body"
  6. Factdata-mk-part="fact"
  7. Footerdata-mk-part="footer"

Volume#

The head band swaps from a ruled stock at Quiet to the line's plate from Studio; type, sizes and positions never change.

  • Quiet

    Websites

    3 tiers

    Hand-coded websites for small businesses.

    Timeline
    2 to 6 weeks

    Website builds

    The head on the stock, with a 6 px rule in the line's ink.

  • Studio

    Websites

    3 tiers

    Hand-coded websites for small businesses.

    Timeline
    2 to 6 weeks

    Website builds

    The head on the line's plate.

  • Press

    Websites

    3 tiers

    Hand-coded websites for small businesses.

    Timeline
    2 to 6 weeks

    Website builds

    The same as Studio: line plates cap at the volume's chroma.

  • Rave

    Websites

    3 tiers

    Hand-coded websites for small businesses.

    Timeline
    2 to 6 weeks

    Website builds

    Full chroma; the words are unchanged.

Content#

  • The title is the line's name exactly: Websites, Growth, Software, Custom apps.
  • The description says who it is for and what they get, in one sentence.
  • The fact is the one number a buyer asks first, such as the timeline.
  • The CTA names the destination: "Website builds", not "Learn more".

Do and don't#

Do

Websites

Hand-coded websites for small businesses.

Timeline
2 to 6 weeks

See Websites

The ink, the letter and the name agree.

Don't

Websites

Hand-coded websites for small businesses.

See Websites

Growth's red ink under the Websites name.

Each Process ink means one line of work (D-C1). A card in one line's ink with another line's name teaches readers that colour means nothing.

Accessibility#

  • The card is one link (the footer link, stretched); the block art is aria-hidden.
  • The line is ink, letter and glyph together, so it never rests on colour alone (D-C2).
  • At Quiet the head swaps to the stock under a line rule; type, sizes and positions never change (N8).

Props#

PropTypeDefaultDescription
line required"custom-apps" | "growth" | "maxos" | "software" | "websites"none
titlestringnoneDefault: the line's name.
titleLevel2 | 3 | 43Default 3.
countReactNodenoneA `Badge` on a paper face, e.g. "3 tiers".
description requiredReactNodenone
fact{ label: string; value: string; }none
href requiredstringnone
ctastringnoneDefault "See {title}".
blockReactNodeLineBadgeThe 3D kit's `BlockCss` / `BlockSvg` (default `LineBadge` 48).
linkRenderRenderPropnoneReplaces the footer link (Next.js routing).

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

Tokens#

System tokens (22)

Its own properties (2)

  • --mk-line-card-block
  • --mk-line-card-offset

Scanned from its CSS at build and checked against its registry entry; 13 read but not declared there.

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