Heading

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

Interaction Modes

Approving

Reviewing

Sources

Github

Storybook

Install

yarn add @workday/canvas-kit-react

Component Type

Text

Platform

Web

Component

Sana Canvas

Delivery Channels

Web

Version

16.1.7

Experience Surfaces

Chat Sidepanel

Component Type

Text

Platform

Web

Component

Sana Canvas

Delivery Channels

Web

Version

16.1.7

Experience Surfaces

Chat Sidepanel

Usage Guidance

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

import React from 'react';

import {Heading} from '@workday/canvas-kit-react/text';

export default () => (
  <>
    <Heading as="h4" size="large">
      Large Heading Text
    </Heading>
    <Heading as="h5" size="medium">
      Medium Heading Text
    </Heading>
    <Heading as="h6" size="small">
      Small Heading Text
    </Heading>
  </>
);

Custom Styles

Heading supports custom styling via the cs prop. For more information, check our “How To Customize Styles” .

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`		Each type level has three sizes: `large`, `medium`, and `small`.
`cs`		The `cs` prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using `cs`, you can merge that prop in as well. Any style that is passed to the `cs` prop will override style props. If you wish to have styles that are overridden by the `css` prop, or styles added via the `styled` API, use wherever `elemProps` is used. If your component needs to also handle style props, use instead. import {handleCsProp} from '@workday/canvas-kit-styling'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; // ... // `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same // function signature, but adds support for style props. return ( <Element {...handleCsProp(elemProps, [ myStyles, myModifiers({ size: 'medium' }), myVars({ backgroundColor: 'red' }) ])} > {children} </Element> )
`children`	`ReactNode`
`variant`	`'error' \| 'hint' \| 'inverse'`	Type variant token names: `error`, `hint` or `inverse`. `<Text variant="error" typeLevel="subtext.large">Error text</Text>`
`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 `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`h2`
`ref`	`React.Ref<R = h2>`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).