Skip to main content

Main

shadow

Main is a layout element and is displayed next to the Aside element. It is mostly used to display the main content.

Examples of use​

note

For information on using the Main element, navigate to the Layout documentation.

When to use​

Use wje-main to compose stable page structure with clear visual and semantic hierarchy.

When not to use​

Do not use layout components to handle business logic or application orchestration.

Accessibility​

Preserve document semantics (header, main, aside, footer) and logical tab/focus order.

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​

NameDescription
defaultThe default slot for the main section.

Content