JSPM

@rmwc/typography

14.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6631
  • Score
    100M100P100Q128956F
  • License MIT

Package Exports

  • @rmwc/typography
  • @rmwc/typography/styles

Readme

Typography

Material Design’s text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.

Basic Usage

<\>

  <Typography use\="headline1"\>headline1</Typography\>

  <Typography use\="headline2"\>headline2</Typography\>

  <Typography use\="headline3"\>headline3</Typography\>

  <Typography use\="headline4"\>headline4</Typography\>

  <Typography use\="headline5"\>headline5</Typography\>

  <Typography use\="headline6"\>headline6</Typography\>

  <Typography use\="subtitle1"\>subtitle1</Typography\>

  <Typography use\="subtitle2"\>subtitle2</Typography\>

  <Typography use\="body1"\>body1</Typography\>

  <Typography use\="body2"\>body2</Typography\>

  <Typography use\="caption"\>caption</Typography\>

  <Typography use\="button"\>button</Typography\>

  <Typography use\="overline"\>overline</Typography\>

</\>

Specify tag

<Typography use\="headline6" tag\="h3"\>

  headline6

</Typography\>

Provider Setup

You can globally map specify type classes to HTML tags for semantics, or specify a default to be used instead of span.

Specify tag

<RMWCProvider

  typography\={{

    /\*\* Make all Typography components default to <div>  \*/

    defaultTag: 'div',

    /\*\* Make headline5 <h5>  \*/

    headline5: 'h5',

    /\*\* Make body2 <p>  \*/

    body2: 'p',

    /\*\* Use your own component  \*/

    body1: ({ children, ...rest }) \=> (

      <span\>

        <b\>{children}!!!</b\>

      </span\>

    )

  }}

\>

  <Typography use\="headline6"\>Rendered default \`div\`</Typography\>

  <Typography use\="headline5"\>Rendered with \`h5\`</Typography\>

  <Typography use\="body2"\>Rendered with \`p\`</Typography\>

  <Typography use\="body1"\>Custom rendering</Typography\>

</RMWCProvider\>

Typography