Components
    • Animation
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Grid
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • Sortable
    • Tooltip
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

TypographyProps

Represents the props of the KendoReact Typography component.

className?

string

Specifies a list of CSS classes that will be added to the element.

fontSize?

"xsmall" | "small" | "medium" | "large" | "xlarge"

Overrides the font size applied by the theme typography styles see example.

The possible values are:

  • xsmall
  • small
  • medium
  • large
  • xlarge

fontWeight?

"light" | "normal" | "bold"

Overrides the font weight applied by the theme typography styles see example.

The possible values are:

  • lightfont-weight: 300
  • normalfont-weight: 400
  • boldFor Default and Bootstrap themesfont-weight: 700. For Material themefont-weight: 500.

margin?

MarginEnum | { bottom?: MarginEnum; left?: MarginEnum; right?: MarginEnum; top?: MarginEnum; }

Specifies the applied margin to the element see example.

The possible values for the Default and Material themes are:

  • xsmall Applies 4px margin.
  • small Applies 8px margin.
  • medium Applies 12px margin.
  • large Applies 16px margin.
  • xlarge Applies 24px margin.
  • thin Applies 2px margin.
  • hair Applies 1px margin.
  • number Passing a number will apply a margin of 4 times the passed number in pixels. The minimum number value is 0 and the maximum is 24.
  • object &smdash;Passing an object allows setting the margins for each side.

The possible values for the Bootstrap theme are:

  • xsmall Applies 0.25rem margin.
  • small Applies 0.5rem margin.
  • medium Applies 0.75rem margin.
  • large Applies 1rem margin.
  • xlarge Applies 1.25rem margin.
  • thin Applies 0.125rem margin.
  • hair Applies 0.0625rem margin.
  • number Passing a number will apply a margin equal to the passed number divided by 4 in rem units. The minimum number value is 0 and the maximum is 24.
  • object &smdash;Passing an object allows setting the margins for each side.

style?

CSSProperties

Sets additional CSS styles to the element.

textAlign?

"left" | "right" | "center" | "justify"

Specifies the text align see example.

The possible values are:

  • leftApplies text-align: left
  • rightApplies text-align: right
  • centerApplies text-align: center
  • justifyApplies text-align: justify

textTransform?

"lowercase" | "uppercase" | "capitalize"

Specifies the text transform see example.

The possible values are:

  • lowercaseApplies text-transform: lowercase
  • uppercaseApplies text-transform: uppercase
  • capitalizeApplies text-transform: capitalize

themeColor?

"inherit" | "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | "dark" | "light" | "inverse"

Specifies the theme color of the Typography see example.

The possible values are:

  • inheritApplies coloring based on the current color.
  • primary Applies coloring based on primary theme color.
  • secondaryApplies coloring based on secondary theme color.
  • tertiary Applies coloring based on tertiary theme color.
  • infoApplies 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.