Lily Design System™

Container With Fluid Width

A container with fluid width spans the full width of its parent and applies configurable horizontal padding, providing edge spacing for full-bleed sections without imposing a maximum width.

Use it for hero sections, banners, and any layout area that should stretch across the viewport while keeping content from sitting flush against the screen edge.

Example

ContainerWithFluidWidth
Show demo markup 
<div class="container-with-fluid-width" aria-label="a full-width content wrapper with horizontal padding">ContainerWithFluidWidth</div>
Usage example 
<script lang="ts">
  import ContainerWithFluidWidth from './ContainerWithFluidWidth.svelte';
</script>

<ContainerWithFluidWidth paddingInline="clamp(1rem, 4vw, 3rem)">
  <section>Section content here.</section>
</ContainerWithFluidWidth>
Show Svelte source 
// In your Svelte component:
import ContainerWithFluidWidth from "lily-design-system-svelte-headless/components/ContainerWithFluidWidth/ContainerWithFluidWidth.svelte";

<ContainerWithFluidWidth>
  <!-- content -->
</ContainerWithFluidWidth>

Usage

Default 1rem padding:

<ContainerWithFluidWidth>
  <Hero>...</Hero>
</ContainerWithFluidWidth>

Larger inline padding:

<ContainerWithFluidWidth paddingInline="2rem">
  <Banner>...</Banner>
</ContainerWithFluidWidth>

Props

  • paddingInline: string (default: "1rem") -- horizontal padding 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.

When to Use

  • Use for full-bleed page sections that span the entire viewport width.
  • Use as a wrapper around fixed-width containers to provide edge padding.
  • Use when content backgrounds (color, image) need to extend edge-to-edge.

When Not to Use

  • Do not use when content must be capped at a max-width (use ContainerWithFixedWidth).
  • Do not use as a generic flex/grid layout (use FlexStack or Grid).

Headless

Provides only the full-width plus inline-padding behavior via inline styles. Backgrounds, borders, vertical spacing, and any other visual treatment are the consumer's responsibility.

Styles

Consumers may target the container-with-fluid-width class for backgrounds, section spacing, or responsive padding overrides.

Testing

  • Verify the component renders a <div> element with class container-with-fluid-width
  • Verify the inline style includes width: 100% and padding-inline: {paddingInline}
  • Verify the data-padding-inline attribute matches the paddingInline prop
  • Verify children content is rendered

Advice

  • Designers: Use a padding scale that holds up across breakpoints; consider responsive overrides via consumer CSS for narrower viewports.
  • Developers: Compose ContainerWithFluidWidth (background and edge padding) around ContainerWithFixedWidth (content width cap) for the common full-bleed-with-centered-content pattern.

Implementation Notes

  • Renders a <div> with class="container-with-fluid-width"
  • Applies inline style width: 100%; padding-inline: {paddingInline};
  • Sets data-padding-inline={paddingInline} for consumer CSS hooks
  • Does not center children or constrain width — pair with ContainerWithFixedWidth inside if needed

Related components

  • container — a generic block-level content container
  • container-with-fixed-width — a centered content wrapper with a fixed max-width breakpoint

References

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

Canonical contract

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

Metadata

  • Component: container-with-fluid-width
  • PascalCase: ContainerWithFluidWidth
  • Description: a full-width content wrapper with horizontal padding
  • 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-fluid-width
  • Interactive: no

ARIA

  • None — purely structural

Keyboard

  • None

Props

  • paddingInline: string (default: "1rem") -- horizontal padding CSS value
  • children: slot -- wrapped content
  • ...restProps: any additional HTML attributes