Holo Container

The <holo-container> component centers its content within a maximum width, optionally applying horizontal inset padding.

When to use

Use it for:

• Constraining content to a readable maximum width (sm to xl, or full) and centring it.
• Adding consistent inline padding at the edge of the page or a section.

Don’t use it for:

• Arranging children in rows or columns. Use Stack or Grid.
• A visible surface with a border or shadow. Use Card.
• Marking up page landmarks. It carries no semantics.

Live Previews

Default (lg, padded)

Content constrained to a large max-width.

<holo-container max-width="lg" padded>
  <div>Content constrained to a large max-width.</div>
</holo-container>

Small, unpadded

A narrower container.

<holo-container max-width="sm">
  <div>A narrower container.</div>
</holo-container>

Accessibility

The container is a purely presentational layout element. It renders a slot with no role, no landmark and no focus behaviour, so it has no effect on the accessibility tree.

You provide:

• Real landmarks and headings. Put <main>, <header>, <nav> and heading elements inside (or around) the container.
• Content that still works at 320 CSS px wide and at 400% zoom. Avoid fixed widths inside the container.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-container';

Properties

Property	Attribute	Type	Default	Description
maxWidth	max-width	"full" | "lg" | "md" | "sm" | "xl"	'lg'	The maximum width of the container's content area.
padded	padded	boolean	true	If true, applies horizontal inset padding to the container.

Slots

Slot	Description
(default)	The content to center and constrain.

CSS custom properties

Property	Description
--holo-container-max-width-lg	Maximum width when max-width="lg".
--holo-container-max-width-md	Maximum width when max-width="md".
--holo-container-max-width-sm	Maximum width when max-width="sm".
--holo-container-max-width-xl	Maximum width when max-width="xl".
--holo-container-padding	Horizontal inset padding applied when padded is true.