Typography

A set of heading and text block components for an out-of-the-box path to the BaseUI font standard.

You can find the font definitions in the Theming values page.

When to use

  • Use the drop-in typography components for titles and text blocks in an app.

Typography Headings

H6 - We ignite opportunity by setting the world in motion.
H5 - We ignite opportunity by setting the world in motion.

H4 - We ignite opportunity by setting the world in motion.

H3 - We ignite opportunity by setting the world in motion.

H2 - We ignite opportunity by setting the world in motion.

H1 - We ignite opportunity by setting the world in motion.

Typography Text Blocks

Label2

Paragraph2 - Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

Label1

Paragraph1 - Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

Caption2
Caption1 - Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

Typography Display Block

We ignite opportunity by setting the world in motion.

Typography API

children import

react.Node

as import = "div"

Modifies the base element used to render the block.

react.ElementType

overrides object = {}

Block { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*

color <T> | Array<<T>><string>

Accepts all themeable color properties (primary200, etc.).

<T> | Array<<T>>string

font union

Accepts all themeable font properties (font200, etc.).

One of
string,
Arraystring

alignContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"normal",
"baseline",
"first baseline",
"last baseline",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

<T> | Array<<T>>One of
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

alignSelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

<T> | Array<<T>>One of
"auto",
"normal",
"center",
"start",
"end",
"self-start",
"self-end",
"flex-start",
"flex-end",
"baseline",
"first baseline",
"last baseline",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

flexDirection <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

<T> | Array<<T>>One of
"row",
"row-reverse",
"column",
"column-reverse",
"inherit",
"initial",
"unset"

display <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/display

<T> | Array<<T>>One of
"block",
"inline",
"run-in",
"flow",
"flow-root",
"table",
"flex",
"grid",
"ruby",
"block flow",
"inline table",
"flex run-in",
"list-item",
"list-item block",
"list-item inline",
"list-item flow",
"list-item flow-root",
"list-item block flow",
"list-item block flow-root",
"flow list-item block",
"table-row-group",
"table-header-group",
"table-footer-group",
"table-row",
"table-cell",
"table-column-group",
"table-column",
"table-caption",
"ruby-base",
"ruby-text",
"ruby-base-container",
"ruby-text-container",
"contents",
"none",
"inline-block",
"inline-table",
"inline-flex",
"inline-grid",
"inherit",
"initial",
"unset"

flex <T> | Array<<T>><string>

<T> | Array<<T>>string

grid <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

<T> | Array<<T>>string

gridArea <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

<T> | Array<<T>>string

gridAutoColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

<T> | Array<<T>>string

gridAutoFlow <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

<T> | Array<<T>>One of
"row",
"column",
"dense",
"row dense",
"column dense",
"inherit",
"initial",
"unset"

gridAutoRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

<T> | Array<<T>>string

gridColumn <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

<T> | Array<<T>>string

gridColumnEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end

<T> | Array<<T>>string

gridColumnGap <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap

<T> | Array<<T>>string

gridColumnStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start

<T> | Array<<T>>string

gridGap <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap

<T> | Array<<T>>string

gridRow <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row

<T> | Array<<T>>string

gridRowStart <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start

<T> | Array<<T>>string

gridRowEnd <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end

<T> | Array<<T>>string

gridTemplate <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template

<T> | Array<<T>>string

gridTemplateAreas <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

<T> | Array<<T>>string

gridTemplateColumns <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

<T> | Array<<T>>string

gridTemplateRows <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows

<T> | Array<<T>>string

justifyContent <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

<T> | Array<<T>>One of
"center",
"start",
"end",
"flex-start",
"flex-end",
"left",
"right",
"space-between",
"space-around",
"space-evenly",
"stretch",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

justifyItems <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"legacy right",
"legacy left",
"legacy center",
"inherit",
"initial",
"unset"

justifySelf <T> | Array<<T>><union>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

<T> | Array<<T>>One of
"auto",
"normal",
"stretch",
"center",
"start",
"end",
"flex-start",
"flex-end",
"self-start",
"self-end",
"left",
"right",
"baseline",
"first baseline",
"last baseline",
"safe center",
"unsafe center",
"inherit",
"initial",
"unset"

position <T> | Array<<T>><union>

<T> | Array<<T>>One of
"static",
"absolute",
"relative",
"fixed",
"sticky"

width <T> | Array<<T>><string>

<T> | Array<<T>>string

minWidth <T> | Array<<T>><string>

<T> | Array<<T>>string

maxWidth <T> | Array<<T>><string>

<T> | Array<<T>>string

height <T> | Array<<T>><string>

<T> | Array<<T>>string

minHeight <T> | Array<<T>><string>

<T> | Array<<T>>string

maxHeight <T> | Array<<T>><string>

<T> | Array<<T>>string

overflow <T> | Array<<T>><union>

<T> | Array<<T>>One of
"visible",
"hidden",
"scroll",
"scrollX",
"scrollY",
"auto",
"inherit",
"initial",
"unset"

margin <T> | Array<<T>><string>

<T> | Array<<T>>string

marginTop <T> | Array<<T>><string>

<T> | Array<<T>>string

marginRight <T> | Array<<T>><string>

<T> | Array<<T>>string

marginBottom <T> | Array<<T>><string>

<T> | Array<<T>>string

marginLeft <T> | Array<<T>><string>

<T> | Array<<T>>string

padding <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingTop <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingRight <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingBottom <T> | Array<<T>><string>

<T> | Array<<T>>string

paddingLeft <T> | Array<<T>><string>

<T> | Array<<T>>string

placeContent <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

<T> | Array<<T>>string

placeItems <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

<T> | Array<<T>>string

placeSelf <T> | Array<<T>><string>

available values: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self

<T> | Array<<T>>string

flexWrap <T> | Array<<T>><boolean>

<T> | Array<<T>>boolean

left <T> | Array<<T>><string>

<T> | Array<<T>>string

top <T> | Array<<T>><string>

<T> | Array<<T>>string

right <T> | Array<<T>><string>

<T> | Array<<T>>string

bottom <T> | Array<<T>><string>

<T> | Array<<T>>string