## Overview

`sd-container` – Used to enclose and highlight specific parts of content on a page.

## API

### Examples

Use the styles tool (with `style` + `example` args) to retrieve the HTML for any of these examples:

- sd-container/variants
- sd-container/padding
- sd-container/custom-padding
- sd-container/triangle-position
- sd-container/triangle-border
- sd-container/triangle-color

## Guidelines

### Use Cases

- Group related content together, such as text, images, or interactive elements, to create a cohesive visual layout.
- Isolate content for special emphasis, such as promotional banners, alerts, or highlighted features.

### Rules

### Placement

- Use containers sparingly in order to keep their emphasis.

### Background

- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.

### Accessibility

- If the container forms a distinct section (e.g., a highlighted block), ensure a heading or aria-label is added so screen readers recognize it as a standalone region.
- Headers play a crucial role in visually organizing information within the user interface as they act as guides, helping users navigate content more effectively by quickly identifying different sections.
- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.