Lily Design System™

Grail Layout Right Aside

GrailLayoutRightAside is a headless container for the right aside section of a GrailLayout. It typically contains supplementary content, ads, related links, or contextual information.

Example

Show demo markup 
<aside class="grail-layout-right-aside">Right sidebar</aside>
Usage example 
<script lang="ts">
    import GrailLayoutRightAside from "./GrailLayoutRightAside.svelte";
</script>

<GrailLayoutRightAside>
    <aside aria-label="Related">
        <h2>Related</h2>
        <ul><li><a href="/r1">Related 1</a></li></ul>
    </aside>
</GrailLayoutRightAside>
Show Svelte source 
// In your Svelte component:
import GrailLayoutRightAside from "lily-design-system-svelte-headless/components/GrailLayoutRightAside/GrailLayoutRightAside.svelte";

<GrailLayoutRightAside>
  <!-- content -->
</GrailLayoutRightAside>

Usage

<GrailLayout>
  <GrailLayoutTopHeader>...</GrailLayoutTopHeader>
  <GrailLayoutLeftAside>...</GrailLayoutLeftAside>
  <GrailLayoutCenterMain>...</GrailLayoutCenterMain>
  <GrailLayoutRightAside>
    <h2>Quick links</h2>
    <ul>
      <li><a href="/help">Help</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul>
  </GrailLayoutRightAside>
  <GrailLayoutBottomFooter>...</GrailLayoutBottomFooter>
</GrailLayout>

Props

  • children: slot (required) -- content to render inside the right aside
  • ...restProps: unknown -- additional attributes spread onto the <div> element

When to Use

  • Use inside GrailLayout as the right sidebar for supplementary content, related links, or contextual information.
  • Use for quick links, help panels, or contextual widgets alongside the main content.
  • Use when the page layout needs a secondary panel on the right-hand side.

When Not to Use

  • Do not use outside GrailLayout -- use Sidebar for standalone side panels.
  • Do not use for primary navigation -- use GrailLayoutLeftAside instead.

Keyboard Interactions

  • No keyboard interactions — this is a passive landmark container
  • Focusable descendants follow native tab order

ARIA

  • Native <aside> exposes a complementary landmark — give it an aria-label if a page has more than one aside so screen readers can distinguish them
  • Implicit complementary role from the <aside> element when used as a top-level landmark

Headless

This headless component renders semantic HTML. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The consumer provides all CSS styling. The component renders with a .grail-layout-right-aside class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <aside> element with class grail-layout-right-aside
  • Verify pass-through attributes are applied

Composition

GrailLayoutRightAside is used as a child of GrailLayout. Place semantic <aside> elements inside for proper accessibility.

Related components

  • grail-layout — a responsive web design structure with header, left aside, center main, right aside, footer
  • 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-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

Implementation Notes

  • Renders a <aside> element for the right aside section
  • Spreads restProps onto the div for consumer customization
  • No styles applied; consumer provides all styling

Canonical contract

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

Metadata

  • Component: grail-layout-right-aside
  • PascalCase: GrailLayoutRightAside
  • Description: grail layout right aside sidebar with <aside> tag
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <aside>
  • CSS class: .grail-layout-right-aside
  • Interactive: no

ARIA

  • Native <aside> element exposes a complementary landmark
  • Consumers should add aria-label (or aria-labelledby) to distinguish from other asides on the page

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • children: slot (required) -- content to render inside the right aside
  • ...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>

```