Container

<zeno-container>LayoutSource

Centres content and keeps it within a maximum width.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Maximum widths

The container centres its content and stops growing at maxWidth: xs is 480px, sm 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px. The default is lg. A container is never wider than the space it is in, so the larger sizes look the same in a narrow preview.

Extra small: at most 480px wide. Small: at most 640px wide. Medium: at most 768px wide. Default, large: at most 1024px wide.

<zeno-container maxWidth="xs">
  <zeno-card outlined compact>Extra small: at most 480px wide.</zeno-card>
</zeno-container>
<zeno-container maxWidth="sm">
  <zeno-card outlined compact>Small: at most 640px wide.</zeno-card>
</zeno-container>
<zeno-container maxWidth="md">
  <zeno-card outlined compact>Medium: at most 768px wide.</zeno-card>
</zeno-container>
<zeno-container>
  <zeno-card outlined compact>Default, large: at most 1024px wide.</zeno-card>
</zeno-container>

Fluid

fluid removes the maximum width. The side padding stays.

This container fills the space it is given.

<zeno-container fluid>
  <zeno-card outlined compact>This container fills the space it is given.</zeno-card>
</zeno-container>

No padding

A container has padding on its left and right side, and the padding grows on wider screens. no-padding removes it.

With side padding. Without side padding.

<zeno-container maxWidth="sm">
  <zeno-card outlined compact>With side padding.</zeno-card>
</zeno-container>
<zeno-container maxWidth="sm" no-padding>
  <zeno-card outlined compact>Without side padding.</zeno-card>
</zeno-container>

Attributes and properties

Property	Attribute	Type	Default	Description
maxWidth	maxwidthreflects	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'lg'
fluid	fluidreflects	boolean	false
noPadding	no-paddingreflects	boolean	false
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

This element sends no events.

Slots

Slot	Description
Default	The content.

CSS parts

Part
base

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

This element handles no keys of its own.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• The container does not take focus and handles no keys.
• It renders a <div> with role="region". The name of the region is the aria-label you set, or “Content container”.
• In print, the maximum width and the padding are removed.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

4 of the 8 properties, methods, events, slots and parts above have no description in the source

• the property maxWidth
• the property fluid
• the property noPadding
• the part base

Known gaps:

• Every container is a named region landmark. A page with several containers gets several landmarks, all called “Content container” unless each has its own aria-label. A layout wrapper should have no role.
• The default name “Content container” is English.
• The attribute for maxWidth is maxwidth, with no hyphen, while no-padding on the same element has one. HTML ignores case, so maxWidth in markup also works.