Spacing

Ready

HTML
View
Context
Info
Notes


        
        <div class="rtds-p-6">
    <div>
        <h2 class="rtds-text-2xl rtds-font-bold">Project spacing units.</h2>
        <p>Used for widths, margins and paddings, also in top, right, bottom, left and horizontal (x) and vertical (y) axis. Base 4px (1 unit). Rem unit is used</p>
        <p>Example of use: rtds-w-2, rtds-pt-2, rtds-mb-2, rtds-mx-2, rtds-py-2</p>
    </div>
    <div class="rtds-grid rtds-gap-6 rtds-p-4">

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 0</p>
            <div class="rtds-w-0 rtds-h-0 rtds-bg-primary-100 rtds-p-0"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 0.5</p>
            <div class="rtds-w-0.5 rtds-h-0 rtds-bg-primary-100 rtds-p-0.5"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 1</p>
            <div class="rtds-w-1 rtds-h-0 rtds-bg-primary-100 rtds-p-1"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 1.5</p>
            <div class="rtds-w-1.5 rtds-h-0 rtds-bg-primary-100 rtds-p-1.5"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 2</p>
            <div class="rtds-w-2 rtds-h-0 rtds-bg-primary-100 rtds-p-2"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 2.5</p>
            <div class="rtds-w-2.5 rtds-h-0 rtds-bg-primary-100 rtds-p-2.5"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 3</p>
            <div class="rtds-w-3 rtds-h-0 rtds-bg-primary-100 rtds-p-3"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 3.5</p>
            <div class="rtds-w-3.5 rtds-h-0 rtds-bg-primary-100 rtds-p-3.5"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 4</p>
            <div class="rtds-w-4 rtds-h-0 rtds-bg-primary-100 rtds-p-4"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 5</p>
            <div class="rtds-w-5 rtds-h-0 rtds-bg-primary-100 rtds-p-5"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 6</p>
            <div class="rtds-w-6 rtds-h-0 rtds-bg-primary-100 rtds-p-6"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 7</p>
            <div class="rtds-w-7 rtds-h-0 rtds-bg-primary-100 rtds-p-7"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 8</p>
            <div class="rtds-w-8 rtds-h-0 rtds-bg-primary-100 rtds-p-8"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 9</p>
            <div class="rtds-w-9 rtds-h-0 rtds-bg-primary-100 rtds-p-9"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 10</p>
            <div class="rtds-w-10 rtds-h-0 rtds-bg-primary-100 rtds-p-10"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 11</p>
            <div class="rtds-w-11 rtds-h-0 rtds-bg-primary-100 rtds-p-11"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 12</p>
            <div class="rtds-w-12 rtds-h-0 rtds-bg-primary-100 rtds-p-12"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 14</p>
            <div class="rtds-w-14 rtds-h-0 rtds-bg-primary-100 rtds-p-14"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 16</p>
            <div class="rtds-w-16 rtds-h-0 rtds-bg-primary-100 rtds-p-16"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 20</p>
            <div class="rtds-w-20 rtds-h-0 rtds-bg-primary-100 rtds-p-20"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 24</p>
            <div class="rtds-w-24 rtds-h-0 rtds-bg-primary-100 rtds-p-24"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 28</p>
            <div class="rtds-w-28 rtds-h-0 rtds-bg-primary-100 rtds-p-28"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 32</p>
            <div class="rtds-w-32 rtds-h-0 rtds-bg-primary-100 rtds-p-32"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 36</p>
            <div class="rtds-w-36 rtds-h-0 rtds-bg-primary-100 rtds-p-36"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 40</p>
            <div class="rtds-w-40 rtds-h-0 rtds-bg-primary-100 rtds-p-40"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 44</p>
            <div class="rtds-w-44 rtds-h-0 rtds-bg-primary-100 rtds-p-44"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 48</p>
            <div class="rtds-w-48 rtds-h-0 rtds-bg-primary-100 rtds-p-48"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 52</p>
            <div class="rtds-w-52 rtds-h-0 rtds-bg-primary-100 rtds-p-52"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 56</p>
            <div class="rtds-w-56 rtds-h-0 rtds-bg-primary-100 rtds-p-56"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 60</p>
            <div class="rtds-w-60 rtds-h-0 rtds-bg-primary-100 rtds-p-60"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 64</p>
            <div class="rtds-w-64 rtds-h-0 rtds-bg-primary-100 rtds-p-64"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 72</p>
            <div class="rtds-w-72 rtds-h-0 rtds-bg-primary-100 rtds-p-72"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 80</p>
            <div class="rtds-w-80 rtds-h-0 rtds-bg-primary-100 rtds-p-80"></div>
            <p></p>
        </div>

        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space 96</p>
            <div class="rtds-w-96 rtds-h-0 rtds-bg-primary-100 rtds-p-96"></div>
            <p></p>
        </div>

    </div>
