How to use @carbon/type - 2 common examples

To help you get started, weโ€™ve selected a few @carbon/type examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-design-system / carbon / packages / type / examples / preview / index.js View on Github external
return (
    <article>
      <header>
        <h2 id="type-scale">Scale</h2>
      </header>
      <p>Used for deriving a type scale value for a given step.</p>
      
          {CarbonType.scale.map((size, step) =&gt; (
            
          ))}
        <table>
        <thead>
          <tr>
            <th>Step</th>
            <th>px</th>
            <th>Actual size</th>
          </tr>
        </thead>
        <tbody><tr>
              <td>{step + 1}</td>
              <td>{size}</td>
              <td>
                Good design is good business
              </td>
            </tr></tbody>
      </table>
    </article>
  );
}
github carbon-design-system / carbon / packages / type / examples / preview / index.js View on Github external
{fontFamilies.map(({ dir, title }) =&gt; (
              
            ))}
          
          {Object.keys(CarbonType.styles).map(token =&gt; (
            
              {fontFamilies.map(({ dir, fontFamily, title, sample }) =&gt; (
                <table>
        <thead>
          <tr>
            <th>Token</th>
            <th>Sample</th><th dir="==" style="{{">
                {title}
              </th></tr>
        </thead>
        <tbody><tr>
              <td>
                <pre>                  <code>{formatTokenName(token)}</code>
                </pre>
              </td>
              <td>
                <span>Text sample</span>
              </td><td dir="{dir}" style="{{">
                  <span>{sample}</span></td></tr></tbody></table>

@carbon/type

Typography for digital and software products using the Carbon Design System

Apache-2.0
Latest version published 1 month ago

Package Health Score

95 / 100
Full package analysis

Popular @carbon/type functions