Aside

shadow

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

Examples of use

note

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

When to use

Use wje-aside 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

Name	Description
--wje-aside-width	CSS custom property that controls width.
--wje-aside-top	CSS custom property used to style the component (top).
--wje-aside-border-color	CSS custom property that controls border color.
--wje-aside-border-width	CSS custom property that controls border width.
--wje-aside-border-style	CSS custom property used to style the component (border style).

Slots

Name	Description
default	Default slot for the main component content.