Skip to content

Perchford design system

Internal, noindex
CTA-02

Channel chooser

For readers who are ready but have a preference about how they get in touch. Each channel states what it is best for and how fast the reply is.

Untriaged
Open isolated

Use it when

For readers who are ready but have a preference about how they get in touch. Each channel states what it is best for and how fast the reply is.

Category
Calls to action
Layout archetype
Ruled sequence
Page position
closing (derived)
Purpose
convert (derived)
Field
light (derived)
Interaction
static (derived)
Motifs
Held column, Quiet field

Content it requires

  • Three channels with a use case, a response expectation, and a real destination

Do not use it when

  • The response times are a public promise. Do not publish one you cannot keep.
  • Not a page closer. Use it on contact and FAQ pages, then close with CTA-01.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/CtaChannelChooser.astro

---
import CtaChannelChooser from '../components/patterns/CtaChannelChooser.astro';
---

<CtaChannelChooser />

Import directly. Do not route production through patternComponents.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

  • Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
  • No interactive controls beyond links and buttons inherited from the design system.
  • Colour never carries meaning alone: every state marker is paired with text.
  • Motion respects prefers-reduced-motion.