</div>


        <div class="rtds-p-6">
    <div>
    <h2 class="rtds-text-2xl rtds-font-bold">Project spacing units.</h2>
    <p>Used for widths, margins and paddings, also in top, right, bottom, left and horizontal (x) and vertical (y) axis. Base 4px (1 unit). Rem unit is used</p>
    <p>Example of use: rtds-w-2, rtds-pt-2, rtds-mb-2, rtds-mx-2, rtds-py-2</p>
    </div>
    <div class="rtds-grid rtds-gap-6 rtds-p-4">
    {% for space in spaces %}
        <div class="rtds-flex rtds-items-center rtds-gap-4">
            <p>space {{ space.unit }}</p> <div class="{{ space.classWidth }} rtds-h-0 rtds-bg-primary-100 {{ space.classPfull }}"></div> <p></p>
        </div>
    {% endfor %}
    </div>
</div>


        
            
            {
  "spaces": [
    {
      "name": "rtds-space-0",
      "unit": 0,
      "classWidth": "rtds-w-0",
      "classMfull": "rtds-m-0",
      "classMx": "rtds-mx-0",
      "classMy": "rtds-my-0",
      "classMtop": "rtds-mt-0",
      "classMright": "rtds-mr-0",
      "classMbottom": "rtds-mb-0",
      "classMleft": "rtds-ml-0",
      "classPfull": "rtds-p-0",
      "classPx": "rtds-px-0",
      "classPy": "rtds-py-0",
      "classPtop": "rtds-pt-0",
      "classPright": "rtds-pr-0",
      "classPbottom": "rtds-pb-0",
      "classPleft": "rtds-pl-0"
    },
    {
      "name": "rtds-space-0.5",
      "unit": 0.5,
      "classWidth": "rtds-w-0.5",
      "classMfull": "rtds-m-0.5",
      "classMx": "rtds-mx-0.5",
      "classMy": "rtds-my-0.5",
      "classMtop": "rtds-mt-0.5",
      "classMright": "rtds-mr-0.5",
      "classMbottom": "rtds-mb-0.5",
      "classMleft": "rtds-ml-0.5",
      "classPfull": "rtds-p-0.5",
      "classPx": "rtds-px-0.5",
      "classPy": "rtds-py-0.5",
      "classPtop": "rtds-pt-0.5",
      "classPright": "rtds-pr-0.5",
      "classPbottom": "rtds-pb-0.5",
      "classPleft": "rtds-pl-0.5"
    },
    {
      "name": "rtds-space-1",
      "unit": 1,
      "classWidth": "rtds-w-1",
      "classMfull": "rtds-m-1",
      "classMx": "rtds-mx-1",
      "classMy": "rtds-my-1",
      "classMtop": "rtds-mt-1",
      "classMright": "rtds-mr-1",
      "classMbottom": "rtds-mb-1",
      "classMleft": "rtds-ml-1",
      "classPfull": "rtds-p-1",
      "classPx": "rtds-px-1",
      "classPy": "rtds-py-1",
      "classPtop": "rtds-pt-1",
      "classPright": "rtds-pr-1",
      "classPbottom": "rtds-pb-1",
      "classPleft": "rtds-pl-1"
    },
    {
      "name": "rtds-space-1.5",
      "unit": 1.5,
      "classWidth": "rtds-w-1.5",
      "classMfull": "rtds-m-1.5",
      "classMx": "rtds-mx-1.5",
      "classMy": "rtds-my-1.5",
      "classMtop": "rtds-mt-1.5",
      "classMright": "rtds-mr-1.5",
      "classMbottom": "rtds-mb-1.5",
      "classMleft": "rtds-ml-1.5",
      "classPfull": "rtds-p-1.5",
      "classPx": "rtds-px-1.5",
      "classPy": "rtds-py-1.5",
      "classPtop": "rtds-pt-1.5",
      "classPright": "rtds-pr-1.5",
      "classPbottom": "rtds-pb-1.5",
      "classPleft": "rtds-pl-1.5"
    },
    {
      "name": "rtds-space-2",
      "unit": 2,
      "classWidth": "rtds-w-2",
      "classMfull": "rtds-m-2",
      "classMx": "rtds-mx-2",
      "classMy": "rtds-my-2",
      "classMtop": "rtds-mt-2",
      "classMright": "rtds-mr-2",
      "classMbottom": "rtds-mb-2",
      "classMleft": "rtds-ml-2",
      "classPfull": "rtds-p-2",
      "classPx": "rtds-px-2",
      "classPy": "rtds-py-2",
      "classPtop": "rtds-pt-2",
      "classPright": "rtds-pr-2",
      "classPbottom": "rtds-pb-2",
      "classPleft": "rtds-pl-2"
    },
    {
      "name": "rtds-space-2.5",
      "unit": 2.5,
      "classWidth": "rtds-w-2.5",
      "classMfull": "rtds-m-2.5",
      "classMx": "rtds-mx-2.5",
      "classMy": "rtds-my-2.5",
      "classMtop": "rtds-mt-2.5",
      "classMright": "rtds-mr-2.5",
      "classMbottom": "rtds-mb-2.5",
      "classMleft": "rtds-ml-2.5",
      "classPfull": "rtds-p-2.5",
      "classPx": "rtds-px-2.5",
      "classPy": "rtds-py-2.5",
      "classPtop": "rtds-pt-2.5",
      "classPright": "rtds-pr-2.5",
      "classPbottom": "rtds-pb-2.5",
      "classPleft": "rtds-pl-2.5"
    },
    {
      "name": "rtds-space-3",
      "unit": 3,
      "classWidth": "rtds-w-3",
      "classMfull": "rtds-m-3",
      "classMx": "rtds-mx-3",
      "classMy": "rtds-my-3",
      "classMtop": "rtds-mt-3",
      "classMright": "rtds-mr-3",
      "classMbottom": "rtds-mb-3",
      "classMleft": "rtds-ml-3",
      "classPfull": "rtds-p-3",
      "classPx": "rtds-px-3",
      "classPy": "rtds-py-3",
      "classPtop": "rtds-pt-3",
      "classPright": "rtds-pr-3",
      "classPbottom": "rtds-pb-3",
      "classPleft": "rtds-pl-3"
    },
    {
      "name": "rtds-space-3.5",
      "unit": 3.5,
      "classWidth": "rtds-w-3.5",
      "classMfull": "rtds-m-3.5",
      "classMx": "rtds-mx-3.5",
      "classMy": "rtds-my-3.5",
      "classMtop": "rtds-mt-3.5",
      "classMright": "rtds-mr-3.5",
      "classMbottom": "rtds-mb-3.5",
      "classMleft": "rtds-ml-3.5",
      "classPfull": "rtds-p-3.5",
      "classPx": "rtds-px-3.5",
      "classPy": "rtds-py-3.5",
      "classPtop": "rtds-pt-3.5",
      "classPright": "rtds-pr-3.5",
      "classPbottom": "rtds-pb-3.5",
      "classPleft": "rtds-pl-3.5"
    },
    {
      "name": "rtds-space-4",
      "unit": 4,
      "classWidth": "rtds-w-4",
      "classMfull": "rtds-m-4",
      "classMx": "rtds-mx-4",
      "classMy": "rtds-my-4",
      "classMtop": "rtds-mt-4",
      "classMright": "rtds-mr-4",
      "classMbottom": "rtds-mb-4",
      "classMleft": "rtds-ml-4",
      "classPfull": "rtds-p-4",
      "classPx": "rtds-px-4",
      "classPy": "rtds-py-4",
      "classPtop": "rtds-pt-4",
      "classPright": "rtds-pr-4",
      "classPbottom": "rtds-pb-4",
      "classPleft": "rtds-pl-4"
    },
    {
      "name": "rtds-space-5",
      "unit": 5,
      "classWidth": "rtds-w-5",
      "classMfull": "rtds-m-5",
      "classMx": "rtds-mx-5",
      "classMy": "rtds-my-5",
      "classMtop": "rtds-mt-5",
      "classMright": "rtds-mr-5",
      "classMbottom": "rtds-mb-5",
      "classMleft": "rtds-ml-5",
      "classPfull": "rtds-p-5",
      "classPx": "rtds-px-5",
      "classPy": "rtds-py-5",
      "classPtop": "rtds-pt-5",
      "classPright": "rtds-pr-5",
      "classPbottom": "rtds-pb-5",
      "classPleft": "rtds-pl-5"
    },
    {
      "name": "rtds-space-6",
      "unit": 6,
      "classWidth": "rtds-w-6",
      "classMfull": "rtds-m-6",
      "classMx": "rtds-mx-6",
      "classMy": "rtds-my-6",
      "classMtop": "rtds-mt-6",
      "classMright": "rtds-mr-6",
      "classMbottom": "rtds-mb-6",
      "classMleft": "rtds-ml-6",
      "classPfull": "rtds-p-6",
      "classPx": "rtds-px-6",
      "classPy": "rtds-py-6",
      "classPtop": "rtds-pt-6",
      "classPright": "rtds-pr-6",
      "classPbottom": "rtds-pb-6",
      "classPleft": "rtds-pl-6"
    },
    {
      "name": "rtds-space-7",
      "unit": 7,
      "classWidth": "rtds-w-7",
      "classMfull": "rtds-m-7",
      "classMx": "rtds-mx-7",
      "classMy": "rtds-my-7",
      "classMtop": "rtds-mt-7",
      "classMright": "rtds-mr-7",
      "classMbottom": "rtds-mb-7",
      "classMleft": "rtds-ml-7",
      "classPfull": "rtds-p-7",
      "classPx": "rtds-px-7",
      "classPy": "rtds-py-7",
      "classPtop": "rtds-pt-7",
      "classPright": "rtds-pr-7",
      "classPbottom": "rtds-pb-7",
      "classPleft": "rtds-pl-7"
    },
    {
      "name": "rtds-space-8",
      "unit": 8,
      "classWidth": "rtds-w-8",
      "classMfull": "rtds-m-8",
      "classMx": "rtds-mx-8",
      "classMy": "rtds-my-8",
      "classMtop": "rtds-mt-8",
      "classMright": "rtds-mr-8",
      "classMbottom": "rtds-mb-8",
      "classMleft": "rtds-ml-8",
      "classPfull": "rtds-p-8",
      "classPx": "rtds-px-8",
      "classPy": "rtds-py-8",
      "classPtop": "rtds-pt-8",
      "classPright": "rtds-pr-8",
      "classPbottom": "rtds-pb-8",
      "classPleft": "rtds-pl-8"
    },
    {
      "name": "rtds-space-9",
      "unit": 9,
      "classWidth": "rtds-w-9",
      "classMfull": "rtds-m-9",
      "classMx": "rtds-mx-9",
      "classMy": "rtds-my-9",
      "classMtop": "rtds-mt-9",
      "classMright": "rtds-mr-9",
      "classMbottom": "rtds-mb-9",
      "classMleft": "rtds-ml-9",
      "classPfull": "rtds-p-9",
      "classPx": "rtds-px-9",
      "classPy": "rtds-py-9",
      "classPtop": "rtds-pt-9",
      "classPright": "rtds-pr-9",
      "classPbottom": "rtds-pb-9",
      "classPleft": "rtds-pl-9"
    },
    {
      "name": "rtds-space-10",
      "unit": 10,
      "classWidth": "rtds-w-10",
      "classMfull": "rtds-m-10",
      "classMx": "rtds-mx-10",
      "classMy": "rtds-my-10",
      "classMtop": "rtds-mt-10",
      "classMright": "rtds-mr-10",
      "classMbottom": "rtds-mb-10",
      "classMleft": "rtds-ml-10",
      "classPfull": "rtds-p-10",
      "classPx": "rtds-px-10",
      "classPy": "rtds-py-10",
      "classPtop": "rtds-pt-10",
      "classPright": "rtds-pr-10",
      "classPbottom": "rtds-pb-10",
      "classPleft": "rtds-pl-10"
    },
    {
      "name": "rtds-space-11",
      "unit": 11,
      "classWidth": "rtds-w-11",
      "classMfull": "rtds-m-11",
      "classMx": "rtds-mx-11",
      "classMy": "rtds-my-11",
      "classMtop": "rtds-mt-11",
      "classMright": "rtds-mr-11",
      "classMbottom": "rtds-mb-11",
      "classMleft": "rtds-ml-11",
      "classPfull": "rtds-p-11",
      "classPx": "rtds-px-11",
      "classPy": "rtds-py-11",
      "classPtop": "rtds-pt-11",
      "classPright": "rtds-pr-11",
      "classPbottom": "rtds-pb-11",
      "classPleft": "rtds-pl-11"
    },
    {
      "name": "rtds-space-12",
      "unit": 12,
      "classWidth": "rtds-w-12",
      "classMfull": "rtds-m-12",
      "classMx": "rtds-mx-12",
      "classMy": "rtds-my-12",
      "classMtop": "rtds-mt-12",
      "classMright": "rtds-mr-12",
      "classMbottom": "rtds-mb-12",
      "classMleft": "rtds-ml-12",
      "classPfull": "rtds-p-12",
      "classPx": "rtds-px-12",
      "classPy": "rtds-py-12",
      "classPtop": "rtds-pt-12",
      "classPright": "rtds-pr-12",
      "classPbottom": "rtds-pb-12",
      "classPleft": "rtds-pl-12"
    },
    {
      "name": "rtds-space-14",
      "unit": 14,
      "classWidth": "rtds-w-14",
      "classMfull": "rtds-m-14",
      "classMx": "rtds-mx-14",
      "classMy": "rtds-my-14",
      "classMtop": "rtds-mt-14",
      "classMright": "rtds-mr-14",
      "classMbottom": "rtds-mb-14",
      "classMleft": "rtds-ml-14",
      "classPfull": "rtds-p-14",
      "classPx": "rtds-px-14",
      "classPy": "rtds-py-14",
      "classPtop": "rtds-pt-14",
      "classPright": "rtds-pr-14",
      "classPbottom": "rtds-pb-14",
      "classPleft": "rtds-pl-14"
    },
    {
      "name": "rtds-space-16",
      "unit": 16,
      "classWidth": "rtds-w-16",
      "classMfull": "rtds-m-16",
      "classMx": "rtds-mx-16",
      "classMy": "rtds-my-16",
      "classMtop": "rtds-mt-16",
      "classMright": "rtds-mr-16",
      "classMbottom": "rtds-mb-16",
      "classMleft": "rtds-ml-16",
      "classPfull": "rtds-p-16",
      "classPx": "rtds-px-16",
      "classPy": "rtds-py-16",
      "classPtop": "rtds-pt-16",
      "classPright": "rtds-pr-16",
      "classPbottom": "rtds-pb-16",
      "classPleft": "rtds-pl-16"
    },
    {
      "name": "rtds-space-20",
      "unit": 20,
      "classWidth": "rtds-w-20",
      "classMfull": "rtds-m-20",
      "classMx": "rtds-mx-20",
      "classMy": "rtds-my-20",
      "classMtop": "rtds-mt-20",
      "classMright": "rtds-mr-20",
      "classMbottom": "rtds-mb-20",
      "classMleft": "rtds-ml-20",
      "classPfull": "rtds-p-20",
      "classPx": "rtds-px-20",
      "classPy": "rtds-py-20",
      "classPtop": "rtds-pt-20",
      "classPright": "rtds-pr-20",
      "classPbottom": "rtds-pb-20",
      "classPleft": "rtds-pl-20"
    },
    {
      "name": "rtds-space-24",
      "unit": 24,
      "classWidth": "rtds-w-24",
      "classMfull": "rtds-m-24",
      "classMx": "rtds-mx-24",
      "classMy": "rtds-my-24",
      "classMtop": "rtds-mt-24",
      "classMright": "rtds-mr-24",
      "classMbottom": "rtds-mb-24",
      "classMleft": "rtds-ml-24",
      "classPfull": "rtds-p-24",
      "classPx": "rtds-px-24",
      "classPy": "rtds-py-24",
      "classPtop": "rtds-pt-24",
      "classPright": "rtds-pr-24",
      "classPbottom": "rtds-pb-24",
      "classPleft": "rtds-pl-24"
    },
    {
      "name": "rtds-space-28",
      "unit": 28,
      "classWidth": "rtds-w-28",
      "classMfull": "rtds-m-28",
      "classMx": "rtds-mx-28",
      "classMy": "rtds-my-28",
      "classMtop": "rtds-mt-28",
      "classMright": "rtds-mr-28",
      "classMbottom": "rtds-mb-28",
      "classMleft": "rtds-ml-28",
      "classPfull": "rtds-p-28",
      "classPx": "rtds-px-28",
      "classPy": "rtds-py-28",
      "classPtop": "rtds-pt-28",
      "classPright": "rtds-pr-28",
      "classPbottom": "rtds-pb-28",
      "classPleft": "rtds-pl-28"
    },
    {
      "name": "rtds-space-32",
      "unit": 32,
      "classWidth": "rtds-w-32",
      "classMfull": "rtds-m-32",
      "classMx": "rtds-mx-32",
      "classMy": "rtds-my-32",
      "classMtop": "rtds-mt-32",
      "classMright": "rtds-mr-32",
      "classMbottom": "rtds-mb-32",
      "classMleft": "rtds-ml-32",
      "classPfull": "rtds-p-32",
      "classPx": "rtds-px-32",
      "classPy": "rtds-py-32",
      "classPtop": "rtds-pt-32",
      "classPright": "rtds-pr-32",
      "classPbottom": "rtds-pb-32",
      "classPleft": "rtds-pl-32"
    },
    {
      "name": "rtds-space-36",
      "unit": 36,
      "classWidth": "rtds-w-36",
      "classMfull": "rtds-m-36",
      "classMx": "rtds-mx-36",
      "classMy": "rtds-my-36",
      "classMtop": "rtds-mt-36",
      "classMright": "rtds-mr-36",
      "classMbottom": "rtds-mb-36",
      "classMleft": "rtds-ml-36",
      "classPfull": "rtds-p-36",
      "classPx": "rtds-px-36",
      "classPy": "rtds-py-36",
      "classPtop": "rtds-pt-36",
      "classPright": "rtds-pr-36",
      "classPbottom": "rtds-pb-36",
      "classPleft": "rtds-pl-36"
    },
    {
      "name": "rtds-space-40",
      "unit": 40,
      "classWidth": "rtds-w-40",
      "classMfull": "rtds-m-40",
      "classMx": "rtds-mx-40",
      "classMy": "rtds-my-40",
      "classMtop": "rtds-mt-40",
      "classMright": "rtds-mr-40",
      "classMbottom": "rtds-mb-40",
      "classMleft": "rtds-ml-40",
      "classPfull": "rtds-p-40",
      "classPx": "rtds-px-40",
      "classPy": "rtds-py-40",
      "classPtop": "rtds-pt-40",
      "classPright": "rtds-pr-40",
      "classPbottom": "rtds-pb-40",
      "classPleft": "rtds-pl-40"
    },
    {
      "name": "rtds-space-44",
      "unit": 44,
      "classWidth": "rtds-w-44",
      "classMfull": "rtds-m-44",
      "classMx": "rtds-mx-44",
      "classMy": "rtds-my-44",
      "classMtop": "rtds-mt-44",
      "classMright": "rtds-mr-44",
      "classMbottom": "rtds-mb-44",
      "classMleft": "rtds-ml-44",
      "classPfull": "rtds-p-44",
      "classPx": "rtds-px-44",
      "classPy": "rtds-py-44",
      "classPtop": "rtds-pt-44",
      "classPright": "rtds-pr-44",
      "classPbottom": "rtds-pb-44",
      "classPleft": "rtds-pl-44"
    },
    {
      "name": "rtds-space-48",
      "unit": 48,
      "classWidth": "rtds-w-48",
      "classMfull": "rtds-m-48",
      "classMx": "rtds-mx-48",
      "classMy": "rtds-my-48",
      "classMtop": "rtds-mt-48",
      "classMright": "rtds-mr-48",
      "classMbottom": "rtds-mb-48",
      "classMleft": "rtds-ml-48",
      "classPfull": "rtds-p-48",
      "classPx": "rtds-px-48",
      "classPy": "rtds-py-48",
      "classPtop": "rtds-pt-48",
      "classPright": "rtds-pr-48",
      "classPbottom": "rtds-pb-48",
      "classPleft": "rtds-pl-48"
    },
    {
      "name": "rtds-space-52",
      "unit": 52,
      "classWidth": "rtds-w-52",
      "classMfull": "rtds-m-52",
      "classMx": "rtds-mx-52",
      "classMy": "rtds-my-52",
      "classMtop": "rtds-mt-52",
      "classMright": "rtds-mr-52",
      "classMbottom": "rtds-mb-52",
      "classMleft": "rtds-ml-52",
      "classPfull": "rtds-p-52",
      "classPx": "rtds-px-52",
      "classPy": "rtds-py-52",
      "classPtop": "rtds-pt-52",
      "classPright": "rtds-pr-52",
      "classPbottom": "rtds-pb-52",
      "classPleft": "rtds-pl-52"
    },
    {
      "name": "rtds-space-56",
      "unit": 56,
      "classWidth": "rtds-w-56",
      "classMfull": "rtds-m-56",
      "classMx": "rtds-mx-56",
      "classMy": "rtds-my-56",
      "classMtop": "rtds-mt-56",
      "classMright": "rtds-mr-56",
      "classMbottom": "rtds-mb-56",
      "classMleft": "rtds-ml-56",
      "classPfull": "rtds-p-56",
      "classPx": "rtds-px-56",
      "classPy": "rtds-py-56",
      "classPtop": "rtds-pt-56",
      "classPright": "rtds-pr-56",
      "classPbottom": "rtds-pb-56",
      "classPleft": "rtds-pl-56"
    },
    {
      "name": "rtds-space-60",
      "unit": 60,
      "classWidth": "rtds-w-60",
      "classMfull": "rtds-m-60",
      "classMx": "rtds-mx-60",
      "classMy": "rtds-my-60",
      "classMtop": "rtds-mt-60",
      "classMright": "rtds-mr-60",
      "classMbottom": "rtds-mb-60",
      "classMleft": "rtds-ml-60",
      "classPfull": "rtds-p-60",
      "classPx": "rtds-px-60",
      "classPy": "rtds-py-60",
      "classPtop": "rtds-pt-60",
      "classPright": "rtds-pr-60",
      "classPbottom": "rtds-pb-60",
      "classPleft": "rtds-pl-60"
    },
    {
      "name": "rtds-space-64",
      "unit": 64,
      "classWidth": "rtds-w-64",
      "classMfull": "rtds-m-64",
      "classMx": "rtds-mx-64",
      "classMy": "rtds-my-64",
      "classMtop": "rtds-mt-64",
      "classMright": "rtds-mr-64",
      "classMbottom": "rtds-mb-64",
      "classMleft": "rtds-ml-64",
      "classPfull": "rtds-p-64",
      "classPx": "rtds-px-64",
      "classPy": "rtds-py-64",
      "classPtop": "rtds-pt-64",
      "classPright": "rtds-pr-64",
      "classPbottom": "rtds-pb-64",
      "classPleft": "rtds-pl-64"
    },
    {
      "name": "rtds-space-72",
      "unit": 72,
      "classWidth": "rtds-w-72",
      "classMfull": "rtds-m-72",
      "classMx": "rtds-mx-72",
      "classMy": "rtds-my-72",
      "classMtop": "rtds-mt-72",
      "classMright": "rtds-mr-72",
      "classMbottom": "rtds-mb-72",
      "classMleft": "rtds-ml-72",
      "classPfull": "rtds-p-72",
      "classPx": "rtds-px-72",
      "classPy": "rtds-py-72",
      "classPtop": "rtds-pt-72",
      "classPright": "rtds-pr-72",
      "classPbottom": "rtds-pb-72",
      "classPleft": "rtds-pl-72"
    },
    {
      "name": "rtds-space-80",
      "unit": 80,
      "classWidth": "rtds-w-80",
      "classMfull": "rtds-m-80",
      "classMx": "rtds-mx-80",
      "classMy": "rtds-my-80",
      "classMtop": "rtds-mt-80",
      "classMright": "rtds-mr-80",
      "classMbottom": "rtds-mb-80",
      "classMleft": "rtds-ml-80",
      "classPfull": "rtds-p-80",
      "classPx": "rtds-px-80",
      "classPy": "rtds-py-80",
      "classPtop": "rtds-pt-80",
      "classPright": "rtds-pr-80",
      "classPbottom": "rtds-pb-80",
      "classPleft": "rtds-pl-80"
    },
    {
      "name": "rtds-space-96",
      "unit": 96,
      "classWidth": "rtds-w-96",
      "classMfull": "rtds-m-96",
      "classMx": "rtds-mx-96",
      "classMy": "rtds-my-96",
      "classMtop": "rtds-mt-96",
      "classMright": "rtds-mr-96",
      "classMbottom": "rtds-mb-96",
      "classMleft": "rtds-ml-96",
      "classPfull": "rtds-p-96",
      "classPx": "rtds-px-96",
      "classPy": "rtds-py-96",
      "classPtop": "rtds-pt-96",
      "classPright": "rtds-pr-96",
      "classPbottom": "rtds-pb-96",
      "classPleft": "rtds-pl-96"
    }
  ]
}

