{
  "name": "utilities/padding",
  "title": "Padding",
  "description": "Use eurodata-ui's `ed-p` classes to add padding to elements",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/padding/",
  "sections": [
    {
      "heading": "Padding",
      "markdown": "Use eurodata-ui's `ed-p` classes to add padding to elements\n\neurodata-ui spacing utilities:\n\n-   Are token-based (`--ed-space-*`)\n-   Use logical properties for automatic RTL support\n-   Provide axis-based helpers (`px`, `py`)\n-   Support individual logical sides (`pt`, `pb`, `pl`, `pr`)\n-   Include reset (`0`) utilities\n\n* * *"
    },
    {
      "heading": "Reset Padding (0)",
      "markdown": "Use `0` utilities to explicitly remove padding.\n\n| Class Name | CSS Property |\n| --- | --- |\n| `ed-p-0` | `padding: 0` |\n| `ed-px-0` | `padding-inline: 0` |\n| `ed-py-0` | `padding-block: 0` |\n| `ed-pt-0` | `padding-block-start: 0` |\n| `ed-pb-0` | `padding-block-end: 0` |\n| `ed-pl-0` | `padding-inline-start: 0` |\n| `ed-pr-0` | `padding-inline-end: 0` |"
    },
    {
      "heading": "Padding (All Sides)",
      "markdown": "Applies padding on all sides using spacing tokens.\n\n| Class Name | padding Value |\n| --- | --- |\n| `ed-p-1` | `--ed-space-1` (4px) |\n| `ed-p-2` | `--ed-space-2` (8px) |\n| `ed-p-3` | `--ed-space-3` (12px) |\n| `ed-p-4` | `--ed-space-4` (16px) |\n| `ed-p-5` | `--ed-space-5` (20px) |\n| `ed-p-6` | `--ed-space-6` (24px) |\n| `ed-p-7` | `--ed-space-7` (28px) |\n| `ed-p-8` | `--ed-space-8` (32px) |\n| `ed-p-9` | `--ed-space-9` (36px) |\n| `ed-p-10` | `--ed-space-10` (40px) |\n| `ed-p-11` | `--ed-space-11` (44px) |\n| `ed-p-12` | `--ed-space-12` (48px) |\n| `ed-p-13` | `--ed-space-13` (52px) |\n| `ed-p-14` | `--ed-space-14` (56px) |\n| `ed-p-15` | `--ed-space-15` (60px) |\n| `ed-p-16` | `--ed-space-16` (64px) |"
    },
    {
      "heading": "padding-inline",
      "markdown": "Applies spacing along the **inline axis** (text direction).\n\n-   LTR → left & right\n-   RTL → right & left (automatically flipped)\n\nUse `ed-px-*` for horizontal spacing.\n\n| Class Name | padding-inline Value |\n| --- | --- |\n| `ed-px-1` | `--ed-space-1` (4px) |\n| `ed-px-2` | `--ed-space-2` (8px) |\n| `ed-px-3` | `--ed-space-3` (12px) |\n| `ed-px-4` | `--ed-space-4` (16px) |\n| `ed-px-5` | `--ed-space-5` (20px) |\n| `ed-px-6` | `--ed-space-6` (24px) |\n| `ed-px-7` | `--ed-space-7` (28px) |\n| `ed-px-8` | `--ed-space-8` (32px) |\n| `ed-px-9` | `--ed-space-9` (36px) |\n| `ed-px-10` | `--ed-space-10` (40px) |\n| `ed-px-11` | `--ed-space-11` (44px) |\n| `ed-px-12` | `--ed-space-12` (48px) |\n| `ed-px-13` | `--ed-space-13` (52px) |\n| `ed-px-14` | `--ed-space-14` (56px) |\n| `ed-px-15` | `--ed-space-15` (60px) |\n| `ed-px-16` | `--ed-space-16` (64px) |"
    },
    {
      "heading": "padding-block",
      "markdown": "Applies spacing along the **block axis** (stacking direction).\n\nIn standard horizontal writing mode:\n\n-   `padding-block-start` → top\n-   `padding-block-end` → bottom\n\nUse `ed-py-*` for vertical spacing.\n\n| Class Name | padding-block Value |\n| --- | --- |\n| `ed-py-1` | `--ed-space-1` (4px) |\n| `ed-py-2` | `--ed-space-2` (8px) |\n| `ed-py-3` | `--ed-space-3` (12px) |\n| `ed-py-4` | `--ed-space-4` (16px) |\n| `ed-py-5` | `--ed-space-5` (20px) |\n| `ed-py-6` | `--ed-space-6` (24px) |\n| `ed-py-7` | `--ed-space-7` (28px) |\n| `ed-py-8` | `--ed-space-8` (32px) |\n| `ed-py-9` | `--ed-space-9` (36px) |\n| `ed-py-10` | `--ed-space-10` (40px) |\n| `ed-py-11` | `--ed-space-11` (44px) |\n| `ed-py-12` | `--ed-space-12` (48px) |\n| `ed-py-13` | `--ed-space-13` (52px) |\n| `ed-py-14` | `--ed-space-14` (56px) |\n| `ed-py-15` | `--ed-space-15` (60px) |\n| `ed-py-16` | `--ed-space-16` (64px) |"
    },
    {
      "heading": "Individual Sides",
      "markdown": "Apply padding to a single logical side.\n\n### padding-block-start (top)\n\nUse `ed-pt-*` for block-start spacing.\n\n| Class Name | padding-block-start Value |\n| --- | --- |\n| `ed-pt-1` | `--ed-space-1` (4px) |\n| `ed-pt-2` | `--ed-space-2` (8px) |\n| `ed-pt-3` | `--ed-space-3` (12px) |\n| `ed-pt-4` | `--ed-space-4` (16px) |\n| `ed-pt-5` | `--ed-space-5` (20px) |\n| `ed-pt-6` | `--ed-space-6` (24px) |\n| `ed-pt-7` | `--ed-space-7` (28px) |\n| `ed-pt-8` | `--ed-space-8` (32px) |\n| `ed-pt-9` | `--ed-space-9` (36px) |\n| `ed-pt-10` | `--ed-space-10` (40px) |\n| `ed-pt-11` | `--ed-space-11` (44px) |\n| `ed-pt-12` | `--ed-space-12` (48px) |\n| `ed-pt-13` | `--ed-space-13` (52px) |\n| `ed-pt-14` | `--ed-space-14` (56px) |\n| `ed-pt-15` | `--ed-space-15` (60px) |\n| `ed-pt-16` | `--ed-space-16` (64px) |\n\n### padding-block-end (bottom)\n\nUse `ed-pb-*` for block-end spacing.\n\n| Class Name | padding-block-end Value |\n| --- | --- |\n| `ed-pb-1` | `--ed-space-1` (4px) |\n| `ed-pb-2` | `--ed-space-2` (8px) |\n| `ed-pb-3` | `--ed-space-3` (12px) |\n| `ed-pb-4` | `--ed-space-4` (16px) |\n| `ed-pb-5` | `--ed-space-5` (20px) |\n| `ed-pb-6` | `--ed-space-6` (24px) |\n| `ed-pb-7` | `--ed-space-7` (28px) |\n| `ed-pb-8` | `--ed-space-8` (32px) |\n| `ed-pb-9` | `--ed-space-9` (36px) |\n| `ed-pb-10` | `--ed-space-10` (40px) |\n| `ed-pb-11` | `--ed-space-11` (44px) |\n| `ed-pb-12` | `--ed-space-12` (48px) |\n| `ed-pb-13` | `--ed-space-13` (52px) |\n| `ed-pb-14` | `--ed-space-14` (56px) |\n| `ed-pb-15` | `--ed-space-15` (60px) |\n| `ed-pb-16` | `--ed-space-16` (64px) |\n\n### padding-inline-start (left)\n\nUse `ed-pl-*` for inline-start spacing.\n\n| Class Name | padding-inline-start Value |\n| --- | --- |\n| `ed-pl-1` | `--ed-space-1` (4px) |\n| `ed-pl-2` | `--ed-space-2` (8px) |\n| `ed-pl-3` | `--ed-space-3` (12px) |\n| `ed-pl-4` | `--ed-space-4` (16px) |\n| `ed-pl-5` | `--ed-space-5` (20px) |\n| `ed-pl-6` | `--ed-space-6` (24px) |\n| `ed-pl-7` | `--ed-space-7` (28px) |\n| `ed-pl-8` | `--ed-space-8` (32px) |\n| `ed-pl-9` | `--ed-space-9` (36px) |\n| `ed-pl-10` | `--ed-space-10` (40px) |\n| `ed-pl-11` | `--ed-space-11` (44px) |\n| `ed-pl-12` | `--ed-space-12` (48px) |\n| `ed-pl-13` | `--ed-space-13` (52px) |\n| `ed-pl-14` | `--ed-space-14` (56px) |\n| `ed-pl-15` | `--ed-space-15` (60px) |\n| `ed-pl-16` | `--ed-space-16` (64px) |\n\n### padding-inline-end (right)\n\nUse `ed-pr-*` for inline-end spacing.\n\n| Class Name | padding-inline-end Value |\n| --- | --- |\n| `ed-pr-1` | `--ed-space-1` (4px) |\n| `ed-pr-2` | `--ed-space-2` (8px) |\n| `ed-pr-3` | `--ed-space-3` (12px) |\n| `ed-pr-4` | `--ed-space-4` (16px) |\n| `ed-pr-5` | `--ed-space-5` (20px) |\n| `ed-pr-6` | `--ed-space-6` (24px) |\n| `ed-pr-7` | `--ed-space-7` (28px) |\n| `ed-pr-8` | `--ed-space-8` (32px) |\n| `ed-pr-9` | `--ed-space-9` (36px) |\n| `ed-pr-10` | `--ed-space-10` (40px) |\n| `ed-pr-11` | `--ed-space-11` (44px) |\n| `ed-pr-12` | `--ed-space-12` (48px) |\n| `ed-pr-13` | `--ed-space-13` (52px) |\n| `ed-pr-14` | `--ed-space-14` (56px) |\n| `ed-pr-15` | `--ed-space-15` (60px) |\n| `ed-pr-16` | `--ed-space-16` (64px) |"
    }
  ]
}