Typography
A block of text formatted with pre-defined size, weight, and typeface combinations. Provides a consistent interface for consuming valid text styles, and decouples the semantics typography from style.
By default, text is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop. It is important to
use this property to create semantic, hierarchical content.
Examples
Display One
The largest display copy, used for mastheads and stylized copy. Uses the Skintype Display font at larger screen sizes, falling back to a smaller sized Skintype Text on smaller devices.
Defaults to an h1.
Display one
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="d1">Display one</Typography>
Display Two
The smaller display copy. Uses a smaller font size at narrow screen sizes. Defaults to an h1, but should use as="h2" if following a d1.
Display two
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="d2">Display two</Typography>
Headline One
The largest standard heading, used as the primary heading for most interior pages. Defaults to an h1.
Headline one
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="h1">Headline one</Typography>
Headline Two
A secondary subheading. Defaults to an h2.
Headline two
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="h2">Headline two</Typography>
Headline Three
A tertiary subheading. Defaults to an h3.
Headline three
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="h3">Headline three</Typography>
Subhead
Bolded, block-level body copy. Defaults to a div.
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="subhead">Subhead</Typography>
Body
The default copy size. Can be made bold, or used as a link. Defaults to a div.
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="body">
Body
</Typography>
<Typography size="body" weight="bold">
Body bold
</Typography>
<Typography size="body" as="a" href="#">
Body link
</Typography>
Body large
Larger body copy for emphasis. Can be made bold, or used as a link. Defaults to a div.
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="body-lg">
Body large
</Typography>
<Typography size="body-lg" weight="bold">
Body large bold
</Typography>
<Typography size="body-lg" as="a" href="#">
Body large link
</Typography>
Call to action
A small, non-button call to action. Defaults to an a, and should be used with an href.
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography href="#" size="cta">Call to action link</Typography>
Meta
The smallest copy. Defaults to a div.
import { Typography } from '@curology/ui-components-web/react/Typography';
<Typography size="meta" weight="normal(default)|bold">Meta</Typography>
Props
Props
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <div /> | ||||
italic | false | true | false | No | Display the text with emphasis? |
size | "body" | "h1" | "h2" | "h3" | "meta" | "inherit" | "d1" | "d2" | "subhead" | "body-lg" | "cta" | 'inherit' | No | How large should the text be? This also affects the font-face for display text. |
weight | "md" | "light" | "100" | "300" | "400" | "500" | "700" | "800" | "900" | "thin" | "normal" | "bold" | "extrabold" | "black" | 'normal' | No | How heavy should the text be? |