@asphalt-react/typography

Typography

Typography helps establish hierarchy and communicate text content clearly. Typography components abstracts over semantic and visuals. Some Typography components can have semantics meaning attached to it.

Typography components control the font property, other applicable styles are inherited by the global or user agent styles. In order to have more control apply the styles in parent container. The purpose of the typography components is to enable adding text content that is themeable.

You can use HTML Text content elements and Content sectioning elements to organize blocks or sections of content.

Use HTML Inline text semantics define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

Usage

import {Heading, Display, Code, Text} from '@asphalt-react/typography'

<Heading>The quick brown fox jumps</Heading>

<Display>The quick brown fox jumps</Display>

<Code>npm install @asphalt-react/typography</Code>

<Text>The quick brown fox jumps</Text>

<Text bold>I have a higher font weight than Text</Text>

Intents

The Heading, Display & Text components have 5 intents to represent different content heirarchy and usages:

• primary: This is the default intent and has the highest hierarchy.
• secondary: This intent signifies copy with a lesser hierarchy than "primary".
• muted: This intent has the lowest hierarchy and is usefult to show copy that should catch least user attention.
• brand: This intent highlights the copy that closely represents the brand.
• onBrand: This intent is useful to render a copy on brand colored surfaces. This intent ensures appropriate contrast ratio with the brand color.

Heading

Use Heading to represent the section heading contents, it supports all six levels of section headings from h1 till h6.

Props

children

React node for heading content.

type	required	default
node	true	N/A

h1

Render the content as h1 section heading.

type	required	default
bool	false	false

h2

Render the content as h2 section heading.

type	required	default
bool	false	false

h3

Render the content as h3 section heading.

type	required	default
bool	false	false

h4

Render the content as h4 section heading.

type	required	default
bool	false	false

h5

Render the content as h5 section heading.

type	required	default
bool	false	false

h6

Render the content as h6 section heading.

type	required	default
bool	false	false

primary

Renders the text with primary intent. This is the default intent.

type	required	default
bool	false	false

secondary

Renders the text with secondary intent.

type	required	default
bool	false	false

brand

Renders the text with brand intent.

type	required	default
bool	false	false

onBrand

Renders the text with appropriate contrast ration to backgrounds with brand color.

type	required	default
bool	false	false

muted

Renders the text with muted intent.

type	required	default
bool	false	false

Display

Use Display to put more emphasis on a text. Use it to display a hero or marketing text.

Display by default renders the content in p tag, you can also choose to render in a div or span instead.

Props

children

React node for display content.

type	required	default
node	true	N/A

size

Controls the size of display.

type	required	default
enum	false	"m"

p

render the display content in a p tag.

type	required	default
bool	false	false

span

render the display content in a span tag.

type	required	default
bool	false	false

div

render the display content in a div tag.

type	required	default
bool	false	false

primary

Renders the text with primary intent. This is the default intent.

type	required	default
bool	false	false

secondary

Renders the text with secondary intent.

type	required	default
bool	false	false

brand

Renders the text with brand intent.

type	required	default
bool	false	false

onBrand

Renders the text with appropriate contrast ratio to backgrounds with brand color.

type	required	default
bool	false	false

muted

Renders the text with muted intent.

type	required	default
bool	false	false

Code

Code styles text content in a fashion intended to indicate that the text is a short fragment or snippet of computer code.

Props

children

React node for code content.

type	required	default
node	true	N/A

size

Controls the size of code content.

type	required	default
enum	false	"m"

Text

Use Text to render generic text contents. Text by default renders the text in p tag, you can also choose to render in a div or span instead.

Props

children

React node for text content.

type	required	default
node	true	N/A

size

Controls the size of text.

type	required	default
enum	false	"m"

bold

Render the bold variant.

Bold variant is only supported for "xs", "s", "m" & "l" sizes.

type	required	default
bool	false	N/A

p

render the content in a p tag.

type	required	default
bool	false	false

span

render the content in a span tag.

type	required	default
bool	false	false

div

render the content in a div tag.

type	required	default
bool	false	false

primary

Renders the text with primary intent. This is the default intent.

type	required	default
bool	false	false

secondary

Renders the text with secondary intent.

type	required	default
bool	false	false

brand

Renders the text with brand intent.

type	required	default
bool	false	false

onBrand

Renders the text with appropriate contrast ratio to backgrounds with brand color.

type	required	default
bool	false	false

muted

Renders the text with muted intent.

type	required	default
bool	false	false