# HighlightSection

> Highlight band with variant backgrounds and CTA slots.

- Status: stable
- Group: marketing
- Page: https://www.digitaltableteur.com/design-system/components/highlight-section
- Contract: https://www.digitaltableteur.com/contracts/v1/HighlightSection.contract.json

## When to use

HighlightSection is the emphasized marketing band: overline, title, description and up to three CTAs over stronger visual variants (default gradient) and compact/comfortable/spacious sizes (default comfortable). No app route renders it today; the homepage no longer uses it. Without id a unique anchor id is generated, and without donnyTarget no Donny target is rendered, so instances never share either. Use CTASection when the band's whole job is the closing call to action; HighlightSection is for mid-page emphasis.

## When not to use

The contract records no forbidden uses.

## Look-alikes

The contract names no look-alike with a deciding condition.

## Props

| Prop | Type | Default | Description | Required |
| --- | --- | --- | --- | --- |
| `title` | `string` | none | Section title/headline. | Yes |
| `overline` | `string` | none | Optional overline text above title. | No |
| `description` | `string` | none | Supporting description text. | Yes |
| `cta` | `HighlightSectionCTA \| HighlightSectionCTA[]` | none | CTA button configuration (up to 3 items) | No |
| `variant` | `"pattern" \| "solid" \| "gradient" \| "dots"` | `gradient` | Background variant. Defaults to "gradient". | No |
| `size` | `"compact" \| "comfortable" \| "spacious"` | `comfortable` | Section size (affects padding and spacing). Defaults to "comfortable". | No |
| `className` | `string` | `""` | Custom className for additional styling. | No |
| `ariaLabel` | `string` | none | Accessible name for the section. When omitted, the section is named by its own h2 title through aria-labelledby. | No |
| `id` | `string` | none | Section id for anchor linking. When omitted, a unique id is generated so two instances never share an anchor. | No |
| `donnyTarget` | `string` | none | Donny site action target id. No data-donny-target is rendered when omitted. | No |

## Variants

- Available variants: `pattern`, `solid`, `gradient`, `dots` (default `gradient`).
- Available sizes: `compact`, `comfortable`, `spacious` (default `comfortable`).

## Invalid combinations

The contract records no invalid combinations.

## Keyboard

The contract records no keyboard interaction.

## Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

| Level | Rule | How it is checked |
| --- | --- | --- |
| MUST | ARIA: The root <section> is named by ariaLabel when passed; otherwise it is named by its own h2 title through aria-labelledby. Decorative background layers are aria-hidden. | Not yet verified: no evidence record. WCAG 4.1.2. |
| MUST | Required stories produce no axe violations at the configured severity. | Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8. |
| MUST | The accessibility tree (role, name, state) matches the committed snapshot for every required story. | Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2. |
| MUST | The component remains legible and operable under a real browser forced-colors: active pass. | Automated by `npm run test:stories:hc`. |
| MUST | A human completed an end-to-end accessibility review of this component. | Manual review, last on 2026-11-04. |
| MUST NOT | Maintainers: Do not bypass design tokens or skip forced-colors verification at beta. | Release review; not machine-checked. |

## Install and import

- In-repo only. HighlightSection is not exported from `@digitaltableteur/react`, so there is no public import path.

## Links

- Machine-readable contract (Design System Contract 1.0): https://www.digitaltableteur.com/contracts/v1/HighlightSection.contract.json
- Markdown version of this page: https://www.digitaltableteur.com/design-system/components/highlight-section.md
- Component index as JSON: https://www.digitaltableteur.com/design-system/components.json
- All components: https://www.digitaltableteur.com/design-system/components
- Source: The implementation lives in a private repository. This page, its Markdown twin and the contract are generated from it at build time and are the public source of truth.