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

Appearance

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

Font Size

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

The possible values are:

  • xsmall
  • small
  • medium
  • large
  • xlarge
Example
View Source
Edit In Stackblitz  
Change Theme:

Font Weight

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

The possible values are:

  • lightfont-weight: 300
  • normalfont-weight: 400
  • boldFor Default and Bootstrap themesfont-weight: 700. For Material themefont-weight: 500.
Example
View Source
Edit In Stackblitz  
Change Theme:

Text Alignment

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

The possible values are:

  • leftApplies text-align: left
  • rightApplies text-align: right
  • centerApplies text-align: center
  • justifyApplies text-align: justify
Example
View Source
Edit In Stackblitz  
Change Theme:

Text Transformation

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

The possible values are:

  • lowercaseApplies text-transform: lowercase
  • uppercaseApplies text-transform: uppercase
  • capitalizeApplies text-transform: capitalize
Example
View Source
Edit In Stackblitz  
Change Theme:

Theme Color

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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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
  • objectAllows setting the margins for each side.
  • numberThe 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.

Example
View Source
Edit In Stackblitz  
Change Theme: