# Typography
[](https://badge.fury.io/js/@asphalt-react%2Ftypography)
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](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content) and [Content sectioning elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) to organize blocks or sections of content.
Use HTML [Inline text semantics](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics) define the meaning, structure, or style of a word, line, or any arbitrary piece of text.
## Usage
```js
import {Heading, Display, Code, Text} from '@asphalt-react/typography'
The quick brown fox jumps
The quick brown fox jumps
npm install @asphalt-react/typography
The quick brown fox jumps
I have a higher font weight than Text
```
## Intents
The `Heading`, `Display` & `Text` components have 5 intents to represent different content hierarchy 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.
`Text` additionally supports 4 semantic intents for status and feedback messaging:
* **info**: a generic informational message.
* **success**: information with a successful intent.
* **warning**: information with a warning intent; demands more attention than info.
* **danger**: critical information that demands the most attention. Used for information leading to destructive actions like removing a user.
[comment]: # "UnitComponents"
# Heading
Use `Heading` to represent the section heading contents, it supports all six levels of section headings from `h1` till `h6`.
## Figma Token Mapping
Each heading level maps to a Figma token and its corresponding CSS custom property:
| Prop | HTML Tag | Figma Token |
| ---- | -------- | ----------- |
| h1 | `` | heading/2XL |
| h2 | `` | heading/XL |
| h3 | `` | heading/L |
| h4 | `` | heading/M |
| h5 | `` | heading/S |
| h6 | `` | heading/XS |
[comment]: # "Heading Props"
## 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.
[comment]: # "Display Props"
## 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.
[comment]: # "Code Props"
## 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.
[comment]: # "Text Props"
## 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 |
### danger
Renders the text with danger intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### warning
Renders the text with warning intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### info
Renders the text with info intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### success
Renders the text with success intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### muted
Renders the text with muted intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### ellipsis
Truncates text with an ellipsis when it overflows its container.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |