REUSABLE ACTION PATTERNS

One action panel. Three hero layouts.

Illustration overlap, right-side panel, and solid-color preparation layouts share the same action choices. Buttons open local destination examples.

1. Illustration hero with overlapping panel

Continue

Getting started takes only a few minutes. Review the details, then choose the option that works best for you.

Review the featured path and continue.

Explore another path using the same component.

Recommended editorial targets; text is never truncated. Button hard limits are proposed guidance, not enforced limits.

Hero copy lengths (characters including spaces)
Field	Target Range	Recommended Max	Hard Max	Visual Target
Eyebrow	5–25	30	None	1 line
Hero Heading	15–40	50	None	Up to 2 desktop; 3 mobile
Hero Description	75–130	160	None	Up to 3 desktop; 5 mobile
Primary Choice Heading	15–28	35	None	Up to 2 lines
Primary Choice Description	35–70	100	None	2–3 lines
Primary Choice CTA	10–22	25	30 proposed	1 line
Non-Primary Choice Heading	15–28	35	None	Up to 2 lines
Non-Primary Choice Description	35–70	100	None	2–3 lines
Non-Primary Choice CTA	10–22	25	30 proposed	1 line
Arrow Link	15–35	40	None	Prefer 1 line