Typography

Focused text components for headings, body, labels, captions, and code.

import { ... } from '@corndev/ui'

Heading 1

Heading 2

Heading 3

Heading 4

Default body text.

Small text.

Large text.

Bold weight.

Muted secondary text.

Form labelCaption — small secondary text for hints and metadata.const greeting = 'hello world';

HTML — Heading

No JavaScript required — these classes are the whole component.

<h1 class="corn-heading" data-level="1">Page title</h1>

Classes

Class
`.corn-heading`
`.corn-text`
`.corn-label`
`.corn-caption`
`.corn-code`

Attributes

On	Attribute	Values
`.corn-heading`	`data-level`	`1\|2\|3\|4\|5\|6`
`.corn-heading`	`data-weight`	`medium`
`.corn-heading`	`data-muted`	`present or absent`
`.corn-heading`	`data-truncate`	`present or absent`
`.corn-text`	`data-size`	`xs\|sm\|md\|lg\|xl`
`.corn-text`	`data-weight`	`medium\|bold`
`.corn-text`	`data-muted`	`present or absent`
`.corn-text`	`data-truncate`	`present or absent`
`.corn-label`	`data-muted`	`present or absent`
`.corn-caption`	`data-muted`	`present or absent`
`.corn-code`	`data-block`	`present or absent`

Vanilla JS — Heading

Optional. createHeading only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createHeading } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createHeading(el, { /* options */ });

Options

Option	Type	Default	Description
`level`	`1\|2\|3\|4\|5\|6`	`1`	Heading level; sets the size scale, not the tag.
`weight`	`'medium'\|'bold'`	`undefined`	Overrides the default weight for the level.
`muted`	`boolean`	`false`	Use the secondary text colour.
`truncate`	`boolean`	`false`	Clip to one line with an ellipsis.

React — Heading

Heading — from @corndev/ui-react.

The props are the same as the options above, plus className.

HTML — Text

No JavaScript required — these classes are the whole component.

<p class="corn-text" data-size="lg">Body copy.</p>

Classes

Class
`.corn-heading`
`.corn-text`
`.corn-label`
`.corn-caption`
`.corn-code`

Attributes

On	Attribute	Values
`.corn-heading`	`data-level`	`1\|2\|3\|4\|5\|6`
`.corn-heading`	`data-weight`	`medium`
`.corn-heading`	`data-muted`	`present or absent`
`.corn-heading`	`data-truncate`	`present or absent`
`.corn-text`	`data-size`	`xs\|sm\|md\|lg\|xl`
`.corn-text`	`data-weight`	`medium\|bold`
`.corn-text`	`data-muted`	`present or absent`
`.corn-text`	`data-truncate`	`present or absent`
`.corn-label`	`data-muted`	`present or absent`
`.corn-caption`	`data-muted`	`present or absent`
`.corn-code`	`data-block`	`present or absent`

Vanilla JS — Text

Optional. createText only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createText } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createText(el, { /* options */ });

Options

Option	Type	Default	Description
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`undefined`	Overrides the base 14px body size. `md` is that base, named so the ladder matches the spacing scale.
`weight`	`'medium'\|'bold'`	`undefined`
`muted`	`boolean`	`false`	Use the secondary text colour.
`truncate`	`boolean`	`false`	Clip to one line with an ellipsis.

React — Text

Text — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`undefined`	Overrides the base 14px body size. `md` is that base, named so the ladder matches the spacing scale.
`weight`	`'medium'\|'bold'`	`undefined`
`muted`	`boolean`	`false`	Use the secondary text colour.
`truncate`	`boolean`	`false`	Clip to one line with an ellipsis.
`as`	`string\|React.ComponentType`	`'p'`	Element or component to render as.
`className`	`string`	`undefined`	Merged with the Corn UI classes.
`children`	`React.ReactNode`	`undefined`

HTML — Label

No JavaScript required — these classes are the whole component.

<label class="corn-label" for="email">Email</label>

Classes

Class
`.corn-heading`
`.corn-text`
`.corn-label`
`.corn-caption`
`.corn-code`

Attributes

On	Attribute	Values
`.corn-heading`	`data-level`	`1\|2\|3\|4\|5\|6`
`.corn-heading`	`data-weight`	`medium`
`.corn-heading`	`data-muted`	`present or absent`
`.corn-heading`	`data-truncate`	`present or absent`
`.corn-text`	`data-size`	`xs\|sm\|md\|lg\|xl`
`.corn-text`	`data-weight`	`medium\|bold`
`.corn-text`	`data-muted`	`present or absent`
`.corn-text`	`data-truncate`	`present or absent`
`.corn-label`	`data-muted`	`present or absent`
`.corn-caption`	`data-muted`	`present or absent`
`.corn-code`	`data-block`	`present or absent`

