Typography

BigDesign comes with a collection of predefined typography components. Typography Design Guidelines.

Headings

Hero header - h0

Page header - h1

Panel header - h2

Section header - h3

Group header - h4

Edit the code below to see your changes live!

Heading

Prop Name
Type
Default
Description
ash1 | h2 | h3 | h4 | h5 | h6

Changes the rendered tag for semantic purposes.

Props ending with * are required

Inherited Props

Expand

Typography Props

Expand

Margin Props

Texts

Text - p

Small text - small

Edit the code below to see your changes live!

Text

Prop Name
Type
Default
Description
asstring

Changes the rendered tag for semantic purposes.

boldbooleanfalse

Changes text style to bold.

italicbooleanfalse

Changes text style to italic.

strikethroughbooleanfalse

Changes text style to strikethrough.

underlinebooleanfalse

Changes text style to underline.

capitalizebooleanfalse

Changes text transform to capitalize.

lowercasebooleanfalse

Changes text transform to lowercase.

uppercasebooleanfalse

Changes text transform to uppercase.

Props ending with * are required

Inherited Props

Expand

Typography Props

Expand

Margin Props

Examples

Color

Choose any color from our color pallete to style your text color.

This color is primary40

This color is danger70

This color is success50

Edit the code below to see your changes live!

Text Modifiers

This text is bold.

This text is italic.

This text is strikethrough.

This text is underlined.

This text is uppercase.

This text is lowercase.

This text is capitalized.

This text is bold and uppercase.

Edit the code below to see your changes live!

Ellipse

Setting the ellipsis prop, will allow text to overflow nicely.

Indexes start at 0 and so do our headers.

Edit the code below to see your changes live!

As a different tag

This is a span.

Edit the code below to see your changes live!

Beta