Bolt Design System

Font-size Usage

<bolt-text> has font-size options to indicate information hierarchy.

This text has its font-size prop defined as: xsmall

<bolt-text font-size="xsmall"> This text has its font-size prop defined as: xsmall </bolt-text>

This text has its font-size prop defined as: small

<bolt-text font-size="small"> This text has its font-size prop defined as: small </bolt-text>

This text has its font-size prop defined as: medium

<bolt-text font-size="medium"> This text has its font-size prop defined as: medium </bolt-text>

This text has its font-size prop defined as: large

<bolt-text font-size="large"> This text has its font-size prop defined as: large </bolt-text>

This text has its font-size prop defined as: xlarge

<bolt-text font-size="xlarge"> This text has its font-size prop defined as: xlarge </bolt-text>

This text has its font-size prop defined as: xxlarge

<bolt-text font-size="xxlarge"> This text has its font-size prop defined as: xxlarge </bolt-text>

This text has its font-size prop defined as: xxxlarge

<bolt-text font-size="xxxlarge"> This text has its font-size prop defined as: xxxlarge </bolt-text>