---

## Section
Content section with title/subtitle, badges, and semantic footer.

**Import:** `import { Section } from '@urbicon-ui/docs';`

### Examples
```svelte
<Section id="usage" title="Usage" subtitle="Quick start">
  <p>Install and import the component.</p>
</Section>
```

### Variants
- intent: default, hero, primary, secondary (default: default)
- size: lg, md, sm, xl (default: lg)
- centered: false, true (default: false)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| id | `string` | yes |  | Section ID for navigation anchors |
| ...SectionVariantProps | `VariantProps` | no |  | Styling variants from SectionVariantProps |
| badges | `Array<{
    text: string;
    variant?: 'soft' | 'filled';
    intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
  }>` | no |  | Badges property for the Section component |
| children | `Snippet` | no |  | Main content snippet |
| class | `string` | no |  | Custom CSS class for the section element |
| footerSnippet | `Snippet` | no |  | Optional footer snippet (renders a semantic <footer>) |
| headingLevel | `1 | 2 | 3 | 4 | 5 | 6` | no | 2 | Heading level for the section title, clamped to 1..6 |
| marker | `string` | no |  | Optional editorial marker before the title (e.g. `"01"` renders as a quieter monospace stamp). |
| meta | `string` | no |  | Optional right-aligned monospace meta information in the title row (e.g. `"20 props"`, `"6 recipes"`). Renders as an editorial counter next to the title with `font-meta`, so the information stays visually subordinate to the section title. Lighter editorial polish (cluster A.3). |
| subtitle | `string` | no |  | Subtitle text (property) |
| subtitleSnippet | `Snippet` | no |  | Custom subtitle snippet (overrides subtitle prop) |
| title | `string` | no |  | Title text (property) |
| titleSnippet | `Snippet` | no |  | Custom title snippet (overrides title prop) |
| intent | `'default' | 'hero' | 'primary' | 'secondary'` | no | default | Controls the color theme and semantic meaning of the Section. Affects the overall appearance and user perception. Available options: default, hero, primary, secondary. |
| size | `'lg' | 'md' | 'sm' | 'xl'` | no | lg | Controls the dimensions, padding, and text size of the Section. Affects the component's physical footprint. Available options: lg, md, sm, xl. |
| centered | `'false' | 'true'` | no | false | Controls the centered behavior and appearance of the Section component. Available options: false, true. |

Inherited from:
- SectionVariantProps (external)