# Section


## Examples

### WithLongTitleAndAction

```html
<m-section aria-label=${args.ariaLabel} role=${args.role} variant=${args.variant} >
      <h2 slot="title">This is a Very Long Section Title That Demonstrates How the Layout Handles Extended Text Content</h2>
      <m-tag slot="action" variant="success">Active</m-tag>
      <p slot="description">This section demonstrates how the actions slot behaves when the title is quite long and takes up significant space.</p>
      <m-box spacing="s" borderradius>Content Item 1</m-box>
      <m-box spacing="s" borderradius>Content Item 2</m-box>
      <m-box spacing="s" borderradius>Content Item 3</m-box>
    </m-section>
```

## Usage

The `Section` component provides a semantic container with header and content areas. It creates a standardized section layout with optional title and description areas, followed by the main content. It provides consistent spacing and typography for section headers and content, with support for different heading levels and description text.

### Accessibility Features

The component includes built-in accessibility features:

- **Default role**: The section has a default `role="region"` which helps screen readers identify it as a landmark region
- **Custom role**: You can override the role attribute to use other semantic roles like `complementary`, `contentinfo`, etc.
- **aria-label**: Use the `aria-label` attribute to provide a descriptive label for the section when the title slot content isn't sufficient for screen readers

### Typical usage pattern

- Use within the default slot of `m-view` for organizing page content
- Place section titles (h1-h6) in the title slot
- Place descriptive text in the description slot
- Place main section content (forms, lists, cards) in the default slot
- Use the box variant for sections that need visual separation
- Add `aria-label` for sections that need additional context for assistive technologies
- Override the `role` attribute when the default "region" role isn't semantically appropriate