New to KendoReactLearn about KendoReact Free.

Appearance

The Typography component provides many predefined appearance options such as configure the the alignment and transformation of the text, and also change the theme color.

Font Size

To set the font size of the element, use the fontSize property.

The possible values are:

  • xsmall
  • small
  • medium
  • large
  • xlarge
Change Theme
Theme
Loading ...

Font Weight

To set the font weight of the element, use the fontWeight property.

The possible values are:

  • light—font-weight: 300
  • normal—font-weight: 400
  • bold—For Default and Bootstrap themes—font-weight: 700. For Material theme—font-weight: 500.
Change Theme
Theme
Loading ...

Text Alignment

To set the text alignment of the element, use the textAlign property.

The possible values are:

  • left—Applies text-align: left
  • right—Applies text-align: right
  • center—Applies text-align: center
  • justify—Applies text-align: justify
Change Theme
Theme
Loading ...

Text Transformation

To set the text transformation of the element, use the textTransform property.

The possible values are:

  • lowercase—Applies text-transform: lowercase
  • uppercase—Applies text-transform: uppercase
  • capitalize—Applies text-transform: capitalize
Change Theme
Theme
Loading ...

Theme Color

To set the color of the element, use the themeColor property.

The possible values are:

  • inherit—Applies coloring based on the current color.
  • primary —Applies coloring based on primary theme color.
  • secondary—Applies coloring based on secondary theme color.
  • tertiary— Applies coloring based on tertiary theme color.
  • info—Applies coloring based on info theme color.
  • success— Applies coloring based on success theme color.
  • warning— Applies coloring based on warning theme color.
  • error— Applies coloring based on error theme color.
  • dark— Applies coloring based on dark theme color.
  • light— Applies coloring based on light theme color.
  • inverse— Applies coloring based on inverse theme color.

You can use the style property to apply custom color related properties to the element.

Change Theme
Theme
Loading ...

Margin

To set the margin of the element or its side margins, use the margin property.

The possible values are:

  • xsmall
  • small
  • medium
  • large
  • xlarge
  • thin
  • hair
  • number—The minimum number value is 0 and the maximum is 24.

    When using the Default or Material themes, passing a number will apply a margin of 4 times the passed number in pixels. When using the Bootstrap theme the applied margin will be equal to the passed number divided by 4 in rem units.

Change Theme
Theme
Loading ...