OffHealth component library

Spacing 

<div class="grid gap-6 p-4">

    <div class="flex items-center gap-4">
        <p>space 0</p>
        <div class="w-0 h-0 bg-gray-500 pb-0"></div>
        <p></p>
    </div>

    <div class="flex items-center gap-4">
        <p>space 1</p>
        <div class="w-1 h-0 bg-gray-500 pb-1"></div>
        <p></p>
    </div>

    <div class="flex items-center gap-4">
        <p>space 2</p>
        <div class="w-2 h-0 bg-gray-500 pb-2"></div>
        <p></p>
    </div>

    <div class="flex items-center gap-4">
        <p>space 4</p>
        <div class="w-4 h-0 bg-gray-500 pb-4"></div>
        <p></p>
    </div>

    <div class="flex items-center gap-4">
        <p>space 8</p>
        <div class="w-8 h-0 bg-gray-500 pb-8"></div>
        <p></p>
    </div>

</div>
 
<div class="grid gap-6 p-4">
{% for space in spaces %}
    <div class="flex items-center gap-4">
        <p>space {{ space.unit }}</p> <div class="w-{{ space.unit }} h-0 bg-gray-500 pb-{{ space.unit }}"></div> <p></p>
    </div>
{% endfor %}
</div>
 
{
  "spaces": [
    {
      "name": "space-0",
      "unit": 0
    },
    {
      "name": "space-1",
      "unit": 1
    },
    {
      "name": "space-2",
      "unit": 2
    },
    {
      "name": "space-4",
      "unit": 4
    },
    {
      "name": "space-8",
      "unit": 8
    }
  ]
}

Spacing scale used for margins, padding, fixed element height etc…

Learn more