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.
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.
Questions and ideas, in public.
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 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Component page
A component's page: its name, summary, status and platforms, the live preview, the import line, its sections, the related components aside.
Docs article page
A documentation article in the docs frame: the pages, the breadcrumb, the title with its facts, the reading column, the contents, previous and next.