Tangible Pattern Library

Typography: Inter 

<div style="background-color: #eee; display: inline-block; padding: 16px; margin-bottom: 48px">
    <div><strong>Syntax:</strong> <code>@include font-scale([level], [family], [weight]);</code></div>
    <div><strong>Example:</strong> <code>@include font-scale(level-3, $font-secondary, light);</code></div>
</div>

<table class="dst-table">
    <thead>
        <tr>
            <th>CSS</th>
            <th>SCSS</th>
            <th>Values</th>
            <th>Line-height</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>u-secondary-typo-level-3</code></td>
            <td><code> @include font-scale(level-3, $font-secondary)</code></td>
            <td>min:16px - max:20px</td>
            <td>150%</td>
            <td>
                <p class="u-secondary-typo-level-3">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-secondary-typo-level-2</code></td>
            <td><code> @include font-scale(level-2, $font-secondary)</code></td>
            <td>min:14px - max:16px</td>
            <td>150%</td>
            <td>
                <p class="u-secondary-typo-level-2">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-secondary-typo-level-1</code></td>
            <td><code> @include font-scale(level-1, $font-secondary)</code></td>
            <td>min:12px - max:14px</td>
            <td>150%</td>
            <td>
                <p class="u-secondary-typo-level-1">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>u-secondary-typo-level-0</code></td>
            <td><code> @include font-scale(level-0, $font-secondary)</code></td>
            <td>min:10px - max:10px</td>
            <td>150%</td>
            <td>
                <p class="u-secondary-typo-level-0">Aa</p>
            </td>
        </tr>
    </tbody>
</table>
 
<div style="background-color: #eee; display: inline-block; padding: 16px; margin-bottom: 48px">
  <div><strong>Syntax:</strong> <code>@include font-scale([level], [family], [weight]);</code></div>
  <div><strong>Example:</strong> <code>@include font-scale(level-3, $font-secondary, light);</code></div>
</div>

<table class="dst-table">
  <thead>
    <tr>
      <th>CSS</th>
      <th>SCSS</th>
      <th>Values</th>
      <th>Line-height</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {% for level in levels %}
    <tr>
      <td><code>{{ level.class }}</code></td>
      <td><code>{{ level.scss }}</code></td>
      <td>{{ level.values }}</td>
      <td>{{ level.line_height }}</td>
      <td>
        <p class="{{ level.class }}">{{ level.text }}</p>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
 
{
  "levels": [
    {
      "label": "Level 3",
      "class": "u-secondary-typo-level-3",
      "scss": " @include font-scale(level-3, $font-secondary)",
      "values": "min:16px - max:20px",
      "line_height": "150%",
      "text": "Aa"
    },
    {
      "label": "Level 2",
      "class": "u-secondary-typo-level-2",
      "scss": " @include font-scale(level-2, $font-secondary)",
      "values": "min:14px - max:16px",
      "line_height": "150%",
      "text": "Aa"
    },
    {
      "label": "Level 1",
      "class": "u-secondary-typo-level-1",
      "scss": " @include font-scale(level-1, $font-secondary)",
      "values": "min:12px - max:14px",
      "line_height": "150%",
      "text": "Aa"
    },
    {
      "label": "Level 0",
      "class": "u-secondary-typo-level-0",
      "scss": " @include font-scale(level-0, $font-secondary)",
      "values": "min:10px - max:10px",
      "line_height": "150%",
      "text": "Aa"
    }
  ]
}
  • Handle: @typography--inter
  • Preview:
  • Filesystem Path: src/pattern-library/01-design-tokens/typography/typography--inter.twig

No notes defined.