Contact page
Reaching the team: the public channels as cards beside the form, then what happens after sending.
Web only — React, from @krizaka/ui/contact-page. Beta: its API may still change in a minor version.
When to use
- Contact, support, a request for a demo.
- Any page whose action is a message.
When not to use
- For a sign-in or a sign-up.Use instead: Auth layout
- For a closing call at the end of a page.Use instead: Call-to-action panel
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ContactPage } from "@krizaka/ui/contact-page";Examples
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 | Default | Description |
|---|---|---|---|
channelsrequired | ReactNode | — | The ways to reach us: LinkCards (discussions, issues, email). |
formrequired | ReactNode | — | The form (fields, the cut primary action). |
titlerequired | 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. |
Accessibility
- The form is yours: label every field, say errors in words.
- What happens next is an ordered list.
Best practices
- 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).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on 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.