Skip to main content

Col

shadow

The Col (column) component is the basic building block of Grid and allows you to horizontally arrange content and adjust its layout based on the screen size. It is used by adding it inside the Row element.

Note

For more information on using Col, navigate to the system documentation Grid.

When to use​

Use wje-col 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
defaultDefault slot for the main component content.

Content