# Simple centered content
A basic content section that centers heading, body text, image, and links vertically and horizontally within the section.

## Screenshots

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

## What it looks like
Content is arranged vertically in a single centered column. On laptop screens, text content spans 8 columns starting from column 3 (centered within the 12-column grid). Images display at one-third width and center themselves. All elements stack with consistent vertical spacing and center-aligned text.

## Typography
- Heading uses `h3` class with semantic HTML h1 for first section (index 0) or h2 for subsequent sections
- Body text uses `p1` class and supports rich text formatting including bulleted lists
- Body content can have additional styling classes applied via the bodyStyles field

## Colours
Background and text colours can be set by authors via the backgroundColour and textColour fields. Valid palette names: Black, White, 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.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| id | Symbol | Used for preview field identification | No visual impact |
| index | Number | Determines heading semantic level (0=h1, other=h2) | Defaults to h2 semantic level |
| heading | Symbol | Displays as centered heading with h3 styling | No heading appears |
| body | Rich Text | Renders as centered rich text with paragraph styling | No body content appears |
| bodyStyles | Array | Applies additional CSS classes to body content | Standard paragraph styling only |
| visual | Media | Shows responsive image centered at one-third width | No image appears |
| links | Array | Renders centered section links in purple | No links appear |
| anchor | Symbol | Sets section ID for navigation anchoring | No anchor available |
| textColour | Symbol | Sets text colour for entire section | Uses default black text |
| backgroundColour | Symbol | Sets background colour for entire section | Uses default transparent background |
| cmsLabel | Symbol | Used for analytics tracking and component labeling | No tracking context |

## Behaviour
Heading semantic level automatically adjusts based on section index: first section (index 0) uses h1, all others use h2, regardless of visual styling which remains h3 class. All content elements are optional and render conditionally. Visual content displays with responsive sizing and centers within its container.

## Impact
- **Add/remove heading**: Section gains/loses the main title area
- **Add/remove body**: Section gains/loses the main text content area  
- **Add/remove visual**: Section gains/loses the centered image display
- **Add/remove links**: Section gains/loses the action buttons area
- **Change colours**: Entire section background and text colour changes
- **Modify bodyStyles**: Body text appearance changes with additional styling