Cards.

A card is one idea in a hairline box. A card that goes somewhere is a link from edge to edge; a card that states a fact does not move, and ends in its evidence. Information sits in a grid; the shop’s products sit in open space.

Playground.

The site's Card as a link and as a fact, on the band fill it usually sits on and on bare paper. Hover each.

Card
Ground

Assembly

Send the assembly and get a dimensioned, toleranced sheet back for every part in it, to ASME Y14.5-2018 and in your title block.

See Assembly

Blueprints

Set up a part you draw constantly once, then get its drawing back on one click from inside your CAD, already the way your shop expects it.

See Blueprints

Notes

Your standard notes, plus the ones this part needs for its material, its process and its features, placed as soon as the drawing exists.

See Notes 
import { Card } from "#/ui/site/card";

<Card
  href="/product-features"
  title="Assembly"
  linkLabel="See Assembly"
>
  Send the assembly and get a dimensioned, toleranced sheet back for every part in it, to ASME Y14.5-2018 and in your title block.
</Card>

Product family.

At the foot of every product page, the other four products, read from lib/products.ts, so a sixth product is one entry. Five pages that never mention each other are five products a visitor only finds by opening the nav twice. Link cards: the whole face is the target.

Show code
import { ProductFamily } from "#/ui/site/product-family";

<ProductFamily current="mbd" />  // the other four, self excluded

Capability grid.

Six capabilities in six separate boxes, from /mbd. Not a ruled table: a table says its cells are readings of one quantity in a fixed order, and these are read in any order. Fact cards, so nothing lifts on hover, and each ends in its evidence.

Controls on the features

Feature control frames attach to the faces and features they govern, with the datum references that define them, rather than sitting in a note somebody has to associate with the right hole.

0.25AB

ASME Y14.41 and Y14.47

The standards model-based definition is written to: Y14.41 for how annotations are applied to a 3D model, and Y14.47 for how the model's data is organized. The callouts themselves still mean exactly what ASME Y14.5 says.

Y14.41 · Y14.47

In the CAD you already run

The annotations live in the model in SolidWorks and Siemens NX, so the people downstream open the file they always open, with no new viewer to learn.

SolidWorksSiemens NX

The sheet and the model agree

Both come out of one read of the geometry, so there is no second definition to maintain and no drift between what the drawing says and what the model carries.

One source

Change it and re-run

A design change regenerates the definition. Re-applying annotations by hand after each change is where a hand-maintained MBD scheme usually falls behind the model.

Your conventions, either way

Your title block, your sheet sizes and your tolerancing defaults apply whether the definition is printed on a sheet, attached to the model, or both.

SheetANSI BDefault tol±.005
Show code
import { CapabilityGrid, type Capability } from "#/ui/site/capability-grid";

const CAPABILITIES: Capability[] = [
  { title: "Controls on the features", body: "...", chip: <ControlFrame cells={...} /> },
  ...
];

<Band className="band-fill">
  <CapabilityGrid items={CAPABILITIES} />
</Band>

Chips.

A fact card’s foot is evidence drawn in the site’s own furniture: a control frame, a title block, revision flags, a mono value. Use the one that is true of the sentence above it. CadTiles shows only the CAD systems its card names, and a partner’s mark keeps its own colors.

0.25AB

ControlFrame

A tolerance on a feature

Y14.41 · Y14.47

MonoChip

Evidence that is a string

Material6061-T6FinishAnodize

TitleBlockChip

Your conventions

ABC

RevFlags

Revisions

RerunControl

Change and re-run

Tile + FeatureGlyph

A row of feature types

SolidWorksSiemens NXTeamcenter

CadTiles

Only the CAD the card names

AsmeMark

The standard itself

Lead card.

The newest post at the head of /blog, its hero at full size on a vellum card. The title deepens to redline on hover; nothing else moves.

Latest / GD&T

Angularity

Angularity in GD&T is a symbol that defines the orientation of one feature relative to another at a specified angle within a 3D tolerance zone.Surface control shown to left. Angularity can also apply to a FOS where the derived median plane or line is controlled.

Show code
import { PostLeadCard } from "#/ui/site/post-cards";

<PostLeadCard post={lead} />

Archive row and Keep reading.

Picture, when, what, in that order at every width. Every part reserves its height and the title and summary clamp, so the thumbnail is exactly as tall as the words beside it and a list is even by construction rather than by stretching: 138px a row in the archive, 116px a card at the foot of a post.

Show code
import { PostCard, PostRow } from "#/ui/site/post-cards";

<ul className="border-t border-hairline">
  <li className="border-b border-hairline"><PostRow post={p} /></li>
</ul>

<ul className="grid gap-px bg-hairline lg:grid-cols-3">
  <li className="bg-paper"><PostCard post={p} /></li>
</ul>

Goods.

The shop’s catalog is the deliberate exception: gapped tiles running the full width, no rules between them and no box around them. Each product already has an edge in its vellum plate, so a hairline on top would be a second level of chrome. The grid rule is about information, where the hairline is what tells a reader the cells are one set.

Best practices.

Do

  • Make the whole card the link when it goes somewhere, with its label at the foot.
  • End a fact card in its evidence: a chip that is true of the sentence above it.
  • Reserve heights and clamp lines, so a row is even by construction.
  • Keep each card's own paper on a filled band.

Don't

  • Do not put a link inside a link card.
  • Do not give a card that goes nowhere a hover state.
  • Do not nest a box inside a card.
  • Do not stretch cards to one height; build them to it.

Go to manufacturing.

Book a demoOpen the Toolbox