# Pro tip
A highlighted callout box for sharing helpful tips or important advice with readers.

## Screenshots

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

## What it looks like
Displays as a callout box with decorative corner borders and a centered icon or quote mark at the top. Tip text is left-aligned inside the frame. Optional heading and attribution below. Uses full-width layout with padding and spans the entire content area.

## Typography
- Main body text: `textSize` maps to `pull-quote-text-small`, `pull-quote-text-medium`, or `pull-quote-text-large` (Figtree, weight 500)
- Optional heading: 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 (attribution): `p-base font-semibold`
- Rich text body: `space-y-4` paragraph spacing; links use `body-copy-link`; lists render with disc/decimal bullets
- Additional styling via `bodyStyles` (kebab-case classes)
- Custom icons: native asset dimensions, capped at 80px height

## Colours
Authors can set `backgroundColour` and `textColour` which apply to the full section background via the Section wrapper. 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.

## Used fields

| Field | Type | Effect when set | Effect when empty/removed |
|-------|------|-----------------|---------------------------|
| heading | Symbol | Optional label or quote line above body; shown together with body when both are set | No heading block rendered |
| body | Rich Text | Displays as main content with rich text formatting support | Component returns null if both heading and body are empty |
| bodyStyles | Multiple Selection | Applies additional CSS classes to body text (converted to kebab-case) | No additional styling applied |
| postHeading | Symbol | Shows as attribution text below main content with centered alignment | Attribution section not rendered |
| icon | Media | Displays custom icon at top center instead of quote mark | Falls back to purple quote mark character |
| textSize | Single Selection | Controls pull-quote text scale: Small/Medium/Large → `pull-quote-text-*` | Defaults to Medium |
| hexColor | Symbol | Sets custom color for quote mark icon (overrides purple default) | Uses default purple color for quote mark |
| backgroundColour | Single Selection | Sets section background color via Section wrapper | No background color applied |
| textColour | Single Selection | Sets section text color via Section wrapper | Uses default text color |
| anchor | Symbol | Sets HTML id attribute on section element | No anchor link available |

## Behaviour
Decorative borders and top icon/quote mark are centered; body text is left-aligned. Shows icon or quote mark at top center with full border decoration. Requires `heading` or `body` — if both are empty, the component does not render. When both `heading` and `body` are set, both are shown. Icon field takes precedence over the default quote mark. Custom hex colors support both hex format (#RRGGBB) and palette class names.

## Impact of content changes
- **Remove body**: Entire component disappears
- **Add/remove icon**: Switches between custom icon and default quote mark at top
- **Change textSize**: Adjusts typography scale of main content
- **Add postHeading**: Attribution line appears below main content
- **Set hexColor**: Quote mark color changes from default purple
- **Set backgroundColour/textColour**: Full section background and text colors change