structure — wyrd.component.section
Structural sectioning landmark with a consumer-provided accessible label.
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: Section tag: wyrd-section package: wyrd.component.section title: Section summary: Structural sectioning landmark with a consumer-provided accessible label.relationships: related-to: - quality-parity-and-gatesclassification: category: structure composition: single-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: label type: kind: string required: true reflects: false serializable: true summary: Accessible name for the region; must be meaningful and unique within the page. slots: - name: content content: true required: true cardinality: one-or-many accepts: - content - component summary: Section content. events: [] states: - name: default source: platform summary: Labelled sectioning region. parts: - name: root summary: Sectioning region root. slots: - contentmessages: []obligations: accessibility: role: region name: Label property provides the accessible name. keyboard: [] semantics: - Renders a sectioning landmark. - Label must be meaningful and unique within the page. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - density-compact - text-expansion sdui: status: serializable serializableProperties: - label serializableSlots: - content eventBindings: [] notes: Section serializes its label and content slot; landmark uniqueness remains a page-level authoring obligation.examples: - name: settings state: default properties: label: Account settings slots: content: Account preferences and controls.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 { WyrdSection } from "@wyrd-company/react";
<WyrdSection label="Account settings">
Account preferences and controls.
</WyrdSection>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdSection(
label: 'Account settings',
child: Text('Account preferences and controls.'),
)| Name | Type | Default | Summary |
|---|---|---|---|
label | string | undefined | Accessible name for the region; must be meaningful and unique within the page. |
| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | one-or-many | content, component | Section content. |
| State | Source | Summary |
|---|---|---|
default | platform | Labelled sectioning region. |
From the contract's accessibility obligations. Role region; Label property provides the accessible name.
Status: serializable. Section serializes its label and content slot; landmark uniqueness remains a page-level authoring obligation.
| Serializable | Members |
|---|---|
| Properties | label |
| Slots | content |
| Events | — |