import { H1, H2, H3, H4, H5, H6, P, Base } from '@politico/interactive-style/src/components/Typography';// orimport Typography, { H1, H2, H3, H4, H5, H6, P } from '@politico/interactive-style';
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | The content of the component | |
| type | string | "p" | Set the node type of the root text element (only for Base) |
| lighter | bool | false | Use a lighter weight (only for h3) |
| bolder | bool | false | Use a bolder weight (only for h2 and h5) |
| sans & sans-serif | bool | false | Use a sans-serif font (only for p). |
| no-margins | bool | false | Remove margins and max widths. |
| markdownProps | object | Props to pass to React Markdown (only for Markdown) |
| Name | Global Class | Description |
|---|---|---|
| container | PibTypography-container | Styles applied to container div |
| text | PibTypography-text | Styles applied to root textual element |
Some elements have "lighter" or "bolder" weight elements you can toggle.
You can use the "Markdown" component to indicate that the content should be rendered as markdown. You can also use "markdownProps" to pass any custom configuration to the React Markdown component being used.
The quick brown fox jumps over the lazy dog
If you want custom margins, you may want to remove the built-in margins and max-widths. You can do that by using the "no-margins" prop. Try removing the prop to see the defualt behavior.
Add the "no-margins" prop to break outside the well.
Most of the common root elements have their own shorthand (e.g. "H1", "H2", "P"). If you'd like to overwrite that root element you can use the "Base" component and supply a "type" prop. Try changing the root element to something else.
Custom types in Typography