Typography
Overview
Airplane provides the following components for typesetting UI in your views:
TextTitle
Text
Text is the most basic component for typography in Airplane Views. Use this for any regular text
you need to render.By default,
Text also automatically parses Markdown text, if a Markdown string is passed to it.Title
Use this component for titles in your views. The
Title component order = 1...6 as a prop which
determines the size of the title.Note that
Title components can be nested inside a Text component. This is particularly desirable
if you want to group certain titles with a body of text.<Title order="1...6"> correspondingly renders a <h1> to <h6>.Example usage
Loading view...
Text component API
| Name | Description | Default |
|---|---|---|
| disableMarkdown | boolean Disables automatic markdown parsing | |
| children | Component Text content | |
| size | "xs" | "sm" | "md" | "lg" | "xl" Controls the font size, weight, margin and line height | md |
| color | "primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}` Text color | |
| lineClamp | number The maximum number of lines to clamp to. If set, only this number of lines
will be shown, and the text will appear truncated with a trailing ellipsis. | |
| weight | string & {} | "inherit" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "bold" | "normal" | number & {} | "bolder" | "lighter" Sets font-weight css property | |
| transform | "inherit" | "none" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" Sets text-transform css property | |
| align | "inherit" | "justify" | "start" | "end" | "center" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "left" | "match-parent" | "right" Sets text-align css property | |
| italic | boolean Adds font-style: italic | |
| underline | boolean Underline the text | |
| strikethrough | boolean Add strikethrough style | |
| sx | CSSObject CSS style overrides | |
| width | number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; } Width of the component. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up
the entire row, 6 is half, 1 is 1/12.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row.
content indicates that the component should take up as much space as its content.
auto indicates that the component should take any leftover space on the row.
To set width based on the screen size, use an object with a specific width for each breakpoint.
e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%. | content |
| offset | number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; } Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row.
To set offset based on the screen size, use an object with a specific offset for each breakpoint.
e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%. |
Title component API
| Name | Description | Default |
|---|---|---|
| children | React.ReactNode Title content | |
| order | 1 | 2 | 3 | 4 | 5 | 6 The size and style of the title with 1 being the largest and 6 being the smallest. | 1 |
| color | "primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}` Title color | |
| weight | React.CSSProperties Sets font-weight css property | |
| transform | React.CSSProperties Sets text-transform css property | |
| align | React.CSSProperties Sets text-align css property | |
| italic | boolean Adds font-style: italic | |
| underline | boolean Underline the title | |
| strikethrough | boolean Add strikethrough style | |
| sx | CSSObject CSS style overrides | |
| width | number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; } Width of the component. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up
the entire row, 6 is half, 1 is 1/12.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row.
content indicates that the component should take up as much space as its content.
auto indicates that the component should take any leftover space on the row.
To set width based on the screen size, use an object with a specific width for each breakpoint.
e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%. | content |
| offset | number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; } Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row.
To set offset based on the screen size, use an object with a specific offset for each breakpoint.
e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%. |