Workday Canvas
CTRL K

Title

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

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

Usage Guidance

Coming soon!

Examples

Basic Example

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

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

Large Title Text

Medium Title Text

Small Title Text

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

export default () => (
  <>
    <Title as="h1" size="large">
      Large Title Text
    </Title>
    <Title as="h2" size="medium">
      Medium Title Text
    </Title>
    <Title as="h3" size="small">
      Small Title Text
    </Title>
  </>
);

Custom Styles

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

Component API

Title

This component is intended to be used large page titles. By default, it renders a semantic h1 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: 56px (3/5rem)
    • font-weight: bold (700)
  • medium
    • font-size: 48px (3rem)
    • font-weight: bold (700)
  • small
    • font-size: 40px (2.5rem)
    • font-weight: bold (700)
import { Title } from '@workday/canvas-kit-react/text';

const CustomTitle = () => (
  <Title size="small">Title Text</Title>
);

Layout Component

Title supports all props from thelayout component.

Props

Props extend from h1. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
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 {@link mergeStyles } 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>
)
childrenReactNode
variant 'error' | 'hint' | 'inverse'

Type variant token names: error, hint or inverse.

<Text variant="error" typeLevel="subtext.large">Error text</Text>
asReact.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.forwardRefand 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.

h1
refReact.Ref<R = h1>

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).

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.

FAQ Section

On this Page: