Skip to content
Site volume
Colourway

3D kit

Slot

A baseplate with one letter block seated in its recess, and a dimension line.

  • Beta
  • Expressive layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-three/css3d
On this page

A page object for "the piece that fits": a primed baseplate with a recessed slot, one letter block seated in it and a dimension line beside it.

Example#

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

Usage#

Use a slot for "the right fit": a baseplate with one letter block seated in its recess, and a dimension line. It suits a section about fitting a site to a business.

  • The baseplate is primed stock, the text ink screened into the paper, so it reads on Bone and Night alike.

Layer and volume#

Art in a section's art slot. The baseplate is primed stock (the text ink screened into the paper), so it reads on Bone and Night alike.

Anatomy#

The parts of examples/slot/basic.tsx, numbered:
  1. BaseplatePrimed stock..mk-obj-panel
  2. RecessThe socket the block sits in..mk-slot-recess
  3. DimensionDecorative lettering..mk-obj-dim

Volume#

  • Quiet

    Identical; it does not move.

  • Studio

    Identical.

  • Press

    Identical.

  • Rave

    Identical.

Content#

  • The section's text carries the point; the slot illustrates it.

Do and don't#

Do

The dimension is decoration.

Don't

A slot whose dimension line carries the price.

A fact hidden in art.

The dimension line is aria-hidden lettering. Anything a reader needs goes in the reading layer.

Fidelities#

CSS 3D in the house pose, print-shaded.

Performance#

Zero JavaScript.

Gating#

None: it does not move.

Accessibility#

  • aria-hidden art.

Props#

PropTypeDefaultDescription
letterGlyphMThe block seated in the slot (default `M`).
sizenumbernone
classNamestringnone

Generated from SlotProps in packages/overprint-three/src/css3d/slot.tsx.

Tokens#

System tokens (13)

Its own properties (1)

  • --mk-s

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

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • Minorgenerators, threeThree: the alphabet twins at every fidelity (model, SVG, CSS 3D, GL geometry, physics shapes; Rave's MORE BLOCKS rains them), the row, topple, twins, stack-1/2/3, line-k/r/a/m and wood arrangements with their text alternatives, the page objects Crate, PlanPlate, Slot, SampleCase and Baseplate, BlockLoader, Topple404, BuildOnScroll, the house camera and an id-colour parity mode in poster frames, the wood grain in GL, specks and Shake, the phone's tap-to-play light rung with "Done", and InkFieldMaterial (the field backdrop in the stage's own canvas). Read the whole entry