Skip to main content

Layout

shadow

WebJET Elements makes it easy to compose page structure using five layout primitives: Container, Header, Main, Aside, and Footer. For more complex screens, you can combine them with the Grid system.

Examples of use​

This example combines typical layout building blocks such as header, main, aside, and footer so their composition is easy to read.

When to use​

Use the 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 layout components to handle business logic or application state orchestration. Their role is structure and composition.

Accessibility​

Preserve document semantics (header, main, aside, footer) and logical tab/focus order. A page should have only one primary main region.

Best Practices​

  • Define mobile/desktop breakpoints first, then refine visual details.
  • Prefer spacing tokens over ad-hoc margin/padding overrides.
  • Test keyboard and screen reader behavior for overflow scenarios.

Attributes and Properties​

No properties available for this component.

Events​

No events available for this component.

Methods​

No public methods available for this component.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

No slots available for this component.

Content