Illustrative Mathematics® Learn Math for life
ComponentsTypography

Body

A component for styling body text.

done

Overview

This component lets developers select body text sizing and color treatment with a reusable component rather than applying body typography utility classes or mixins manually.

Examples

Basic Usage

By default, body text uses size md and color primary.

Soufflé caramels croissant jujubes gummies. Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Sizes

Body size can be set to xs, sm, or md.

Medium (md). Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Small (sm). Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Extra Small (xs). Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Colors

Body color can be set to primary or secondary. Use primary for default body text and secondary for de-emphasized copy, such as smaller body sizes.

Primary (default). Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Secondary. Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Custom Styling

You can apply custom styles using the className prop.

Pastry topping biscuit jelly beans shortbread jelly beans sweet. Apple pie topping jujubes danish topping caramels.

Import

import { Body } from '@im/integral/components/styled';

Props

Prop

Type