Contact page
Reaching the team: the public channels as cards beside the form, then what happens after sending.
Web uniquement — React, depuis @krizaka/ui/contact-page. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. krizaka.com migrating its pages to the specialised template (TPL): /contact.
Quand l’utiliser
- Contact, support, a request for a demo.
- Any page whose action is a message.
Quand ne pas l’utiliser
- For a sign-in or a sign-up.À la place : Auth layout
- For a closing call at the end of a page.À la place : Call-to-action panel
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ContactPage } from "@krizaka/ui/contact-page";Exemples
Talk to the team
Channels, the form and what happens next.
Contact
Talk to the people who build it
A person answers within two working days, in English or in French.
Discussions
Questions and ideas, in public.
Report a problem
An issue on the repository.
What happens next
- We read itThe same day, on working days.
- We answerWithin two working days.
Props
A contact page: hero, the channels beside the form, then what happens next.
| Prop | Type | Défaut | Description |
|---|---|---|---|
channelsrequis | ReactNode | — | The ways to reach us: LinkCards (discussions, issues, email). |
formrequis | ReactNode | — | The form (fields, the cut primary action). |
titlerequis | ReactNode | — | The page's h1. |
aside | ReactNode | — | Beside the hero: the bird that answers (the flamingo). |
eyebrow | ReactNode | — | A mono line above the title. |
lead | ReactNode | — | One or two sentences: who answers, how fast. |
linkAs | LinkComponent | — | The app's link component (Next's Link). |
next | { title: ReactNode; steps: readonly { title: ReactNode; text: ReactNode; }[]; } | — | What happens after sending: steps with a title and a sentence. |
Accessibilité
- The form is yours: label every field, say errors in words.
- What happens next is an ordered list.
Bonnes pratiques
- Say who answers and how fast.
- The form in its own panel, its primary action cut.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub