DE-PACK Component Library

Font Weight: Default 

<h1>Font Weight</h1>

<table class="table-auto border-collapse w-full overflow-hidden">
    <thead>
        <tr>
            <th>Class</th>
            <th>Value</th>
            <th>Sample</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>font-thin</td>
            <td>100</td>
            <td class="text-2xl font-thin">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-extralight</td>
            <td>200</td>
            <td class="text-2xl font-extralight">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-light</td>
            <td>300</td>
            <td class="text-2xl font-light">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-normal</td>
            <td>400</td>
            <td class="text-2xl font-normal">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-medium</td>
            <td>500</td>
            <td class="text-2xl font-medium">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-semibold</td>
            <td>600</td>
            <td class="text-2xl font-semibold">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-bold</td>
            <td>700</td>
            <td class="text-2xl font-bold">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-extrabold</td>
            <td>800</td>
            <td class="text-2xl font-extrabold">The quick brown fox jumps over the lazy dog</td>
        </tr>
        <tr>
            <td>font-black</td>
            <td>900</td>
            <td class="text-2xl font-black">The quick brown fox jumps over the lazy dog</td>
        </tr>
    </tbody>
</table>
 
<h1>Font Weight</h1>

<table class="table-auto border-collapse w-full overflow-hidden">
<thead>
  <tr>
    <th>Class</th>
    <th>Value</th>
    <th>Sample</th>
  </tr>
</thead>
<tbody>
  {% for entry in weights %}
  <tr>
    <td>{{ entry.class }}</td>
    <td>{{ entry.value }}</td>
    <td class="text-2xl {{ entry.class }}">The quick brown fox jumps over the lazy dog</td>
  </tr>
  {% endfor %}
</tbody>
</table>
 
{
  "weights": [
    {
      "class": "font-thin",
      "value": "100"
    },
    {
      "class": "font-extralight",
      "value": "200"
    },
    {
      "class": "font-light",
      "value": "300"
    },
    {
      "class": "font-normal",
      "value": "400"
    },
    {
      "class": "font-medium",
      "value": "500"
    },
    {
      "class": "font-semibold",
      "value": "600"
    },
    {
      "class": "font-bold",
      "value": "700"
    },
    {
      "class": "font-extrabold",
      "value": "800"
    },
    {
      "class": "font-black",
      "value": "900"
    }
  ]
}

No notes defined.