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.

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 color is underline.

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