Main

Main groups route sections in a growing column and coordinates adjoining frame rules and crosses.

01Preview

First section

Second section · one shared junction

02Usage

Load @dg/ui/styles.css once in the root layout.

<script>
  import { Main, Section } from "@dg/ui";
</script>

<Main>
  <Section><h1>Collection</h1></Section>
  <Section><p>Collection content.</p></Section>
</Main>

03Notes

Native HTML attributes, DOM callbacks, class and style are forwarded to the main or div element.
Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
Place framed sections directly in Main; they drop their bottom rule so each junction is drawn once. The last section element grows into available height, even when a dialog or another element follows it. Header and Footer retain their content height. The sections class is internal, not a utility.

04Parameters

Name	Type	Default	Description
`as`	`'main' \| 'div'`	`"main"`	Use main once per page. Use div for an embedded group without another main landmark.
`id`	`string`	`"main" when as="main"`	Target for `SkipLink`. No default ID when as is div; keep a custom ID consistent with the skip link.
`class`	`string`	`""`	Additional classes on the content group.
`children`	`Snippet`	`undefined`	Framed sections. The final section grows into the remaining viewport height.

05Accessibility

Use one main landmark in the root layout. Routes inside that layout must not add another Main. Embedded groups use as="div"; keep any custom content ID consistent with SkipLink.

Related subjects

Markdown source: components/main