Components
Text
Tremor has several components for styling text.
Metric
CHF 1,995
Title
Drei Weieren are an oasis of peace in the middle of St.Gallen.
Subtitle
Drei Weieren are an oasis of peace in the middle of St.Gallen.
Text
Drei Weieren are an oasis of peace in the middle of St.Gallen.
Bold and Italic
Drei Weieren are an oasis of peacein the middle ofSt.Gallen.
Text components
Tremor exports six components for styling text.
import { Metric, Title, Subtitle, Bold, Italic, Text } from "@tremor/react";
Usage example
The example below shows a composition of all text styling components: Metric
,
Title
, Subtitle
, Bold
, Italic
, and Text
.
Metric
CHF 1,995
Title
Drei Weieren are an oasis of peace in the middle of St.Gallen.
Subtitle
Drei Weieren are an oasis of peace in the middle of St.Gallen.
Bold
Drei Weieren are an oasis of peace in the middle of St.Gallen.Italic
Drei Weieren are an oasis of peace in the middle of St.Gallen.Text
Drei Weieren are an oasis of peace in the middle of St.Gallen.
import { Metric Title, Subtitle, Text, Bold, Italic, } from "@tremor/react" export default () => ( <Metric>CHF 1,995</Metric> <Title>Drei Weieren is an oasis of peace in the middle of St.Gallen.</Title> <Subtitle>Drei Weieren is an oasis of peace in the middle of St.Gallen.</Subtitle> <Text>Drei Weieren is an oasis of peace in the middle of St.Gallen.</Text> <Text>Drei Weieren is an <Bold>oasis of peace</Bold>in the middle of <Italic>St.Gallen.</Italic></Text> );
Theming
Metric
Element | Theme Token |
---|---|
Font size fontSizetremor-metric | |
Text color colorstremor-content-emphasis |
Title
Element | Theme Token |
---|---|
Font size fontSizetremor-title | |
Text color colorstremor-content-emphasis |
Subtitle
Element | Theme Token |
---|---|
Text color colorstremor-content-subtle |
Text
Element | Theme Token |
---|---|
Font size fontSizetremor-default | |
Text color colorstremor-content-DEFAULT |
API Reference: Metric, Title, Subtitle
- coloroptional
- Description
- Controls the color of the text.
- Type
- string
- Default
- gray
- Values
- See color section
API Reference: Bold, Italic
Those components do not have any properties.
API Reference: Text
- coloroptional
- Description
- Controls the color of the text.
- Type
- string
- Default
- gray
- Values
- See color section
Need help? You can also ask the community on GitHub Discussions or Slack.