# Article hero
A hero section specifically designed for article pages that displays article metadata, title, featured image, and navigation elements.

## Screenshots

| Variant | Preview |
|---------|---------|
| default | ![default](article-hero-default.png) |
| yellow | ![yellow](article-hero-yellow.png) |

## What it looks like
Desktop layout uses a 12-column grid with content in the first 6 columns and featured image in the right 6 columns. Mobile stacks vertically with breadcrumbs at top, followed by category tags, article title, metadata bar with white background overlay, and featured image at bottom. The component automatically pulls article data from the page context including title, subtitle, author, publish date, reading time, and category tags. A rounded white metadata bar displays author, date, and reading time information.

## Typography
- Main heading uses `blog-h1` class (42px)
- Heading level determined by `getSizingInformation` based on component index (h1 for index 0, h2 for others)
- Article metadata uses standard text sizing for author and date information
- Category tags use small pill styling

## Colours
Background and text colours apply to the full section via the Section wrapper. Valid palette names: Black, Gray, Deep Purple, Turquoise, PurpleHover, Green Light, Light Gray, Gray 1-8, Gray Line, Backdrop Dark, Purple Dark, Green, Red, Purple, Yellow, Teal, Orange, Blue, Secondary Deep Purple, Accessible Purple, Accessible Teal, Light Purple, Light Yellow, Light Teal, Light Orange, Light Blue, Pale Purple, Pale Yellow, Pale Teal, Pale Orange, Pale Blue, White. Article background colour from page context can override component background colour.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| heading | Symbol | Uses as fallback title if no article title/subtitle available | Falls back to article title and subtitle combination, or article title alone |
| visual | Media | Uses as fallback featured image if no article featured image | Falls back to article featured image from page context |
| backgroundColour | Symbol | Sets section background colour (overridden by article background if present) | No background colour applied unless article has background colour |
| textColour | Symbol | Sets section text colour | Uses default text colour |
| textSize | Symbol | Controls heading typography scale (Small/Medium/Large) | Defaults to Medium sizing |
| anchor | Symbol | Sets section id attribute | No anchor link available |
| flags | Multiple Symbol | "Hide mobile visual" hides image on mobile screens | Visual shows on all screen sizes |

## Behaviour
Component automatically extracts article data from page context including title, subtitle, author, date, tags, and featured image. Breadcrumbs show "Insights" link plus article title when article context exists. Category tags link to tag pages using generated URLs. Reading time calculated from article content. Author links to author page if href available. Mobile visual can be hidden with flags setting. Article background colour takes precedence over component background colour setting.

## Impact
- **Add heading**: Provides fallback title when no article context available
- **Remove heading**: Uses article title/subtitle or shows no heading if no article context
- **Add visual**: Provides fallback featured image when article has no featured image
- **Remove visual**: Uses article featured image or shows no image
- **Add backgroundColour**: Changes section background unless article has its own background colour
- **Add "Hide mobile visual" flag**: Hides featured image on mobile screens only
- **Remove textSize**: Heading typography defaults to Medium scale