Container

What it does

The .container class provides a responsive, centered layout wrapper for your content. It ensures your content does not exceed a maximum width, keeps it centered, and applies consistent horizontal padding that adapts at different breakpoints.

Key Features

• Centers content horizontally using margin-inline: auto.
• Responsive max-width: Content width is limited to a maximum (--container-content-max-width, default 140ch), but never exceeds the viewport minus the horizontal padding.
• Customizable horizontal padding: Uses the --padding-inline variable, which can be set globally or overridden at breakpoints.
• Adapts at breakpoints: Padding increases at sm, md, and lg breakpoints for better spacing on larger screens.

How to use

1. Basic usage

<div class="container">
  <p>Your content goes here.</p>
</div>

2. Customizing max-width or padding

You can override the CSS variables to adjust the container's width or padding:

<div class="container" style="--container-content-max-width: 80ch; --padding-inline: 2rem;">
  ...
</div>

How it works

• The container's width is set to the smaller of 100% - padding or the max width.
• Padding is controlled by CSS variables and adapts at breakpoints using SCSS mixins.
• The container is always centered in the viewport.

Example

<div class="container">
  <h1>Welcome</h1>
  <p>This content is centered and will never be too wide, even on large screens.</p>
</div>

Result:

• Content is centered and constrained in width.
• Horizontal padding adapts to screen size for optimal readability.

Tip: Use .container as the outer wrapper for main content sections to maintain a clean, readable layout across all devices.

HTML Code (Demo)

<div class="container">
  <div class="ds-showcase--container">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex quos doloribus autem praesentium quod voluptatem quaerat accusamus labore ullam, omnis corrupti aperiam natus fuga repudiandae repellendus, ipsa enim vitae ut!</p>
  </div>
</div>

Configuration

{
  "headline": "Container"
}