Skip to content

Typography

Style
4.3.28

Text

It's a main component for text in our interfaces. By default, this is a span tag.

import { Text } from '@semcore/ui/typography';
<Text />;
interface
ITextProps extends IBoxProps
PropertyDescription
size
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800

Font size and line-heights

noWrap
boolean

The text will not be wrapped on a new line and will be cut off with ellipsis

bold
boolean

CSS property font-weight: 700;

medium
boolean

CSS property font-weight: 500;

italic
boolean

Italicized text

underline
boolean

Underlined text

lineThrough
boolean

Strikethrough text

color
string

Text color *

fontSize
Property.FontSize

Custom font-size

lineHeight
Property.LineHeight

Custom line-height

fontWeight
Property.FontWeight

Custom font-weight

textAlign
Property.TextAlign

Text alignment

List

A list tagged with ʻul`. It's possible to set a custom marker for all items.

import { List } from '@semcore/ui/typography';
<List />;
interface
IListProps extends ITextProps
PropertyDescription
marker
React.ReactNode =

Marker of the entire list

List.Item

A list item tagged with li. It's possible to set a custom marker.

import { List } from '@semcore/ui/typography';
<List.Item />;
interface
IListItemProps extends ITextProps
PropertyDescription
marker
React.ReactNode

Individual marker of a list item

Blockquote

Quotes from great people 🙊

import { Blockquote } from '@semcore/ui/typography';
<Blockquote />;
interface
IBlockquoteProps extends IBoxProps
PropertyDescription
author
React.ReactNode

Source of the quote

Hint

The hint is very similar to Link and has a similar structure from Addon + Text.

import { Hint } from '@semcore/ui/typography';
<Hint>
  <Hint.Addon />
  <Hint.Text />
</Hint>;
interface
IHintProps extends ITextProps
PropertyDescription
disabled
boolean = false

The value responsible for the activity of the element

active
boolean

Enable active state

addonLeft
React.ElementType

Left addon hint

addonRight
React.ElementType

Right addon hint

FormatText

A wrapper component required to add styles to native tags.

Note that the component is in another package @semcore/ui/format-text.

import FormatText from '@semcore/ui/format-text';
<FormatText />;
interface
IFormatTextProps extends IBoxProps
PropertyDescription
size
"s" | "m" | "l"