Call-to-action panel
The invitation at the end of a section or a page: a title, why it matters, the ways to answer — in the hue of the page.
Web only — React, from @krizaka/ui/cta-panel. Beta: its API may still change in a minor version.
When to use
- The end of a page that argued: discuss, propose, contact, get started.
- The end of a section that asks the reader for something.
When not to use
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { CtaPanel } from "@krizaka/ui/cta-panel";Examples
Discuss
The end of a building block's page: discuss or propose.
Props
A call to act: title, why, the actions — the closing panel of a section or a page.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The invitation: Something to say about it?. |
body | ReactNode | — | Why it matters, in one or two sentences. |
level | 2 | 3 | 2 | The title's level. |
reveal | boolean | — | Rises once into place ([data-reveal]). Never on the first screen. |
Accessibility
- Its title is a real heading (
h2orh3): it appears in the page's outline. - The tint is decorative; text stays in the text roles (AA).
Best practices
- One invitation per panel, one or two actions (an
ActionBar). - Say why answering matters to the reader, not to you.
- Give it an
idwhen other pages link to it (#discuss).
Related components
Generated from the code of @krizaka/ui 2.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub
Argument card
A compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.
Card grid
A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.