Heading
Heading provides a simple way to render heading-level text with built-in support for Canvas type tokens.
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
Component API
Heading
This component is intended to be used for headings and large text.
By default, it renders a semantic h2
element, but you can adjust this as needed with the as
prop.
It has three sizes: large, medium, and small.
Here's a quick reference for font-sizes and weights:
large
- font-size: 32px (2rem)
- font-weight: bold (700)
medium
- font-size: 28px (1.75rem)
- font-weight: bold (700)
small
- font-size: 24px (1.5rem)
- font-weight: bold (700)
import { Heading } from '@workday/canvas-kit-react/text';const CustomHeading = () => (<Heading size="small">Heading Text</Heading>);
Layout Component
Heading
supports all props from thelayout component.
Props
Props extend from h2. Changing the as
prop will change the element interface.
Name | Type | Description | Default |
---|---|---|---|
size | 'large' |Â 'medium' |Â 'small' | Each type level has three sizes: | |
variant | keyof | Type variant token names:
| |
children | ReactNode | ||
as | React.ElementType | Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care. | h2 |
ref | React.Ref | Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section