# Article filter

A section that shows a heading, optional preHeading/postHeading, body, and a filterable list of article cards. Filter options (topics, article types) are derived from the current article set. Use on article listing or topic pages.

## What it looks like

(Visual description estimated from code; showcase excluded.)

Header: preHeading (h6), heading (h1 with text-primary-blue), postHeading (h6), then body (rtf-standard mt-6). Below that, a client-side filter UI (topics and/or article types) and a grid of ArticleCard components. Content is constrained to grid rows 1–6 / 1–16. Section has `noBackground`. When on a topic page, topics filter is hidden; when on a resource type page, types filter is hidden.

## Typography

- **Pre-heading:** `h6`.
- **Main heading:** `h1` with class `text-primary-blue`.
- **Post-heading:** `h6`.
- **Body:** `rtf-standard mt-6`.

## Colours

**How colours are applied:** Section uses `noBackground`. No `backgroundColour` or `textColour` in used fields. Heading uses fixed `text-primary-blue`.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| `heading` | Symbol | Main title (h1, primary blue) | No heading |
| `preHeading` | Symbol | Line above heading (h6) | No preHeading |
| `postHeading` | Symbol | Line below heading (h6) | No postHeading |
| `body` | RichText | Intro copy above filter | No body block |
| `anchor` | Symbol | HTML `id` for in-page linking | No anchor |
| `cmsLabel` | Symbol | Internal/analytics label | No visible effect |

## Behaviour

- **Position (index):** First block → heading `<h1>`; otherwise `<h2>`.
- **Data:** Articles are fetched via `rendererConfig.fetchHelpers.getAllArticleLinks()`, then filtered by page context (tag slug, article type slug). Filter options (topics, article types) are extracted from the filtered list. Articles are sorted by date descending.
- **Context:** On a topic page (`pageContext.tag`), topics filter is hidden. On a resource type page (`pageContext.articleType`), types filter is hidden.
- **Rendering:** Server renders article cards; ArticleFilterClient handles filter state and visibility.

## Impact of content changes

| Change | Result |
|--------|--------|
| Add/remove heading | Heading appears or disappears |
| Add/remove preHeading/postHeading | Eyebrow lines appear or disappear |
| Add/remove body | Intro copy appears or disappears above filter |
| Page context (tag/type) | Filter options and visible articles update; one filter may be hidden |

## Screenshots to capture

Recommended variants: default (heading + body + filters), minimal (heading only). Note: component is showcaseExclude; screenshots may require article listing route.