Skip to content

Typography

Text

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

jsx
import { Text } from 'intergalactic/typography';
<Text />;
import { Text } from 'intergalactic/typography';
<Text />;

TextProps

& {...}
NameTypeDescription
size100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 Font size and line-heights
noWrapboolean The text will not be wrapped on a new line and will be cut off with ellipsis
boldboolean CSS property `font-weight: 700;`
semiboldboolean CSS property `font-weight: 600;`
mediumboolean CSS property `font-weight: 500;`
italicboolean Italicized text
underlineboolean Underlined text
monospaceboolean CSS property `font-family: monospace;`
lineThroughboolean Strikethrough text
uppercaseboolean Uppercase text
lowercaseboolean Lowercase text
capitalizeboolean Capitalized text
colorstring Text color *
fontSizeProperty.FontSize<any> Custom `font-size`
lineHeightProperty.LineHeight<any> Custom `line-height`
fontWeightProperty.FontWeight Custom `font-weight`
textAlignProperty.TextAlign Text alignment
use"primary" | "secondary" Enforces text color
disabledboolean Makes text semi-transparent to indicate disabled state

List

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

jsx
import { List } from 'intergalactic/typography';
<List />;
import { List } from 'intergalactic/typography';
<List />;

ListProps

& {...}
NameTypeDescription
markerReact.ReactNode Marker of the entire list

List.Item

A list item tagged with li. It's possible to set a custom marker. Also, it is possible to customise content with <List.Item.Content />;

jsx
import { List } from 'intergalactic/typography';
<List.Item />;
<List.Item.Content />;
import { List } from 'intergalactic/typography';
<List.Item />;
<List.Item.Content />;

ListItemProps

& {...}
NameTypeDescription
markerReact.ReactNode Individual marker of a list item

ListItemContentProps

Blockquote

Quotes from great people 🙊

jsx
import { Blockquote } from 'intergalactic/typography';
<Blockquote />;
import { Blockquote } from 'intergalactic/typography';
<Blockquote />;

BlockquoteProps

& {...}
NameTypeDescription
authorReact.ReactNode Source of the quote

Hint

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

jsx
import { Hint } from 'intergalactic/typography';
<Hint>
  <Hint.Addon />
  <Hint.Text />
</Hint>;
import { Hint } from 'intergalactic/typography';
<Hint>
  <Hint.Addon />
  <Hint.Text />
</Hint>;

TypographyHintProps

& & {...}
NameTypeDescription
disabledboolean The value responsible for the activity of the element
activeboolean Enable `active` state
addonLeftReact.ElementType Left addon hint
addonRightReact.ElementType Right addon hint

FormatText

A wrapper component required to add styles to native tags.

TIP

Note that the component is in another package intergalactic/format-text.

jsx
import FormatText from 'intergalactic/format-text';
<FormatText />;
import FormatText from 'intergalactic/format-text';
<FormatText />;

FormatTextProps

& {...}
NameTypeDescription
size"s" | "m" | "l"

Released under the MIT License.

Released under the MIT License.