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.
carbon-design-system / carbon / packages / type / examples / preview / index.js View on Github 
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) => (
))}
<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>
);
}{fontFamilies.map(({ dir, title }) => (
))}
{Object.keys(CarbonType.styles).map(token => (
{fontFamilies.map(({ dir, fontFamily, title, sample }) => (
<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
