# Blog category hero
A hero section for blog category pages that displays category title and description with an optional background image.

## Screenshots

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

## What it looks like
A full-width hero section with centered content layout. The heading and body text are positioned in columns 3-8 of the 12-column laptop grid, creating a centered content area. The component uses a shorter aspect ratio than the blog index hero (1280/338 vs 1280/568) with a maximum height of 84. Background images receive a dark gradient overlay for text readability. The section uses rounded bottom corners via `rounded-bl-blog-hero` and `rounded-br-blog-hero` classes.

## Typography
- **Heading**: Uses `h1` class, with semantic HTML element determined by `getSizingInformation` based on section index (h1 for index 0, h2 for others)
- **Body text**: Uses `RtfOrString` component with rich text classes determined by text size setting - `rich-text-small`, `rich-text-medium`, or `rich-text-large`
- **Text alignment**: Both heading and body are center-aligned on laptop screens via `laptop:text-center`

## Colours
Background and text colours can be set by authors through the backgroundColour and textColour fields. When a background visual is present, white text is forced and a dark gradient overlay is applied. Valid palette names include Black, White, Deep Purple, Turquoise, Green, Purple, and all other colours listed in the theme context.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| id | Symbol | Sets component ID for preview system | No ID available for preview targeting |
| componentType | Symbol | Determines component behaviour and styling | Component cannot render |
| heading | Symbol | Displays as main heading, falls back to page context tag/articleType title | Uses fallback from page context or shows nothing |
| body | Rich Text | Displays as description text below heading, falls back to page context description | Uses fallback from page context or shows nothing |
| backgroundColour | Symbol | Sets section background colour | Uses default/transparent background |
| textColour | Symbol | Sets section text colour | Uses default text colour or white if background visual present |
| cmsLabel | Symbol | Provides component label for preview/editing | No label shown in preview mode |
| textSize | Symbol | Controls typography sizing (Small/Medium/Large) | Uses Medium sizing as default |
| index | Number | Determines heading semantic level and spacing | Uses 0 as default |
| visual | Media | Sets background image with dark overlay | No background image shown |

## Behaviour
The component dynamically falls back to page context data when CMS fields are empty - heading uses tag or articleType title, body uses their description, and visual uses their featuredImage. A dark gradient overlay is always applied when a background visual is present to ensure text readability. The component does not include article filters, unlike the blog index hero variant.

## Impact of content changes
- **Adding/removing heading**: Changes main title display or switches to page context fallback
- **Adding/removing body**: Changes description display or switches to page context fallback  
- **Adding/removing visual**: Toggles background image and overlay effects
- **Changing textSize**: Adjusts typography scale for both heading and body text
- **Adding backgroundColour**: Changes section background, may affect text contrast
- **Adding textColour**: Overrides default text colour unless background visual forces white text