@hig/typography

    1.2.0 • Public • Published

    Typography

    The Typography components apply the Artifakt typeface to text.

    Read more about when and how to use the Typography components on the HIG website.

    Getting started

    yarn add @hig/typography @hig/theme-context @hig/theme-data
    yarn add @hig/fonts
    

    Import the component and CSS

    import Typography from '@hig/typography';
    import "@hig/fonts/build/ArtifaktElement.css";
    

    Basic usage

    <Typography>Artifakt Element is the preferred font.</Typography>

    Styling

    Use the className prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

    Typography also has a stylesheet prop that accepts a function wherein you can modify its styles. For instance

    import Typography from '@hig/typography';
    
    function YourComponent() {
      // ...
      const customStylesheet = (styles, props, themeData) => ({
        ...styles,
        typography: {
          ...styles.timestamp,
          color: themeData["colorScheme.errorColor"]
        }
      });
    
      return (
        <Typography stylesheet={customStylesheet} />
      );
    }

    Keywords

    none

    Install

    npm i @hig/typography

    DownloadsWeekly Downloads

    261

    Version

    1.2.0

    License

    Apache-2.0

    Unpacked Size

    23.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar