{
  "name": "utilities/stack",
  "title": "Stack",
  "description": "Use `ed-stack` to arrange elements in the block direction with even spacing.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/stack/",
  "sections": [
    {
      "heading": "Stack",
      "markdown": "Use `ed-stack` to arrange elements in the block direction with even spacing.\n\n```html\n<div class=\"ed-stack\">\n  <div></div>\n  <div></div>\n  <div></div>\n</div>\n```"
    },
    {
      "heading": "Examples",
      "markdown": "Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.\n\n```html\n<div class=\"ed-stack\">\n  <ed-input label=\"Email\">\n    <ed-icon slot=\"start\" name=\"mail\" variant=\"regular\"></ed-icon>\n  </ed-input>\n  <ed-input label=\"Password\" type=\"password\">\n    <ed-icon slot=\"start\" name=\"lock\" variant=\"regular\"></ed-icon>\n  </ed-input>\n  <ed-checkbox>Remember me on this device</ed-checkbox>\n  <ed-button>Log In</ed-button>\n</div>\n```\n\n```html\n<div class=\"ed-stack ed-gap-8\">\n  <h3>Aragorn's Squash</h3>\n  <p>\n    Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight\n    rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa\n    sun's slaying most handling.\n  </p>\n  <p>\n    Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest\n    draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.\n  </p>\n</div>\n```"
    },
    {
      "heading": "Align Items",
      "markdown": "By default, items stretch to fill the inline size of the `ed-stack` container. You can add any of the following [`ed-align-items-*`](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/align-items) classes to an element with `ed-stack` to specify how items are aligned in the inline direction:\n\n-   `ed-align-items-start`\n-   `ed-align-items-end`\n-   `ed-align-items-center`\n-   `ed-align-items-stretch`\n-   `ed-align-items-baseline`\n\n```html\n<div class=\"ed-grid\">\n  <div class=\"ed-stack ed-align-items-start\">\n    <div style=\"min-inline-size: 4rem;\"></div>\n    <div style=\"min-inline-size: 8rem;\"></div>\n    <div style=\"min-inline-size: 6rem;\"></div>\n  </div>\n  <div class=\"ed-stack ed-align-items-center\">\n    <div style=\"min-inline-size: 4rem;\"></div>\n    <div style=\"min-inline-size: 8rem;\"></div>\n    <div style=\"min-inline-size: 6rem;\"></div>\n  </div>\n  <div class=\"ed-stack ed-align-items-end\">\n    <div style=\"min-inline-size: 4rem;\"></div>\n    <div style=\"min-inline-size: 8rem;\"></div>\n    <div style=\"min-inline-size: 6rem;\"></div>\n  </div>\n</div>\n```"
    },
    {
      "heading": "Gap",
      "markdown": "By default, the gap between stack items uses `--ed-space-4` from your theme. Add any [`ed-gap-N`](https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/gap) class (N from 0 to 16) to an element with `ed-stack` to specify the gap between items.\n\n```html\n<div class=\"ed-grid\">\n  <div class=\"ed-stack ed-gap-1\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-stack ed-gap-8\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n```"
    }
  ]
}