Conversion and funnel components

Documented lead magnet, opt-in, webinar, event, countdown, urgency, step, timeline, comparison, guarantee, and risk-reversal classes use existing --hds-* tokens and no external CSS dependencies.

Conversion components

Collect interest with plain HTML funnels.

Lead magnets, opt-in forms, event cards, countdowns, step lists, comparisons, guarantees, and risk reversal stay dependency-free and token-backed.

Webinar

Live walkthrough

Use webinar cards for scheduled content, replays, or registration CTAs.

03days14hours22mins

Registration closes when the timer reaches zero.

Event

Office hours

Event cards can hold date, location, agenda, and action links.

Read docs

  1. Offer value

    Lead with a clear promise and accessible form labels.

  2. Reduce friction

    Use concise fields, visible focus states, and helpful text.

  3. Confirm trust

    Show comparisons, guarantees, and risk reversal near the final action.

  1. Discover

    Visitors compare options.

  2. Register

    Visitors choose the next step.

  3. Activate

    Visitors receive the promised resource.

Comparison card

Use cards for narrow layouts and tables for detailed feature matrices.

PatternUseDependency
Lead magnetOffer plus formNone
CountdownEvent urgencyStatic HTML or app-owned data
GuaranteeRisk reductionNone

Guarantee card

Make reassurance visible without changing button or form behavior.

Risk reversal

Clarify cancellation, trial, refund, privacy, or support terms in plain language.

Conversion CTA

Ready for the next step?

Pair funnel reassurance with an accessible call to action.

Open conversion docs