1. Components
  2. Text

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

Font size
fontSizetremor-metric
Text color
colorstremor-content-emphasis

Title

Font size
fontSizetremor-title
Text color
colorstremor-content-emphasis

Subtitle

Text color
colorstremor-content-subtle

Text

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.