# Blog hero
A prominent hero section for blog content with heading, body text, optional links, and a visual that appears rounded on desktop.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](screenshot-blog-hero-default.png) |
| pale yellow | ![pale yellow](screenshot-blog-hero-pale-yellow.png) |

## What it looks like
Two-column layout on desktop with text content on the left and visual on the right. The visual has rounded-left edges and constrained height on desktop. On mobile, content stacks vertically with the visual above or below the text. Text content includes heading, body copy, and optional action links. The visual can be hidden on mobile devices via flags.

## Typography
- **Heading**: Uses `h3` class by default, with actual HTML element determined by section index (h1 for first section, h2 for subsequent sections)
- **Body**: Uses `rtf-standard` class for rich text formatting
- **Links**: Standard section link styling

## Colours
Background and text colours apply to the full section container when `backgroundColour` and `textColour` fields are set. Valid palette names include: Black, white, Gray, Deep Purple, Turquoise, Green Light, Light Gray, Gray 1-8, Purple Dark, Green, Red, Purple, Yellow, Teal, Orange, Blue, Light Purple, Light Yellow, Light Teal, Light Orange, Light Blue, Pale Purple, Pale Yellow, Pale Teal, Pale Orange, Pale Blue, White, and other theme palette colours.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|--------------------------|
| id | Symbol | Creates anchor ID for section linking | No anchor available |
| index | Number | Determines heading element (h1 for 0, h2 for others) and image priority | Defaults to 0 behavior |
| componentType | Symbol | Identifies component as Blog hero | Component won't render |
| heading | Symbol | Displays as main heading with h3 styling | No heading shown |
| body | Rich Text | Renders formatted body content below heading | No body text displayed |
| visual | Media | Shows image/media on right side (desktop) with rounded styling | No visual content |
| links | Reference (multiple) | Displays action buttons/links below body text | No call-to-action links |
| anchor | Symbol | Sets section anchor ID for navigation | No deep linking available |
| backgroundColour | Symbol | Sets section background color | Uses default/inherited background |
| textColour | Symbol | Sets section text color | Uses default/inherited text color |
| textSize | Symbol | Adjusts typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| cmsLabel | Symbol | Used for analytics tracking and component identification | No tracking label |
| flags | Symbol (multiple) | "Hide mobile visual" hides image on mobile devices | Visual shows on all devices |

## Behaviour
The visual positioning and styling changes significantly between mobile and desktop breakpoints. On desktop, the visual gets rounded left corners and height constraints. The Hide mobile visual flag allows content authors to show text-only versions on smaller screens. Image priority is calculated based on section index for performance optimization.

## Impact
- **Add/remove heading**: Main title appears/disappears
- **Add/remove body**: Supporting text content appears/disappears  
- **Add/remove visual**: Right-side image appears/disappears, layout shifts to text-only
- **Add/remove links**: Call-to-action buttons appear/disappear below text
- **Toggle Hide mobile visual flag**: Visual shows/hides on mobile devices only
- **Change backgroundColour**: Entire section background changes color
- **Change textSize**: All text elements scale up/down proportionally