structure — wyrd.component.aspect-ratio

AspectRatio

Content primitive that reserves a fixed media ratio around slotted content.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/aspect-ratio.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: AspectRatio  tag: wyrd-aspect-ratio  package: wyrd.component.aspect-ratio  title: Aspect Ratio  summary: Content primitive that reserves a fixed media ratio around slotted content.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: structure  composition: single-slot  interactive: falsetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: ratio      type:        kind: enum        values:          - 1-1          - 4-3          - 3-2          - 16-9          - 21-9      required: false      default: 16-9      reflects: true      serializable: true      summary: Fixed ratio enum; maps normatively to 1/1, 4/3, 3/2, 16/9, or 21/9.  slots:    - name: content      content: true      required: true      cardinality: one-or-many      accepts:        - content        - component      summary: Content constrained by the selected aspect ratio.  events: []  states:    - name: default      source: platform      summary: Content is constrained to the selected ratio.  parts:    - name: root      summary: Aspect-ratio box.      slots:        - contentmessages: []obligations:  accessibility:    role: none    keyboard: []    semantics:      - Adds no accessibility semantics of its own.      - Preserves the semantics and document order of slotted content.  behavior:    model: stateless    interactions: []    hostEffects: []  conditions:    - rtl    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - ratio    serializableSlots:      - content    eventBindings: []    notes: Aspect Ratio serializes a deliberate fixed ratio enum; arbitrary numeric ratios can be added later without changing current values.examples:  - name: video-thumbnail    state: default    properties:      ratio: 16-9    slots:      content: Product walkthrough | Generate a component for every required target  - name: square-artwork    state: default    properties:      ratio: 1-1    slots:      content: Release 0.12 | Catalog artwork  - name: panoramic-banner    state: default    properties:      ratio: 21-9    slots:      content: The Wyrding Way | Author the component once. Let the platforms agree.overrides:  react:    slots:      content: children  flutter:    slots:      content: child

Examples

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.

Code target React Flutter Applies to every example on component pages.

video-thumbnail state: default

Illustrated designer working at a dark workbench

Usage

import portraitUrl from "../example-assets/workbench-portrait.png";
import { WyrdAspectRatio } from "@wyrd-company/react";

export function MediaExample() {
  return (
    <WyrdAspectRatio ratio="16-9">
      <img src={portraitUrl} alt="Illustrated designer working at a dark workbench" />
    </WyrdAspectRatio>
  );
}

import 'package:flutter/widgets.dart';
import 'package:wyrd_flutter/wyrd_flutter.dart';

Widget mediaExample() => WyrdAspectRatio(
  ratio: WyrdAspectRatioRatio.value16_9,
  child: const [
    Image(
      image: AssetImage(
        'assets/examples/workbench-portrait.png',
        package: 'wyrd_flutter',
      ),
      semanticLabel: 'Illustrated designer working at a dark workbench',
    ),
  ],
);

square-artwork state: default

Release 0.12Catalog artwork

Usage

import { WyrdAspectRatio } from "@wyrd-company/react";

<WyrdAspectRatio ratio="1-1">
  Release 0.12 | Catalog artwork
</WyrdAspectRatio>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdAspectRatio(
  ratio: '1-1',
  child: Text('Release 0.12 | Catalog artwork'),
)

panoramic-banner state: default

The Wyrding WayAuthor the component once. Let the platforms agree.

Usage

import { WyrdAspectRatio } from "@wyrd-company/react";

<WyrdAspectRatio ratio="21-9">
  The Wyrding Way | Author the component once. Let the platforms agree.
</WyrdAspectRatio>

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdAspectRatio(
  ratio: '21-9',
  child: Text('The Wyrding Way | Author the component once. Let the platforms agree.'),
)

Properties

Name	Type	Default	Summary
`ratio`	`1-1 \| 4-3 \| 3-2 \| 16-9 \| 21-9`	`16-9`	Fixed ratio enum; maps normatively to 1/1, 4/3, 3/2, 16/9, or 21/9.

Slots & events

Slot	Cardinality	Accepts	Summary
`content`	one-or-many	`content, component`	Content constrained by the selected aspect ratio.

States

State	Source	Summary
`default`	platform	Content is constrained to the selected ratio.

SDUI

Status: serializable. Aspect Ratio serializes a deliberate fixed ratio enum; arbitrary numeric ratios can be added later without changing current values.

Serializable	Members
Properties	`ratio`
Slots	`content`
Events	`—`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

States

Accessibility

SDUI