# Quote
A single quote component with customizable text size, background color, and attribution for highlighting testimonials or important statements.

## Screenshots

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

## What it looks like
Displays as a rounded card with shadow on white background by default. Contains a purple quotation mark icon at the top, followed by an optional heading, main quote body text, and optional attribution section at bottom with circular icon and post-heading text. The component spans full width on mobile and centers in an 8-column span on laptop screens with margins.

## Typography
- Heading uses `h3` class regardless of text size setting
- Body text uses `p-base` for Small, `p-lg` for Medium (default), or `h5` for Large text size
- Body text includes `font-medium` styling
- Post-heading (attribution) uses `p-lg` class

## Colours
Background and text colors apply to the entire quote card. Authors can select from the full palette: Black, Gray, Deep Purple, Turquoise, Green Light, Light Gray, Gray 1-6, Gray 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. Text color options are Black or White.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| heading | Symbol | Displays as h3 heading above quote body | No heading shown |
| body | Rich Text | Main quote content with rich text formatting support | Component returns null if both body and heading are empty |
| bodyStyles | Multiple | Applies additional CSS classes to body text (lowercase, hyphenated) | No additional styling |
| postHeading | Symbol | Attribution text shown below quote in attribution section | No attribution text, but icon may still show |
| icon | Asset | Circular profile image (20x20, aspect-square) in attribution section | No icon shown, but postHeading may still appear |
| textSize | Symbol | Controls body text size: Small (`p-base`), Medium (`p-lg`), Large (`h5`) | Defaults to Medium (`p-lg`) |
| backgroundColour | Symbol | Sets quote card background color with automatic contrast | Defaults to white background |
| textColour | Symbol | Sets text color for entire quote card | Uses automatic contrast if backgroundColour set |

## Behaviour
Component returns null and renders nothing if both heading and body fields are empty. The quote icon is always purple and cannot be customized. Attribution section only appears if either postHeading or icon is provided. When used as embedded component, it can accept custom positioning classes.

## Impact
- Add/remove **body**: Shows/hides main quote content; component disappears entirely if both body and heading removed
- Add/remove **heading**: Shows/hides h3 heading above quote
- Add/remove **postHeading**: Shows/hides attribution text in bottom section
- Add/remove **icon**: Shows/hides circular profile image in attribution section
- Change **textSize**: Adjusts body text from `p-base` (Small) to `p-lg` (Medium) to `h5` (Large)
- Change **backgroundColour**: Updates entire card background with automatic text contrast
- Add/remove **bodyStyles**: Applies/removes additional CSS classes to body text formatting