<text>
create a inline element (eg. <span>
).<TEXT>
create a block element (eg. <div>
).See the samples.
Easily realign text to components with text alignment attribute.
<TEXT align="left">Left aligned text.</TEXT> <TEXT align="center">Center aligned text.</TEXT> <TEXT align="right">Right aligned text.</TEXT> <TEXT align="justify">Justified text.</TEXT> <TEXT align="nowrap">No wrap text.</TEXT>
Transform text in components with text capitalization attribute.
<text transform="lowercase">Lowercased text.</text> <text transform="uppercase">Uppercased text.</text> <text transform="capitalize">Capitalized text.</text>
Convey meaning through color with a handful of emphasis utility attributes. These may also be applied to links and will darken on hover just like our default link styles.
<text type="muted"> [...] </text> <text type="primary"> [...] </text> <text type="success"> [...] </text> <text type="info"> [...] </text> <text type="warning"> [...] </text> <text type="danger"> [...] </text>
Similar to the contextual text color attributes, easily set the background of an element to any contextual attribute. Anchor components will darken on hover, just like the text attributes.
<text background="primary"> [...] </text> <text background="success"> [...] </text> <text background="info"> [...] </text> <text background="warning"> [...] </text> <text background="danger"> [...] </text>
Attribute | Allowed Values | Description |
---|---|---|
type | muted primary success info warning danger | Contextual color of text |
background | primary success info warning danger | Contextual background of text |
align | left right center , justify nowrap | Text align |
transform | lowercase uppercase capitalize | Text transformation |
size | medium xx-small x-small small large x-large xx-large smaller larger length (%, em, px, etc.) | Text sizes |