Typography Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of text according to typography style guide conventions.

• https://zeroheight.com/990ea04ab/p/172ffa-typography

API

| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | display | enum("normal", "light", "white") | no | "normal" | Changes the foreground/background color mode | | children | React node | yes | n/a | The text to display | | className | string | no | n/a | Adds an optional classname to the component | | classOverrides | { normal: string, light: string, white: string } | no | {} | Allows specifying classes to override other specific classes in the component | | id | string | no | n/a | Adds an optional id to the component | | variant | enum("h1", "h2", "h3", "h4", "h5", "h6", "p") | no | "p" | "error" | "success" | Changes the primary text style | | component | enum("h1", "h2", "h3", "h4", "h5", "h6", "p", "span") | no | variant prop | Sets the native element used in the markup | | noBottomMargin | boolean | no | false | Adds optional bottom margin | | body | enum("default", "small", "smallCaps") | no | "default" | Changes text secondary styles |