Documentation version
GuideApplies to 1.0.0

CTA and Hero styling

Configure optional call-to-action content and keep hover/focus states clear.

The Featured Hero can include an optional CTA for layouts that need a clear next action.

Use one clear action

Keep the CTA label specific and concise. If the hero already contains several navigation links, consider whether an additional button improves or complicates the interaction.

Normal and hover states

Configure normal and hover styling with sufficient contrast. Keyboard users should also receive a visible focus indication.

Typography and spacing

Use the Hero’s independent typography, color and spacing controls to establish hierarchy between pre-heading, heading, supporting text and CTA.