Lily Design System™

Container With Fixed Width

A container with a fixed maximum width centers its children horizontally and caps the content area at a configurable breakpoint, giving long-form text and page layouts a comfortable reading width on wide displays.

Use it for the outermost layout wrapper around article body text, marketing sections, or any content area that should stop expanding past a chosen maximum width.

Example

ContainerWithFixedWidth
Show demo markup 
<div class="container-with-fixed-width" aria-label="a centered content wrapper with a fixed max-width breakpoint">ContainerWithFixedWidth</div>
Usage example 
<script lang="ts">
  import ContainerWithFixedWidth from './ContainerWithFixedWidth.svelte';
</script>

<ContainerWithFixedWidth maxWidth="960px">
  <article>Article content here.</article>
</ContainerWithFixedWidth>
Show Svelte source 
// In your Svelte component:
import ContainerWithFixedWidth from "lily-design-system-svelte-headless/components/ContainerWithFixedWidth/ContainerWithFixedWidth.svelte";

<ContainerWithFixedWidth>
  <!-- content -->
</ContainerWithFixedWidth>

Usage

Default 1200px wrapper:

<ContainerWithFixedWidth>
  <Article>...</Article>
</ContainerWithFixedWidth>

Custom narrower wrapper for prose:

<ContainerWithFixedWidth maxWidth="720px">
  <BodyText>...</BodyText>
</ContainerWithFixedWidth>

Props

  • maxWidth: string (default: "1200px") -- max-width CSS value
  • children: slot -- the wrapped content
  • ...restProps: any additional HTML attributes

Keyboard Interactions

  • None -- this is a structural layout container.

ARIA

  • None — purely structural. Use a landmark element (Header, Main, Footer) inside if a landmark is required.

When to Use

  • Use as the outermost layout wrapper to constrain reading width.
  • Use to center page content on wide viewports.
  • Use when the content area should never exceed a chosen breakpoint.

When Not to Use

  • Do not use for full-bleed sections (use ContainerWithFluidWidth instead).
  • Do not use as the only horizontal padding mechanism — combine with a fluid-width container or padding utility for edge spacing on small screens.

Headless

The component supplies only the centering and max-width behavior via inline styles and a class hook. All padding, background, border, and shadow styling is the consumer's responsibility.

Styles

Consumer CSS may target the container-with-fixed-width class or the data-max-width attribute to add padding or other treatment:

.container-with-fixed-width {
  padding-inline: 1rem;
}

Testing

  • Verify the component renders a <div> element with class container-with-fixed-width
  • Verify the inline style includes max-width: {maxWidth} and margin-inline: auto
  • Verify the data-max-width attribute matches the maxWidth prop
  • Verify children content is rendered

Advice

  • Designers: Choose maxWidth based on optimal line length for the content type. 65–75 characters per line is a common reading-width target.
  • Developers: Combine with horizontal padding (either via consumer CSS on this element or a parent fluid container) so content does not sit flush against the viewport edge on narrow screens.

Implementation Notes

  • Renders a <div> with class="container-with-fixed-width"
  • Applies inline style max-width: {maxWidth}; margin-inline: auto; so the container centers itself within its parent
  • Sets data-max-width={maxWidth} for consumer CSS hooks
  • Does not impose padding, background, or any other visual treatment

Related components

  • container — a generic block-level content container
  • container-with-fluid-width — a full-width content wrapper with horizontal padding

References

  • MDN max-width: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
  • MDN margin-inline: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: container-with-fixed-width
  • PascalCase: ContainerWithFixedWidth
  • Description: a centered content wrapper with a fixed max-width breakpoint
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .container-with-fixed-width
  • Interactive: no

ARIA

  • None — purely structural

Keyboard

  • None

Props

  • maxWidth: string (default: "1200px") -- max-width CSS value
  • children: slot -- wrapped content
  • ...restProps: any additional HTML attributes