Skip to main content

Layout

shadow

WebJET Elements makes it easy to compose page layouts using five basic building blocks: Container, Header, Main, Aside, and Footer. For more complex pages, you can also combine them with Grid.

Examples of use​

The sample consists of a typical layout combination of header, main, aside and footer to make it clear how these building blocks combine.

When to use​

Use the WebJET Elements layout primitives when you need a stable page structure with a clear hierarchy of header, main content, sidebar and footer.

When not to use​

Do not use these elements to solve business logic or orchestrate application state. Their role is structure and layout.

Accessibility​

Preserve the semantics of the document (header, main, aside, footer) and the logical order of focusable elements. There should always be just one main content region on a page.

  • Define desktop/mobile breakpoints first and then fine-tune the details.
  • Prefer consistent spacing tokens over ad-hoc margin/padding values.
  • For layouts with overflow, always test keyboard navigation and readers.

Attributes and properties​

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Events​

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods​

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts​

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables​

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots​

Pre tento komponent nie sú dostupné žiadne sloty.

Content