Aeroporto di Bologna - Design System

Typography 

<div style="background-color: #eee; display: inline-block; padding: 16px; margin-bottom: 48px">
    <div><strong>Syntax:</strong> <code>@include font-scale([level], [weight]);</code></div>
    <div><strong>Example:</strong> <code>@include font-scale(level-3, 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-typo-level-0</code></td>
            <td><code> @include font-scale(level-0)</code></td>
            <td>mobile: 10px<br>tablet: 10px<br>desktop: 10px</td>
            <td>16px<br>16px<br>16px</td>
            <td>
                <p class="u-typo-level-0">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-1</code></td>
            <td><code> @include font-scale(level-1)</code></td>
            <td>mobile: 12px<br>tablet: 12px<br>desktop: 12px</td>
            <td>16px<br>16px<br>16px</td>
            <td>
                <p class="u-typo-level-1">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-1-5</code></td>
            <td><code> @include font-scale(level-1-5)</code></td>
            <td>mobile: 14px<br>tablet: 14px<br>desktop: 14px</td>
            <td>21px<br>21px<br>21px</td>
            <td>
                <p class="u-typo-level-1-5">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-2</code></td>
            <td><code> @include font-scale(level-2)</code></td>
            <td>mobile: 16px<br>tablet: 16px<br>desktop: 16px</td>
            <td>24px<br>24px<br>24px</td>
            <td>
                <p class="u-typo-level-2">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-3</code></td>
            <td><code> @include font-scale(level-3)</code></td>
            <td>mobile: 18px<br>tablet: 18px<br>desktop: 20px</td>
            <td>27px<br>27px<br>28px</td>
            <td>
                <p class="u-typo-level-3">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-4</code></td>
            <td><code> @include font-scale(level-4)</code></td>
            <td>mobile: 20px<br>tablet: 21px<br>desktop: 24px</td>
            <td>28px<br>28px<br>32px</td>
            <td>
                <p class="u-typo-level-4">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-5</code></td>
            <td><code> @include font-scale(level-5)</code></td>
            <td>mobile: 24px<br>tablet: 24px<br>desktop: 28px</td>
            <td>32px<br>32px<br>40px</td>
            <td>
                <p class="u-typo-level-5">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-6</code></td>
            <td><code> @include font-scale(level-6)</code></td>
            <td>mobile: 24px<br>tablet: 28px<br>desktop: 32px</td>
            <td>32px<br>40px<br>48px</td>
            <td>
                <p class="u-typo-level-6">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-7</code></td>
            <td><code> @include font-scale(level-7)</code></td>
            <td>mobile: 28px<br>tablet: 32px<br>desktop: 48px</td>
            <td>40px<br>48px<br>56px</td>
            <td>
                <p class="u-typo-level-7">Aa</p>
            </td>
        </tr>
        <tr>
            <td><code>.u-typo-level-8</code></td>
            <td><code> @include font-scale(level-8)</code></td>
            <td>mobile: 32px<br>tablet: 48px<br>desktop: 64px</td>
            <td>48px<br>56px<br>72px</td>
            <td>
                <p class="u-typo-level-8">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], [weight]);</code></div>
  <div><strong>Example:</strong> <code>@include font-scale(level-3, 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>
    {{#each levels}}
    <tr>
      <td><code>.{{ this.class }}</code></td>
      <td><code>{{ this.scss }}</code></td>
      <td>{{{ this.values }}}</td>
      <td>{{{ this.line_height }}}</td>
      <td>
        <p class="{{ this.class }}">{{ this.text }}</p>
      </td>
    </tr>
    {{/each}}
  </tbody>
</table>
 
{
  "levels": [
    {
      "label": "Level 0",
      "class": "u-typo-level-0",
      "scss": " @include font-scale(level-0)",
      "values": "mobile: 10px<br>tablet: 10px<br>desktop: 10px",
      "line_height": "16px<br>16px<br>16px",
      "text": "Aa"
    },
    {
      "label": "Level 1",
      "class": "u-typo-level-1",
      "scss": " @include font-scale(level-1)",
      "values": "mobile: 12px<br>tablet: 12px<br>desktop: 12px",
      "line_height": "16px<br>16px<br>16px",
      "text": "Aa"
    },
    {
      "label": "Level 1.5",
      "class": "u-typo-level-1-5",
      "scss": " @include font-scale(level-1-5)",
      "values": "mobile: 14px<br>tablet: 14px<br>desktop: 14px",
      "line_height": "21px<br>21px<br>21px",
      "text": "Aa"
    },
    {
      "label": "Level 2",
      "class": "u-typo-level-2",
      "scss": " @include font-scale(level-2)",
      "values": "mobile: 16px<br>tablet: 16px<br>desktop: 16px",
      "line_height": "24px<br>24px<br>24px",
      "text": "Aa"
    },
    {
      "label": "Level 3",
      "class": "u-typo-level-3",
      "scss": " @include font-scale(level-3)",
      "values": "mobile: 18px<br>tablet: 18px<br>desktop: 20px",
      "line_height": "27px<br>27px<br>28px",
      "text": "Aa"
    },
    {
      "label": "Level 4",
      "class": "u-typo-level-4",
      "scss": " @include font-scale(level-4)",
      "values": "mobile: 20px<br>tablet: 21px<br>desktop: 24px",
      "line_height": "28px<br>28px<br>32px",
      "text": "Aa"
    },
    {
      "label": "Level 5",
      "class": "u-typo-level-5",
      "scss": " @include font-scale(level-5)",
      "values": "mobile: 24px<br>tablet: 24px<br>desktop: 28px",
      "line_height": "32px<br>32px<br>40px",
      "text": "Aa"
    },
    {
      "label": "Level 6",
      "class": "u-typo-level-6",
      "scss": " @include font-scale(level-6)",
      "values": "mobile: 24px<br>tablet: 28px<br>desktop: 32px",
      "line_height": "32px<br>40px<br>48px",
      "text": "Aa"
    },
    {
      "label": "Level 7",
      "class": "u-typo-level-7",
      "scss": " @include font-scale(level-7)",
      "values": "mobile: 28px<br>tablet: 32px<br>desktop: 48px",
      "line_height": "40px<br>48px<br>56px",
      "text": "Aa"
    },
    {
      "label": "Level 8",
      "class": "u-typo-level-8",
      "scss": " @include font-scale(level-8)",
      "values": "mobile: 32px<br>tablet: 48px<br>desktop: 64px",
      "line_height": "48px<br>56px<br>72px",
      "text": "Aa"
    }
  ]
}

No notes defined.