Lily Design System™

Padding Reset

A container that resets padding inside fluid-width containers. PaddingReset uses negative margins to counteract parent padding, allowing content to extend edge-to-edge.

This headless component uses a <div> element as a presentational container with no ARIA semantics.

Example

PaddingReset
Show demo markup 
<div class="padding-reset" aria-label="a container that resets padding inside fluid-width containers">PaddingReset</div>
Usage example 
<ContentBlock width="fluid">
  <PaddingReset>
    <img src="full-bleed.jpg" alt="Full bleed image" />
  </PaddingReset>
</ContentBlock>
Show Svelte source 
// In your Svelte component:
import PaddingReset from "lily-design-system-svelte-headless/components/PaddingReset/PaddingReset.svelte";

<PaddingReset>
  <!-- content -->
</PaddingReset>

Usage

<ContentBlock width="fluid">
  <PaddingReset>
    <img src="full-bleed.jpg" alt="Full bleed image" />
  </PaddingReset>
</ContentBlock>
<ArticleLayout>
  <ContentBlock width="fluid">
    <PaddingReset>
      <video src="hero-video.mp4" autoplay muted loop>
        Your browser does not support the video tag.
      </video>
    </PaddingReset>
  </ContentBlock>
</ArticleLayout>

Props

  • children: slot (required) -- content
  • ...restProps: Any additional HTML attributes

Keyboard Interactions

  • None

ARIA

  • None -- presentational container

When to Use

  • Use inside fluid ContentBlock when content needs to extend edge-to-edge
  • Use for full-bleed images, videos, or backgrounds within padded containers
  • Use when you need to counteract inherited padding for specific content

When Not to Use

  • Do not use outside fluid containers
  • Do not use when the parent container has no padding to reset
  • Do not use as a general-purpose layout reset

Headless

This component provides a <div> element for padding reset, with zero visual styling. The consumer is responsible for all CSS including negative margins, overflow handling, and responsive behavior.

Styles

The consumer provides all CSS styling. The component renders with a .padding-reset class for targeting. No default styles are included -- this is a fully headless component.

Testing

  • Verify the component renders a <div> element with class padding-reset
  • Verify child content slots are rendered correctly
  • Verify pass-through attributes are applied

Advice

  • Designers: Use PaddingReset sparingly for full-bleed content like hero images, maps, or edge-to-edge data visualizations.
  • Developers: Set negative margins in your CSS to match the parent container's padding. Ensure overflow is handled correctly to prevent horizontal scrollbars.

Implementation Notes

  • Resets horizontal padding when content needs to break out of a padded container
  • Useful inside fluid-width ContentBlock elements
  • Uses negative margins to counteract parent padding
  • Inspired by Reuters Graphics PaddingReset component

Related components

  • container — a generic block-level content container

References

  • Reuters Graphics PaddingReset component
  • Documentation: index.md
  • CSS class: .padding-reset in css-style-sheet-template.css
  • HTML headless: lily-design-system-html-headless/components/padding-reset.html

Canonical contract

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

Metadata

  • Component: padding-reset
  • PascalCase: PaddingReset
  • Description: a container that resets padding inside fluid-width containers
  • 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: .padding-reset
  • Interactive: no

ARIA

  • None -- presentational container

Keyboard

  • None

Props

  • children: slot (required) -- content
  • ...restProps: Any additional HTML attributes