sigil-layout

Sigil Layout

Compose page layouts using Sigil's page, section, rhythm, and structural-visibility primitives.

When to Use

• User asks to build a page layout, section, or screen
• User says "layout", "page structure", "grid", "compose a page"
• User wants to use sigil-grid, sigil-rail, or sigil-cross components
• User is building a landing page, dashboard, docs layout, or app shell

How to Use

1. Core page primitives

Sigil page code should describe content and structure. Token math, snap padding, gutter phase, and divider stroke placement live inside package primitives.

2. Page layout pattern

import {
  AccentCTA,
  SigilActionRow,
  SigilDivider,
  SigilGhostLink,
  SigilHero,
  SigilHeroContent,
  SigilHeroLayout,
  SigilHeroMedia,
  SigilPage,
  SigilSection,
  SigilSectionHeader,
} from "@sigil-ui/components";

export function LandingPage() {
  return (
    <SigilPage rhythm="locked" chrome="rails">
      <SigilHero>
        <SigilHeroLayout>
          <SigilHeroContent>
            <SigilSectionHeader
              label="Components"
              heading="Browse the full component system."
              description="Tokens and grid rhythm are handled by Sigil."
            />
            <SigilActionRow>
              <AccentCTA>Browse Components</AccentCTA>
              <SigilGhostLink href="/docs">Read Docs</SigilGhostLink>
            </SigilActionRow>
          </SigilHeroContent>
          <SigilHeroMedia>{/* product visual */}</SigilHeroMedia>
        </SigilHeroLayout>
      </SigilHero>
      <SigilDivider />
    </SigilPage>
  );
}