# Pull quote offset

A left-aligned pull quote component for highlighting key passages or testimonials with decorative borders and optional attribution.

## Screenshots

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

## What it looks like

The component displays as a full-width section with decorative rounded corner borders at the top and bottom. The main content is left-aligned within padding. The top border includes either a custom icon or a large quotation mark on the left side. The bottom border shows a closing quotation mark on the right side. An optional attribution line appears below the main text, also left-aligned.

## 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 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

Authors can set background and text colours for the section using `backgroundColour` and `textColour` fields. Valid palette names: Black, Gray, Deep Purple, Turquoise, PurpleHover, Green Light, Light Gray, Gray 1, Gray 2, Gray 3, Gray 4, Gray 5, Gray 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 colour options: Black, White.

## 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 Selection | Applies additional CSS classes to the quote text (converted to lowercase with hyphens) | No additional styling applied beyond base text size |
| postHeading | Symbol | Shows as attribution text below the quote, left-aligned with em dash prefix | Attribution section is not rendered |
| icon | Media | Displays custom icon in top border instead of quotation mark | Shows purple quotation mark character in top border |
| textSize | Single Selection | Controls pull-quote text scale: Small/Medium/Large → `pull-quote-text-*` | Defaults to Medium |
| hexColor | Symbol | Sets custom color for quotation marks and icons, overriding default purple | Uses default purple color for decorative elements |
| backgroundColour | Single Selection | Sets section background color from theme palette | No background color styling |
| textColour | Single Selection | Sets section text color (Black or White) when backgroundColour is used | Inherits default text color |
| anchor | Symbol | Sets HTML id attribute on the section element | No anchor link target |

## Behaviour

The component is identified by `data-variant="offset"` attribute. Quote marks appear in top-left and bottom-right positions. All content is left-aligned including attribution. Requires `heading` or `body` — when both are set, both display. Custom hex colors automatically calculate appropriate text contrast. The Section wrapper handles grid positioning and spacing.

## Impact of content changes

- **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
- **Add/remove icon**: Switches between custom icon and default quotation mark in top border
- **Change textSize**: Quote text gets larger/smaller following typography scale
- **Add/remove backgroundColour**: Section background changes from transparent to colored
- **Add hexColor**: Quotation marks and icons change from purple to custom color