Layoutduskmoonimplemented3 demos

Col

Col defines responsive grid columns inside row-based layouts.

Import@duskmoon-dev/components/col

3API sections

13documented props

1behavior scenarios

Key API

flexoffsetorderpullpushspan

Usage

When to use

Use it to build predictable page, toolbar, panel, or grid structure.
Keep layout primitives responsible for geometry and let child components own behavior.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Composition primitive

Documents spacing, responsive behavior, and nested regions used to build larger screens.

Stable geometry

Examples keep predictable dimensions so the surrounding UI does not jump while content changes.

Primary API surface

Col is most often configured through `flex`, `offset`, `order`, `pull`.

Covered behavior

Renders span, offset, order, push, pull, flex, and responsive metadata

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

span 12

Basic usage

authored

Import the component stylesheet and Col from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Col } from "@duskmoon-dev/components/col";

export function Example() {
  return (<Col
  span={12}
  style={{
    width: "50%",
    padding: "12px",
    background: "var(--color-primary-container)",
    color: "var(--color-primary)",
    borderRadius: "6px",
    fontWeight: 700
  }}
>
  span 12
</Col>);
}

Preview

span 12

Renders span, offset, order, push, pull, flex, and responsive metadata

test-backed

Col scenario from the component test coverage: renders span, offset, order, push, pull, flex, and responsive metadata.

Source

import "@duskmoon-dev/components/styles.css";
import { Col } from "@duskmoon-dev/components/col";

export function ColRendersSpanOffsetOrderDemo() {
  return (<Col
  span={12}
  style={{
    width: "50%",
    padding: "12px",
    background: "var(--color-primary-container)",
    color: "var(--color-primary)",
    borderRadius: "6px",
    fontWeight: 700
  }}
>
  span 12
</Col>);
}

Preview

Sunshine Theme

span 12

Moonlight Theme

span 12

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Col
  span={12}
  style={{
    width: "50%",
    padding: "12px",
    background: "var(--color-primary-container)",
    color: "var(--color-primary)",
    borderRadius: "6px",
    fontWeight: 700
  }}
>
  span 12
</Col>
</div>

<div data-theme="moonlight">
  <Col
  span={12}
  style={{
    width: "50%",
    padding: "12px",
    background: "var(--color-primary-container)",
    color: "var(--color-primary)",
    borderRadius: "6px",
    fontWeight: 700
  }}
>
  span 12
</Col>
</div>

API

The API reference below lists every parsed exported type or interface for Col. Start with `flex`, `offset`, `order`, `pull` for common usage.

Types: packages/components/src/components/col/Col.types.tsScenarios: packages/components/src/components/col/Col.test.tsx

ColPropsinterface extends ComponentProps<"div">

Prop	Type	Required	Description
`flex`	`string \| number`	No	flex configures Col.
`offset`	`number`	No	offset configures Col.
`order`	`number`	No	order configures Col.
`pull`	`number`	No	pull configures Col.
`push`	`number`	No	push configures Col.
`span`	`ColSpan`	No	span configures Col.
`xs`	`ColResponsiveValue`	No	xs configures Col.
`sm`	`ColResponsiveValue`	No	sm configures Col.
`md`	`ColResponsiveValue`	No	md configures Col.
`lg`	`ColResponsiveValue`	No	lg configures Col.
`xl`	`ColResponsiveValue`	No	xl configures Col.
`xxl`	`ColResponsiveValue`	No	xxl configures Col.
`children`	`ReactNode`	No	children configures Col.

ColSpantype

number

ColResponsiveValuetype

| number | { span?: number