Vanilla JS — Label

Optional. createLabel only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createLabel } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createLabel(el, { /* options */ });

Options

Option	Type	Default	Description
`muted`	`boolean`	`false`	Use the secondary text colour.

React — Label

Label — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`htmlFor`	`string`	`undefined`	Id of the control this labels. Renders a `<label for>`.
`muted`	`boolean`	`false`	Use the secondary text colour.
`className`	`string`	`undefined`	Merged with the Corn UI classes.
`children`	`React.ReactNode`	`undefined`

HTML — Caption

No JavaScript required — these classes are the whole component.

<span class="corn-caption">Figure 1 — annual revenue</span>

Classes

Class
`.corn-heading`
`.corn-text`
`.corn-label`
`.corn-caption`
`.corn-code`

Attributes

On	Attribute	Values
`.corn-heading`	`data-level`	`1\|2\|3\|4\|5\|6`
`.corn-heading`	`data-weight`	`medium`
`.corn-heading`	`data-muted`	`present or absent`
`.corn-heading`	`data-truncate`	`present or absent`
`.corn-text`	`data-size`	`xs\|sm\|md\|lg\|xl`
`.corn-text`	`data-weight`	`medium\|bold`
`.corn-text`	`data-muted`	`present or absent`
`.corn-text`	`data-truncate`	`present or absent`
`.corn-label`	`data-muted`	`present or absent`
`.corn-caption`	`data-muted`	`present or absent`
`.corn-code`	`data-block`	`present or absent`

Vanilla JS — Caption

Optional. createCaption only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createCaption } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createCaption(el, { /* options */ });

Options

Option	Type	Default	Description
`muted`	`boolean`	`false`	Use the secondary text colour.

React — Caption

Caption — from @corndev/ui-react.

The props are the same as the options above, plus className.

HTML — Code

No JavaScript required — these classes are the whole component.

<code class="corn-code">npm install</code>

Classes

Class
`.corn-heading`
`.corn-text`
`.corn-label`
`.corn-caption`
`.corn-code`

Attributes

On	Attribute	Values
`.corn-heading`	`data-level`	`1\|2\|3\|4\|5\|6`
`.corn-heading`	`data-weight`	`medium`
`.corn-heading`	`data-muted`	`present or absent`
`.corn-heading`	`data-truncate`	`present or absent`
`.corn-text`	`data-size`	`xs\|sm\|md\|lg\|xl`
`.corn-text`	`data-weight`	`medium\|bold`
`.corn-text`	`data-muted`	`present or absent`
`.corn-text`	`data-truncate`	`present or absent`
`.corn-label`	`data-muted`	`present or absent`
`.corn-caption`	`data-muted`	`present or absent`
`.corn-code`	`data-block`	`present or absent`

Vanilla JS — Code

Optional. createCode only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createCode } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createCode(el, { /* options */ });

Options

Option	Type	Default	Description
`block`	`boolean`	`false`	Render as a block (`<pre>`-style) rather than inline.

React — Code

Code — from @corndev/ui-react.

The props are the same as the options above, plus className.

Heading

Renders h1–h6 based on the level prop.

Heading 1

Heading 2

Heading 3

Heading 4

<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>

Text

Body text with optional size, weight, muted, and truncate modifiers.

Default body text.

Small text.

Large text.

Medium weight.

Bold weight.

Muted text for secondary content.

<Text>Default body text.</Text>
<Text size="sm">Small text.</Text>
<Text size="lg">Large text.</Text>
<Text weight="medium">Medium weight.</Text>
<Text weight="bold">Bold weight.</Text>
<Text muted>Muted text.</Text>

Label

For form field labels and small headings within UI elements.

Email addressOptional field

<Label>Email address</Label>
<Label muted>Optional field</Label>

Caption

Supplementary text — helper messages, timestamps, metadata.

Last updated 3 days agoThis field is optional

<Caption>Last updated 3 days ago</Caption>
<Caption muted>This field is optional</Caption>

Code

Inline and block code rendering.

Use the onClick prop to handle clicks.

import { Heading } from '@corndev/ui-react';

<Text>Use the <Code>onClick</Code> prop to handle clicks.</Text>
<Code block>{`import { Heading } from '@corndev/ui-react';`}</Code>