Handle: @spacing
Preview:
- With layout
- Component only
Filesystem Path: components/01-design-system/primitives/spacing/spacing.njk

Spaziatura

Sistema di spaziatura per margini, padding, larghezze fisse e gap. Basato sulla scala Tailwind con unità base di 4px (0.25rem).

Le classi usano il prefisso rtds- (es. rtds-p-4, rtds-mt-6).

Formato classi

Per ogni valore numerico N sono disponibili:

Tipo	Classi
Padding	`rtds-p-N` `rtds-px-N` `rtds-py-N` `rtds-pt-N` `rtds-pr-N` `rtds-pb-N` `rtds-pl-N`
Margin	`rtds-m-N` `rtds-mx-N` `rtds-my-N` `rtds-mt-N` `rtds-mr-N` `rtds-mb-N` `rtds-ml-N`
Width	`rtds-w-N`
Gap	`rtds-gap-N` `rtds-gap-x-N` `rtds-gap-y-N`
Space-between	`rtds-space-x-N` `rtds-space-y-N`

Tabella di conversione

Unità (N)	px	rem	Utilizzo tipico
0	0px	0	Reset spaziatura
0.5	2px	0.125rem	Micro-spaziatura, divisori
1	4px	0.25rem	Gap icona-testo
1.5	6px	0.375rem	Padding chip piccoli
2	8px	0.5rem	Padding interno compatto
2.5	10px	0.625rem
3	12px	0.75rem	Padding bottoni small
3.5	14px	0.875rem
4	16px	1rem	Padding standard — pulsanti, input
5	20px	1.25rem	Padding medio
6	24px	1.5rem	Gap tra elementi
7	28px	1.75rem
8	32px	2rem	Spaziatura sezioni piccole
9	36px	2.25rem
10	40px	2.5rem
11	44px	2.75rem
12	48px	3rem	Padding sezione
14	56px	3.5rem
16	64px	4rem	Spaziatura sezioni medie
20	80px	5rem	Spaziatura sezioni grandi
24	96px	6rem
28	112px	7rem
32	128px	8rem
36	144px	9rem
40	160px	10rem
44	176px	11rem
48	192px	12rem
52	208px	13rem
56	224px	14rem
60	240px	15rem
64	256px	16rem
72	288px	18rem
80	320px	20rem
96	384px	24rem	Altezze fisse grandi

