Call-to-action panel

Web uniquement — React, depuis @krizaka/ui/cta-panel. Bêta : son API peut encore changer à une version mineure.

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { CtaPanel } from "@krizaka/ui/cta-panel";

Exemples

Props

Accessibilité

• Its title is a real heading (h2 or h3): it appears in the page's outline.
• The tint is decorative; text stays in the text roles (AA).

Bonnes pratiques

• One invitation per panel, one or two actions (an ActionBar).
• Say why answering matters to the reader, not to you.
• Give it an id when other pages link to it (#discuss).

Composants liés

• Action barA row of link actions — discuss, propose, report, read the docs, see the code: buttons with their words at the end of a page, or icon buttons whose words are a tooltip at the foot of a card.
• PageThe frame of every page: one width (--kz-page-max), one pair of gutters, one vertical rhythm — Page, Section (full-bleed, its heading, a hairline or the brand's backdrop as transition) and SectionHeading, with Facts and Ticks.
• ButtonThe action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.

Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub