ArcaneGutter#

A simple spacing component that adds vertical space between elements, useful for creating consistent visual separation.

Basic Usage#

ArcaneColumn(
  children: [
    ArcaneSection(children: [...]),
    ArcaneGutter(),
    ArcaneSection(children: [...]),
  ],
)

Properties#

Sizes#

// Extra small
ArcaneGutter(size: GutterSize.xs)

// Small
ArcaneGutter(size: GutterSize.sm)

// Medium (default)
ArcaneGutter(size: GutterSize.md)

// Large
ArcaneGutter(size: GutterSize.lg)

// Extra large
ArcaneGutter(size: GutterSize.xl)

// 2XL
ArcaneGutter(size: GutterSize.xl2)

Examples#

Page Sections#

ArcaneColumn(
  children: [
    ArcaneSection(
      children: [
        ArcaneContainer(
          children: [
            ArcaneHeadline(text: 'Hero Title'),
            ArcaneSubheadline(text: 'Hero subtitle'),
          ],
        ),
      ],
    ),
    ArcaneGutter(size: GutterSize.xl),
    ArcaneSection(
      children: [
        ArcaneContainer(
          children: [
            ArcaneHeading(text: 'Features'),
            // Feature cards...
          ],
        ),
      ],
    ),
    ArcaneGutter(size: GutterSize.xl),
    ArcaneSection(
      children: [
        ArcaneContainer(
          children: [
            ArcaneHeading(text: 'Testimonials'),
            // Testimonial cards...
          ],
        ),
      ],
    ),
  ],
)

Form Sections#

ArcaneColumn(
  children: [
    ArcaneColumn(
      gap: Gap.md,
      children: [
        ArcaneHeading(text: 'Account'),
        ArcaneTextInput(label: 'Email'),
        ArcaneTextInput(label: 'Password'),
      ],
    ),
    ArcaneGutter(size: GutterSize.lg),
    ArcaneColumn(
      gap: Gap.md,
      children: [
        ArcaneHeading(text: 'Profile'),
        ArcaneTextInput(label: 'Display Name'),
        ArcaneTextArea(label: 'Bio'),
      ],
    ),
    ArcaneGutter(size: GutterSize.lg),
    ArcaneButton.primary(label: 'Save', onPressed: () {}),
  ],
)

Card Groups#

ArcaneColumn(
  children: [
    ArcaneText('Popular'),
    ArcaneGutter(size: GutterSize.sm),
    ArcaneRow(
      gap: Gap.md,
      children: [
        for (var item in popularItems)
          ArcaneCard(child: ...),
      ],
    ),
    ArcaneGutter(size: GutterSize.xl),
    ArcaneText('Recent'),
    ArcaneGutter(size: GutterSize.sm),
    ArcaneRow(
      gap: Gap.md,
      children: [
        for (var item in recentItems)
          ArcaneCard(child: ...),
      ],
    ),
  ],
)

Article Layout#

ArcaneContainer(
  maxWidth: ContainerMaxWidth.md,
  children: [
    ArcaneHeadline(text: 'Article Title'),
    ArcaneGutter(size: GutterSize.sm),
    ArcaneRow(
      gap: Gap.sm,
      children: [
        ArcaneAvatar(size: AvatarSize.small),
        ArcaneText('Author Name'),
        ArcaneText('•'),
        ArcaneText('Jan 15, 2024'),
      ],
    ),
    ArcaneGutter(size: GutterSize.lg),
    ArcaneParagraph(text: 'First paragraph...'),
    ArcaneGutter(size: GutterSize.md),
    ArcaneParagraph(text: 'Second paragraph...'),
    ArcaneGutter(size: GutterSize.xl),
    ArcaneDivider(),
    ArcaneGutter(size: GutterSize.md),
    ArcaneHeading(text: 'Related Articles'),
  ],
)

Related Components#

• ArcaneSpacer - Flex space filler
• ArcaneDivider - Visual divider line
• ArcaneSection - Section with spacing