Esempi

<!-- Padding standard pulsante -->
<button class="rtds-px-4 rtds-py-2">Azione</button>

<!-- Spaziatura verticale tra sezioni -->
<section class="rtds-py-8 md:rtds-py-12">...</section>

<!-- Gap griglia card -->
<div class="rtds-grid rtds-grid-cols-2 rtds-gap-4 md:rtds-gap-6">...</div>

<!-- Margine negativo per overlap -->
<div class="-rtds-mt-4">...</div>

Responsive

Le classi di spaziatura supportano prefissi responsive: sm:, md:, lg:, xl:

<div class="rtds-p-4 md:rtds-p-6 lg:rtds-p-8">...</div>

CSS Custom Properties

Le spaziature sono definite come variabili CSS in public/css/custom-properties.css. Il sistema usa --spacing-base (4px) come unità moltiplicativa.

Variabile	Valore	px
`--spacing-base`	`0.25rem`	4px — unità base configurabile
`--spacing-0`	`calc(base * 0)`	0px
`--spacing-0-5`	`calc(base * 0.5)`	2px
`--spacing-1`	`calc(base * 1)`	4px
`--spacing-1-5`	`calc(base * 1.5)`	6px
`--spacing-2`	`calc(base * 2)`	8px
`--spacing-2-5`	`calc(base * 2.5)`	10px
`--spacing-3`	`calc(base * 3)`	12px
`--spacing-3-5`	`calc(base * 3.5)`	14px
`--spacing-4`	`calc(base * 4)`	16px
`--spacing-5`	`calc(base * 5)`	20px
`--spacing-6`	`calc(base * 6)`	24px
`--spacing-7`	`calc(base * 7)`	28px
`--spacing-8`	`calc(base * 8)`	32px
`--spacing-9`	`calc(base * 9)`	36px
`--spacing-10`	`calc(base * 10)`	40px
`--spacing-11`	`calc(base * 11)`	44px
`--spacing-12`	`calc(base * 12)`	48px
`--spacing-14`	`calc(base * 14)`	56px
`--spacing-16`	`calc(base * 16)`	64px
`--spacing-20`	`calc(base * 20)`	80px
`--spacing-24`	`calc(base * 24)`	96px
`--spacing-28`	`calc(base * 28)`	112px
`--spacing-32`	`calc(base * 32)`	128px
`--spacing-36`	`calc(base * 36)`	144px
`--spacing-40`	`calc(base * 40)`	160px
`--spacing-44`	`calc(base * 44)`	176px
`--spacing-48`	`calc(base * 48)`	192px
`--spacing-52`	`calc(base * 52)`	208px
`--spacing-56`	`calc(base * 56)`	224px
`--spacing-60`	`calc(base * 60)`	240px
`--spacing-64`	`calc(base * 64)`	256px
`--spacing-72`	`calc(base * 72)`	288px
`--spacing-80`	`calc(base * 80)`	320px
`--spacing-96`	`calc(base * 96)`	384px

Sovrascrivere --spacing-base nel CMS ospitante scala proporzionalmente tutte le spaziature del sistema.