Heading

Heading provides a simple way to render heading-level text with built-in support for Canvas type tokens.

GitHubStorybook
yarn add @workday/canvas-kit-react
Sources
GitHubStorybook
Install
yarn add @workday/canvas-kit-react

Usage Guidance

Coming soon!

Examples

Basic Example

Heading is a Type Level component (along with Title, BodyText, and Subtext) built on top of Text which provides a simple way to render heading-level text according to the Canvas type hierarchy.

Heading renders an <h2> element by default with styles equivalent to type.levels.heading[size]. You may override the rendered element using the as prop.

Large Heading Text

Medium Heading Text
Small Heading Text

Props

NameTypeDefaultDescription
size*"small" | "large" | "medium"Each type level has three sizes: `large`, `medium`, and `small`.
variantkeyof CanvasTypeVariants | undefinedType variant token names: `error`, `hint` or `inverse`. @example ```tsx <Text variant="error" typeLevel="subtext.large">Error text</Text> ```

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section