Package Exports
- @devseed-ui/typography
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@devseed-ui/typography) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Import
import { Heading, Link, Quote, Strong } from '@devseed-ui/typography';Guidelines and examples
Heading
Heading is a default component to display action in a page.
Variation
Heading supports color changes, but it is tied to the theme:
<DevseedUiThemeProvider>
<Heading variation="primary">
Primary
</Heading>
<Heading variation="secondary">
Secondary
</Heading>
</DevseedUiThemeProvider>Size
Heading supports four sizes – small, medium, large, xlarge.
<DevseedUiThemeProvider>
<Heading size="small">
Small
</Heading>
<Heading size="medium">
Medium
</Heading>
<Heading size="large">
Large
</Heading>
<Heading size="xlarge">
Extra Large
</Heading>
</DevseedUiThemeProvider>Link
Use it like a regular tag. It adapts the text style to the theme.
<div>
<Link href="">Sample link</Link>
</div>Quote
Use it like a regular tag. It adapts the text style to the theme.
If you want it to be a
, pass the prop
as="blockquote".
<div>
<Quote>quoting something</Quote>
</div>Strong
Use it like a regular tag. It adapts the text style to the theme.
If you want it to be a , pass the prop as="b".
<div>
some <Strong><strong> text</Strong> and some{' '}
<Strong as="b"><b> text</Strong>
</div>API Documentation
Heading
rows:
- Prop name: "variant"
Type: "oneOf ['base', 'primary', 'secondary']"
Description: "Sets the style variant of the heading"
Default value: "base"
- Prop name: "size"
Type: "oneOf ['small', 'medium', 'large', 'xlarge']"
Description: "Sets the size variant of the heading"
Default value: "medium"
- Prop name: "className"
Type: "string"
Description: "Adds a className to the class attribute."
Default value: ""