layout — wyrd.component.container
Layout primitive that constrains content width and applies inline padding using the normative Layout DSL scales.
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: Container tag: wyrd-container package: wyrd.component.container title: Container summary: Layout primitive that constrains content width and applies inline padding using the normative Layout DSL scales.relationships: related-to: - layout-dsl - puck-layout-authoring - quality-parity-and-gatesclassification: category: layout composition: single-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: max-width type: kind: enum values: - sm - md - lg - xl required: false default: lg reflects: true serializable: true summary: Maximum inline size selected from the normative Layout DSL max-width scale. - name: padding type: kind: integer minimum: 0 maximum: 8 required: false default: 2 reflects: true serializable: true summary: Inline padding as a normative Layout DSL spacing-scale index. slots: - name: content required: false cardinality: one-or-many accepts: - component summary: Content constrained by the container. events: [] states: - name: default source: platform summary: Content is centered with tokenized max width and inline padding. parts: - name: root summary: Structural container root. slots: - contentmessages: []obligations: accessibility: role: none keyboard: [] semantics: - Does not add landmark, section, or interactive semantics. - Preserves the semantics and document order of slotted content. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - density-compact - text-expansion - safe-area sdui: status: serializable serializableProperties: - max-width - padding serializableSlots: - content eventBindings: [] notes: Container lowers to the Layout DSL Container node (maxWidth + padding) during Puck-to-SDUI normalisation.examples: - name: default state: default properties: max-width: lg padding: 2 slots: content: A centered reading column for design-system guidance. - name: narrow state: default properties: max-width: sm padding: 1 slots: content: Narrow content with compact inline padding. - name: wide state: default properties: max-width: xl padding: 5 slots: content: Wide content with generous inline padding.overrides: 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 { WyrdContainer } from "@wyrd-company/react";
<WyrdContainer maxWidth="lg" padding={2}>
A centered reading column for design-system guidance.
</WyrdContainer>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdContainer(
maxWidth: 'lg',
padding: 2,
child: Text('A centered reading column for design-system guidance.'),
)import { WyrdContainer } from "@wyrd-company/react";
<WyrdContainer maxWidth="sm" padding={1}>
Narrow content with compact inline padding.
</WyrdContainer>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdContainer(
maxWidth: 'sm',
padding: 1,
child: Text('Narrow content with compact inline padding.'),
)import { WyrdContainer } from "@wyrd-company/react";
<WyrdContainer maxWidth="xl" padding={5}>
Wide content with generous inline padding.
</WyrdContainer>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdContainer(
maxWidth: 'xl',
padding: 5,
child: Text('Wide content with generous inline padding.'),
)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.
Structural container root. The responsive container boundary.
Content constrained by the container. The example text content inside the constrained column.
rootStructural container root.contentOptional · one-or-manydefaultContent is centered with tokenized max width and inline padding.Not declared by this component contract.
FIG. 1 parts: root TOL. ±0
| Name | Type | Default | Summary |
|---|---|---|---|
max-width | sm | md | lg | xl | lg | Maximum inline size selected from the normative Layout DSL max-width scale. |
padding | integer | 2 | Inline padding as a normative Layout DSL spacing-scale index. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | one-or-many | component | Content constrained by the container. |
| State | Source | Summary |
|---|---|---|
default | platform | Content is centered with tokenized max width and inline padding. |
From the contract's accessibility obligations. Role none
Status: serializable. Container lowers to the Layout DSL Container node (maxWidth + padding) during Puck-to-SDUI normalisation.
| Serializable | Members |
|---|---|
| Properties | max-width, padding |
| Slots | content |
| Events | — |