ArcaneDiv#

The core layout component that wraps content with ArcaneStyleData styling capabilities. It's the foundation for building any UI structure.

Basic Usage#

ArcaneDiv(
  children: [
    ArcaneText('Hello World'),
  ],
)

Properties#

With Styling#

ArcaneDiv(
  styles: const ArcaneStyleData(
    padding: PaddingPreset.lg,
    background: Background.surface,
    borderRadius: Radius.lg,
    border: Border.subtle,
  ),
  children: [
    ArcaneText('Styled content'),
  ],
)

Flexbox Layout#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.row,
    justifyContent: JustifyContent.spaceBetween,
    alignItems: AlignItems.center,
    gap: Gap.md,
  ),
  children: [
    ArcaneText('Left'),
    ArcaneText('Right'),
  ],
)

Grid Layout#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.grid,
    gridTemplateColumns: 'repeat(3, 1fr)',
    gap: Gap.lg,
  ),
  children: [
    for (var i = 0; i < 6; i++)
      ArcaneCard(child: ArcaneText('Item $i')),
  ],
)

Examples#

Card Container#

ArcaneDiv(
  styles: const ArcaneStyleData(
    padding: PaddingPreset.xl,
    background: Background.card,
    borderRadius: Radius.xl,
    shadow: Shadow.lg,
  ),
  children: [
    ArcaneHeading(text: 'Welcome'),
    ArcaneParagraph(text: 'This is a card-like container.'),
  ],
)

Centered Content#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    justifyContent: JustifyContent.center,
    alignItems: AlignItems.center,
    minHeightCustom: '400px',
  ),
  children: [
    ArcaneText('Centered!'),
  ],
)

Responsive Column#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.md,
    maxWidthCustom: '600px',
    margin: Margin.auto,
  ),
  children: [
    ArcaneTextInput(label: 'Name'),
    ArcaneTextInput(label: 'Email'),
    ArcaneButton(label: 'Submit', onPressed: () {}),
  ],
)

Overlay Container#

ArcaneDiv(
  styles: const ArcaneStyleData(
    position: Position.relative,
  ),
  children: [
    ArcaneImage(src: '/hero.jpg'),
    ArcaneDiv(
      styles: const ArcaneStyleData(
        position: Position.absolute,
        inset: Inset.zero,
        background: Background.overlay,
        display: Display.flex,
        justifyContent: JustifyContent.center,
        alignItems: AlignItems.center,
      ),
      children: [
        ArcaneHeadline(text: 'Hero Title'),
      ],
    ),
  ],
)

Hover Effects#

ArcaneDiv(
  styles: const ArcaneStyleData(
    padding: PaddingPreset.md,
    background: Background.surface,
    borderRadius: Radius.md,
    transition: Transition.colors,
    cursor: Cursor.pointer,
    hover: HoverStyles(
      background: Background.surfaceHover,
      shadow: Shadow.md,
    ),
  ),
  children: [
    ArcaneText('Hover me'),
  ],
)

Related Components#

• ArcaneContainer - Max-width centered container
• ArcaneSection - Semantic section wrapper
• ArcaneRow - Horizontal flex layout
• ArcaneColumn - Vertical flex layout