# Blog index hero
A large hero section for blog listing pages that displays a heading, description, and article filter controls with search functionality.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](http://localhost:3016/cms/screenshot?file=components%2Fblog-index-hero-default.png) |

## What it looks like
A full-width hero section with a background image or color. Content is centered in a 12-column grid with the main content spanning 8 columns (columns 3-10) on laptop screens. The heading and body text are center-aligned. Below the text content, article filter tags and a search input are displayed in a 10-column span (columns 2-11). The section has rounded bottom corners and includes a dark gradient overlay when a background image is present. On laptop screens, the hero maintains a 1280/568 aspect ratio with a maximum height of 142 units.

## Typography
- Heading uses the `h1` class and is rendered as an h1 element when index is 0, h2 element otherwise
- Body text uses rich text formatting with sizing determined by the textSize field: Small maps to `rich-text-small`, Medium to `rich-text-medium`, Large to `rich-text-large`
- Text size affects heading hierarchy through getSizingInformation: Large uses h1-h6 progression, Medium steps down one level (h2-h6), Small steps down two levels (h3-h6)

## Colours
Background and text colors are applied to the full section via the Section wrapper. When a background image is used, white text is forced via CSS classes and a dark gradient overlay is applied.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Sets HTML id attribute on section | No id attribute |
| componentType | Symbol | Determines component behavior and styling | Required field |
| heading | Symbol | Displays as main hero heading | Falls back to page context tag/articleType title if available |
| body | Rich Text | Displays as hero description text | Falls back to page context tag/articleType description if available |
| backgroundColour | Symbol | Sets section background color | No background color applied |
| textColour | Symbol | Sets section text color | Default text color used |
| cmsLabel | Symbol | Used for preview/editing labels | No preview label |
| textSize | Symbol | Controls typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| index | Number | Affects heading hierarchy (h1 vs h2) | Treated as 0 |
| visual | Media reference | Displays as background image with overlay | No background image |

## Behaviour
When componentType is "Blog index hero", the component fetches all available tag links and displays them as filter buttons below the main content. A search input with placeholder "Search Insights by keyword(s)" is included. The search functionality points to "/insights/search". The component uses async rendering to fetch tag data. Visual content can come from the component's visual field or fall back to tag/articleType featured images from page context. Text content can fall back to page context data when component fields are empty.

## Impact of content changes
- **Add/remove heading**: Main hero title appears or disappears, with fallback to page context
- **Add/remove body**: Description text appears or disappears, with fallback to page context  
- **Add/remove visual**: Background image appears or disappears, affects overlay display
- **Change textSize**: Affects heading hierarchy and body text sizing across Small/Medium/Large scales
- **Add/remove backgroundColour**: Section background changes, affects overall visual impact
- **Change index**: Affects whether heading renders as h1 (index 0) or h2 (other values)