Typography

A set of text block components for an out-of-the-box path to the SpaceWeb font standard.

body-14
Selected body-14.
open

Examples

Body variants

body-8 - We ignite opportunity by setting the world in motion.
body-10 - We ignite opportunity by setting the world in motion.
body-12 - We ignite opportunity by setting the world in motion.
body-13 - We ignite opportunity by setting the world in motion.
body-14 - We ignite opportunity by setting the world in motion.
body-16 - We ignite opportunity by setting the world in motion.

Body Variant Specifications


Display variants

display-18 - We ignite opportunity by setting the world in motion.
display-20 - We ignite opportunity by setting the world in motion.

display-24 - We ignite opportunity by setting the world in motion.

display-28 - We ignite opportunity by setting the world in motion.

display-32 - We ignite opportunity by setting the world in motion.

display-40 - We ignite opportunity by setting the world in motion.

display-42 - We ignite opportunity by setting the world in motion.

Display Variant Specifications


Truncate with tooltip on basis of max lines

Hover the elements on right side to see the tooltip
Hello this text doesn't get truncated
Hello this text gets truncated with elipsis
Hello this text doesn't get truncated
Hello this text gets truncated
Hello this text doesn't get truncated with ellipsis after 2 line
Hello this text gets truncated with ellipsis after 2 line

Things to note:

  • Typography internally utilizes line-clamp classes to truncate texts based on the number of lines, employing display: -webkit-box.
  • Therefore, refrain from overriding the display property of the Typography component when utilizing it with the truncate prop.
  • maxLines doesn't work in case of truncation with gradient. Use the maxLines={1} incase you want to truncate, since typography requires either maxWidth or maxLines parameter to truncate.

Truncate with tooltip on basis of max width

Hover the elements on right side to see the tooltip
Hello this text doesn't get truncated
Hello this text gets truncated
Hello this text doesn't get truncated
Hello this text gets truncated
Hello this text doesn't get truncated
Hello this text gets truncated

Mask width specification

Mask width variants (use the resize icon to test)

Mask Width 1.6 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod.
Mask Width 8 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod.
Mask Width 3 rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod.

API

Typography props

NameTypeDefaultDescription
$as
string
Modifies the base element used to render the text block
children
react node
Text to render
className
string
Utility classes along with style argument
intent
'default' | 'ai'
defaultDefines the intent of the typography.
maskWidth
number
1.6Controls the length of the linear gradient mask(in rem), when truncationType is `gradient`.
maxLines
number
If the typography's Lines are more than maxLines, it will truncate with a tooltip. It doesn't work if truncationType is gradient
maxWidth
number
If the typography's width is more than maxWidth, it will truncate with a tooltip. MaxWidth should be provided in rem.
noTooltipOnTruncation
boolean
By default, tooltip will be visible when maxLines/maxWidth is provided and content overflows. Pass this prop to disable tooltip.
truncationType
'ellipsis' | 'gradient'
ellipsisControls whether truncation will be an ellipsis or gradient
variant
'body-8' | 'body-10' | 'body-12' | 'body-13' | 'body-14' | 'body-16' | 'display-18' | 'display-20' | 'display-24' | 'display-28' | 'display-32' | 'display-40' | 'display-42'
body-14Variant of the Font type
weight
'regular' | 'medium' | 'semibold' | 'bold'
Font weight [Note:- Default Font-Weight for Body variants is regular and for Display variants is medium]

You can check the implementation of the component for more details.

Typography exports

You can import this module like so:

import {DEPRECATED_VARIANT_VS_CLASS_MAP} from 'spaceweb/typography'

It exports the following components or utility functions:

  • DEPRECATED_VARIANT_VS_CLASS_MAP
  • TYPOGRAPHY_CLASS_MAP
  • TYPOGRAPHY_VARIANT_MAP
  • Typography