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 peace in the middle of St.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>
);

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