{
  "name": "utilities/split",
  "title": "Split",
  "description": "Use the `ed-split` class to distribute two or more items evenly across available space, either in a row or a column.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/split/",
  "sections": [
    {
      "heading": "Split",
      "markdown": "Use the `ed-split` class to distribute two or more items evenly across available space, either in a row or a column.\n\n```html\n<div class=\"ed-split\">\n  <div></div>\n  <div></div>\n</div>\n```"
    },
    {
      "heading": "Examples",
      "markdown": "Splits are especially helpful for navigation, header, and footer layouts.\n\n```html\n<div class=\"ed-flank\">\n  <div class=\"ed-split:column\">\n    <div class=\"ed-stack\">\n      <ed-button appearance=\"plain\">\n        <ed-icon name=\"home\" label=\"Home\"></ed-icon>\n      </ed-button>\n      <ed-button appearance=\"plain\">\n        <ed-icon name=\"cal\" label=\"Calendar\"></ed-icon>\n      </ed-button>\n      <ed-button appearance=\"plain\">\n        <ed-icon name=\"mail\" label=\"Mail\"></ed-icon>\n      </ed-button>\n    </div>\n    <div class=\"ed-stack\">\n      <ed-divider></ed-divider>\n      <ed-button appearance=\"plain\">\n        <ed-icon name=\"logout\" label=\"Sign Out\"></ed-icon>\n      </ed-button>\n    </div>\n  </div>\n  <div class=\"placeholder\"></div>\n</div>\n\n<style>\n  .placeholder {\n    min-block-size: 300px;\n    background-color: var(--ed-color-white);\n    border: dashed var(--ed-border-width-1) var(--ed-color-neutral-border-normal);\n    border-radius: var(--ed-border-radius-3x);\n  }\n</style>\n```\n\n```html\n<div class=\"ed-stack\">\n  <div class=\"ed-split\">\n    <ed-icon name=\"Home\" label=\"eurodata-ui\" class=\"ed-font-size-xl\"></ed-icon>\n    <div class=\"ed-cluster\">\n      <ed-button>Sign Up</ed-button>\n      <ed-button appearance=\"outlined\">Log In</ed-button>\n    </div>\n  </div>\n  <div class=\"placeholder\"></div>\n</div>\n\n<style>\n  .placeholder {\n    min-block-size: 300px;\n    background-color: var(--ed-color-white);\n    border: dashed var(--ed-border-width-1) var(--ed-color-neutral-border-normal);\n    border-radius: var(--ed-border-radius-3x);\n  }\n</style>\n```"
    },
    {
      "heading": "Direction",
      "markdown": "Items can be split across a row or a column by appending `:row` or `:column` to the `ed-split` class.\n\n```html\n<div class=\"ed-flank ed-align-items-start\" style=\"block-size: 16rem;\">\n  <div class=\"ed-split:column\">\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-split:row\">\n    <div></div>\n    <div></div>\n  </div>\n</div>\n```"
    },
    {
      "heading": "Align Items",
      "markdown": "By default, items are centered on the cross axis of the `ed-split` 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-split` to specify how items are aligned:\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\nThese modifiers specify how items are aligned in the block direction for `ed-split:row` and in the inline direction for `ed-split:column`.\n\n```html\n<div class=\"ed-stack\">\n  <div class=\"ed-split ed-align-items-start\" style=\"height: 8rem;\">\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-split ed-align-items-end\" style=\"height: 8rem;\">\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-split ed-align-items-center\" style=\"height: 8rem;\">\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-split ed-align-items-stretch\" style=\"height: 8rem;\">\n    <div></div>\n    <div></div>\n  </div>\n</div>\n```"
    },
    {
      "heading": "Gap",
      "markdown": "A split's gap determines how close items can be before they wrap. By default, the gap between split 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-split` to specify the gap between items.\n\n```html\n<div class=\"ed-stack\">\n  <div class=\"ed-split ed-gap-1\">\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-split ed-gap-12\">\n    <div></div>\n    <div></div>\n  </div>\n</div>\n```"
    }
  ]
}