@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
36 lines (23 loc) • 1.16 kB
text/mdx
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
import Basic from './examples/Title/Basic';
# Canvas Kit Title
`Title` provides a simple way to render title-level text with built-in support for Canvas type
tokens.
## Installation
```sh
yarn add @workday/canvas-kit-react
```
## Usage
### Basic Example
`Title` is a Type Level component (along with [`Heading`](/components/text/heading/),
[`BodyText`](/components/text/body-text/), and [`Subtext`](/components/text/subtext/)) built on top
of [`Text`](/components/text/text/) which provides a simple way to render title-level text according
to the [Canvas type hierarchy](/tokens/type/#type-styles).
`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.
<ExampleCodeBlock code={Basic} />
### Custom Styles
Title supports custom styling via the `cs` prop. For more information, check our
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
## Component API
<SymbolDoc name="Title" filePath="/react/text/" />