@asphalt-react/typography v2.0.0-alpha.16
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>The quick brown fox jumps</Code>
<Text>The quick brown fox jumps</Text>
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 |
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 |
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 |
7 months ago
11 months ago
8 months ago
12 months ago
1 year ago