# Pull quote centered

A centered pull quote component for highlighting key statements or testimonials with decorative quote marks and optional author attribution.

## Screenshots

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

## What it looks like

The component renders as a centered quote within a bordered container. It features decorative corner elements in the top-left, top-right, bottom-left, and bottom-right corners connected by thin border lines. The quote text is center-aligned with a large decorative quote mark icon above it (or a custom icon if provided). Below the quote, an optional post-heading appears center-aligned for attribution or source information. The entire component has padding and spacing that adapts between mobile and desktop viewports.

## Typography

- **Quote / body text**: `textSize` maps to `pull-quote-text-small`, `pull-quote-text-medium`, or `pull-quote-text-large` (Figtree, weight 500)
- **Heading**: Optional. When both `heading` and `body` are set, both display. Short headings (≤35 characters) render as an `h7` label; longer headings use the same `pull-quote-text-*` scale
- **Post heading**: `p-base font-semibold` for author/source attribution
- **Rich text**: `space-y-4` paragraph spacing; links use `body-copy-link`; lists render with disc/decimal bullets
- **Body styles**: Additional classes from `bodyStyles` (kebab-case)
- **Icons**: Custom icons at native asset dimensions, capped at 80px height

## Colours

Background and text colours apply to the full section via the Section wrapper. Valid palette names include Black, Gray, Deep Purple, Turquoise, Green, Purple, Yellow, Teal, Orange, Blue and their light/pale variants, plus White. Text colour automatically contrasts against the background. The quote icon colour uses the `hexColor` field or defaults to purple.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|----------------|---------------------------|
| heading | Symbol | Optional quote line above body; shown together with body when both are set | No heading block rendered |
| body | Rich Text | Displays as the main quote content with rich text formatting | Component returns null if both heading and body are empty |
| bodyStyles | Multiple Select | Applies additional CSS classes converted to lowercase dash-separated format | No additional styling applied |
| postHeading | Symbol | Shows below quote as center-aligned attribution text | Attribution section not rendered |
| icon | Media | Displays custom icon instead of default quote mark above text | Shows default purple quote mark |
| textSize | Symbol | Controls pull-quote text scale: Small/Medium/Large → `pull-quote-text-*` | Defaults to Medium |
| hexColor | Symbol | Sets custom color for quote mark icon | Uses default purple color |
| backgroundColour | Symbol | Sets section background color via Section wrapper | No background color applied |
| textColour | Symbol | Sets section text color via Section wrapper | Uses default text color |
| anchor | Symbol | Sets HTML id attribute on section element | No anchor link target |

## Behaviour

The component uses the "centered" variant which centers all text alignment and shows the top border line across the full width with the quote icon in the center. Unlike the offset variant, it does not show a closing quote mark at the bottom. The decorative corners and borders are positioned absolutely and remain consistent regardless of content length. Rich text formatting in the body field is preserved and rendered.

## Impact

- **Remove heading and body**: Component disappears entirely
- **Add heading with body**: Both lines display (short heading as `h7` label)
- **Add/remove postHeading**: Attribution line appears/disappears below quote
- **Change textSize**: Typography scale shifts between small, medium, and large preset combinations
- **Add/remove icon**: Switches between custom icon and default quote mark
- **Change backgroundColour**: Section background updates with automatic text contrast
- **Add hexColor**: Quote mark color changes from default purple to custom hex value