Lily Design System™

Grail Layout

GrailLayout is a headless container that provides the classic "holy grail" web design structure with five sections: a full-width header, a left aside, a main content area, a right aside, and a full-width footer.

Use GrailLayout as the outermost wrapper for pages that need a header, two sidebars flanking the main content, and a footer. The component renders a semantic <div> with no layout styles, allowing consumers to apply CSS Grid, Flexbox, or any layout system.

Example

Header
Main content
Footer
Show demo markup 
<div class="grail-layout"><header class="grail-layout-top-header">Header</header><aside class="grail-layout-left-aside">Left sidebar</aside><main class="grail-layout-center-main">Main content</main><aside class="grail-layout-right-aside">Right sidebar</aside><footer class="grail-layout-bottom-footer">Footer</footer></div>
Usage example 
<script lang="ts">
    import GrailLayout from "./GrailLayout.svelte";
    import GrailLayoutTopHeader from "../GrailLayoutTopHeader/GrailLayoutTopHeader.svelte";
    import GrailLayoutLeftAside from "../GrailLayoutLeftAside/GrailLayoutLeftAside.svelte";
    import GrailLayoutCenterMain from "../GrailLayoutCenterMain/GrailLayoutCenterMain.svelte";
    import GrailLayoutRightAside from "../GrailLayoutRightAside/GrailLayoutRightAside.svelte";
    import GrailLayoutBottomFooter from "../GrailLayoutBottomFooter/GrailLayoutBottomFooter.svelte";
</script>

<GrailLayout>
    <GrailLayoutTopHeader>
        <header><h1>Site</h1></header>
    </GrailLayoutTopHeader>
    <GrailLayoutLeftAside>
        <nav aria-label="Primary">...</nav>
    </GrailLayoutLeftAside>
    <GrailLayoutCenterMain>
        <main><h2>Welcome</h2></main>
    </GrailLayoutCenterMain>
    <GrailLayoutRightAside>
        <aside>Related content</aside>
    </GrailLayoutRightAside>
    <GrailLayoutBottomFooter>
        <footer><small>Copyright 2026</small></footer>
    </GrailLayoutBottomFooter>
</GrailLayout>
Show Svelte source 
// In your Svelte component:
import GrailLayout from "lily-design-system-svelte-headless/components/GrailLayout/GrailLayout.svelte";

<GrailLayout>
  <!-- content -->
</GrailLayout>

Usage

<GrailLayout>
  <GrailLayoutTopHeader>
    <Header label="Clinical Portal" />
  </GrailLayoutTopHeader>
  <GrailLayoutLeftAside>
    <TreeNav label="Sections">...</TreeNav>
  </GrailLayoutLeftAside>
  <GrailLayoutCenterMain>
    <h1>Patient Dashboard</h1>
    <p>Main content area</p>
  </GrailLayoutCenterMain>
  <GrailLayoutRightAside>
    <h2>Quick links</h2>
    <ul><li><a href="/help">Help</a></li></ul>
  </GrailLayoutRightAside>
  <GrailLayoutBottomFooter>
    <Footer />
  </GrailLayoutBottomFooter>
</GrailLayout>

Props

  • children: slot (required) -- layout section elements to render inside the container
  • ...restProps: unknown -- additional attributes spread onto the <div> element

Keyboard Interactions

None. This is a structural layout component with no interactive behavior.

ARIA

No explicit ARIA attributes. Consumers should use semantic landmark elements within each section (e.g., <header> in GrailLayoutTopHeader, <main> in GrailLayoutCenterMain, <nav> or <aside> in sidebars, <footer> in GrailLayoutBottomFooter).

When to Use

  • Use for a responsive page structure with header, left sidebar, center main content, right sidebar, and footer.
  • Use as the primary layout for content-heavy applications such as dashboards, admin panels, or documentation sites.
  • Use when the page needs two sidebars flanking the main content area.
  • Use for clinical portals or case management tools where navigation and contextual information surround the primary content.

When Not to Use

  • Do not use for simple single-column pages -- use a plain <main> element instead.
  • Do not use for transactional forms -- keep the layout simple with no sidebars.
  • Do not use for landing pages or marketing pages where a full-bleed layout is more appropriate.

Headless

This headless component provides a <div> container with no layout styles. The consumer applies CSS Grid, Flexbox, or any layout system to position the five sections. Each section component (GrailLayoutTopHeader, GrailLayoutLeftAside, GrailLayoutCenterMain, GrailLayoutRightAside, GrailLayoutBottomFooter) renders a simple <div> with its own CSS class for targeting.

Styles

The consumer provides all CSS styling. Common approaches include CSS Grid with named grid areas or Flexbox with wrapping. The component renders with a .grail-layout class for targeting.

Testing

  • Verify the component renders a <div> element with the grail-layout class
  • Verify child content renders inside the container
  • Verify pass-through attributes are applied to the div

Advice

  • Designers: Define clear visual hierarchy between sections. Ensure the layout degrades gracefully on smaller screens by stacking sections vertically.
  • Developers: Use CSS Grid with grid-template-areas for the most readable layout implementation. Consider making sidebars collapsible on mobile viewports.

Implementation Notes

  • Renders a <div> element as the layout container
  • Consumer provides GrailLayoutTopHeader, GrailLayoutLeftAside, GrailLayoutCenterMain, GrailLayoutRightAside, and GrailLayoutBottomFooter children
  • Spreads restProps onto the div for consumer customization
  • No layout styles applied; consumers provide CSS Grid or Flexbox for positioning

Composition

GrailLayout is the container for GrailLayoutTopHeader, GrailLayoutLeftAside, GrailLayoutCenterMain, GrailLayoutRightAside, and GrailLayoutBottomFooter children. Each child section renders a <div> with its own CSS class.

Related components

  • grail-layout-bottom-footer — grail layout bottom footer full width with <footer> tag
  • grail-layout-center-main — grail layout center main content with <main> tag
  • grail-layout-left-aside — grail layout left aside sidebar with <aside> tag
  • grail-layout-right-aside — grail layout right aside sidebar with <aside> tag
  • grail-layout-top-header — grail layout top header full width with <header> tag

References

  • CSS Grid Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
  • Holy Grail Layout: https://en.wikipedia.org/wiki/Holy_grail_(web_design)

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: grail-layout
  • PascalCase: GrailLayout
  • Description: a responsive web design structure with header, left aside, center main, right aside, footer
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .grail-layout
  • Interactive: no

ARIA

  • Renders no implicit landmark — the wrapper is a generic container
  • The contained <header>, <aside>, <main>, and <footer> elements provide page-level landmarks

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • children: slot (required) -- layout section elements to render inside the container
  • ...restProps: unknown -- additional attributes spread onto the <div> element

### Grail layout pattern: GrailLayout → GrailLayoutTop, GrailLayoutLeft, GrailLayoutCenter, GrailLayoutRight, GrailLayoutBottom

```tsx

<GrailLayout>

<GrailLayoutTopHeader>…</GrailLayoutTopHeader>

<GrailLayoutLeftAside>…</GrailLayoutLeftAside>

<GrailLayoutCenterMain>…</GrailLayoutCenterMain>

<GrailLayoutRightAside>…</GrailLayoutRightAside>

<GrailLayoutBottomFooter>…</GrailLayoutBottomFooter>

</GrailLayout>

```