@devseed-ui/typography

@devseed-ui/typography

  import { Heading } 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 the following sizes:

• xxsmall
• xsmall
• small
• medium
• large
• xlarge
• xxlarge
• jumbo

  <DevseedUiThemeProvider>
    <Heading size="xxsmall">
      Extra extra Small
    </Heading>
    <Heading size="xsmall">
      Extra Small
    </Heading>
    <Heading size="small">
      Small
    </Heading>
    <Heading size="medium">
      Medium
    </Heading>
    <Heading size="large">
      Large
    </Heading>
    <Heading size="xlarge">
      Extra Large
    </Heading>
    <Heading size="xxlarge">
      Extra extra Large
    </Heading>
    <Heading size="jumbo">
      Jumbo
    </Heading>
  </DevseedUiThemeProvider>

Alternative title

Heading supports an alternative display style using useAlt

  <DevseedUiThemeProvider>
    <Heading useAlt>
      The alternative heading
    </Heading>
  </DevseedUiThemeProvider>

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: ""
  - Prop name: "useAlt"
    Type: "boolean"
    Description: "Uses the alternative heading display"
    Default value: "false"