data-display — wyrd.component.card
Styled surface that frames related content while preserving child semantics.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: Card tag: wyrd-card package: wyrd.component.card title: Card summary: Styled surface that frames related content while preserving child semantics.relationships: related-to: - quality-parity-and-gatesclassification: category: data-display composition: single-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: [] slots: - name: content content: true required: true cardinality: one-or-many accepts: - component - content summary: Card body content. events: [] states: - name: default source: platform summary: Non-interactive content surface. parts: - name: root summary: Styled surface root. slots: - content tokens: background: color.surface foreground: color.on-surface border-color: color.outline border-width: 1px radius: rounded.md shadow: shadow.sm padding: spacing.mdmessages: []obligations: accessibility: role: none keyboard: [] semantics: - Adds no role, name, landmark, or interaction semantics. - Preserves the semantics and document order of child content. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - cvd-deuteranopia - density-compact - text-expansion sdui: status: serializable serializableProperties: [] serializableSlots: - content eventBindings: [] notes: Card serializes only its child content; interactive cards are a later component.examples: - name: catalog-health state: default properties: {} slots: content: Catalog health | 57 component contracts | All projection checks passing - name: review-queue state: default properties: {} slots: content: Component readiness | Review required | 4 changes awaiting approvaloverrides: react: slots: content: children flutter: slots: content: child
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdCard } from "@wyrd-company/react";
<WyrdCard>
Catalog health | 57 component contracts | All projection checks passing
</WyrdCard>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdCard(
child: Text('Catalog health | 57 component contracts | All projection checks passing'),
)import { WyrdCard } from "@wyrd-company/react";
<WyrdCard>
Component readiness | Review required | 4 changes awaiting approval
</WyrdCard>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdCard(
child: Text('Component readiness | Review required | 4 changes awaiting approval'),
)The specimen is the same published React component and contract example used above. Indexed markers identify only regions the contract can ground; the typed ledger keeps parts, slots, states, and semantic token bindings distinct.
Styled surface root. The card surface boundary.
Card body content. The example's composed content region.
color.surface The semantic background token applied to the card surface.
rootStyled surface root.contentRequired · one-or-manydefaultNon-interactive content surface.backgroundcolor.surfaceforegroundcolor.on-surfaceborder-colorcolor.outlineborder-width1pxradiusrounded.mdshadowshadow.smpaddingspacing.mdFIG. 1 parts: root TOL. ±0
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | one-or-many | component, content | Card body content. |
The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.
| Binding | Token | |
|---|---|---|
background | color.surface | |
foreground | color.on-surface | |
border-color | color.outline | |
border-width | 1px | |
radius | rounded.md | |
shadow | shadow.sm | |
padding | spacing.md |
| State | Source | Summary |
|---|---|---|
default | platform | Non-interactive content surface. |
From the contract's accessibility obligations. Role none
Status: serializable. Card serializes only its child content; interactive cards are a later component.
| Serializable | Members |
|---|---|
| Properties | — |
| Slots | content |
| Events | — |