{
  "name": "utilities/cluster",
  "title": "Cluster",
  "description": "Use the `ed-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/cluster/",
  "sections": [
    {
      "heading": "Cluster",
      "markdown": "Use the `ed-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.\n\n```html\n<div class=\"ed-cluster\">\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n  <div></div>\n</div>\n\n<!-- We'll vary the div sizes to show the flow of cluster elements -->\n<style>\n  .ed-cluster div:empty:nth-child(3n) {\n    min-inline-size: 6rem;\n  }\n  .ed-cluster div:empty:nth-child(3n + 2) {\n    min-inline-size: 8rem;\n  }\n</style>\n```"
    },
    {
      "heading": "Examples",
      "markdown": "Clusters are great for inline lists and aligning items of varying sizes.\n\n```html\n<div class=\"ed-cluster\">\n  <ed-icon name=\"home\"></ed-icon>\n  <a href=\"#\">Components</a>\n  <a href=\"#\">Layout</a>\n  <a href=\"#\">Patterns</a>\n  <a href=\"#\">Theming</a>\n</div>\n```\n\n```html\n<div class=\"ed-stack\">\n  <h3 class=\"ed-heading-2xl\">Withywindle Pub and Eatery</h3>\n  <div class=\"ed-cluster ed-gap-2\">\n    <ed-rating value=\"4.6\" read-only></ed-rating>\n    <strong>4.6</strong>\n    <span>(419 reviews)</span>\n  </div>\n  <div class=\"ed-cluster ed-gap-2\">\n    <div class=\"ed-cluster ed-gap-1\">\n      <ed-icon name=\"dollar\" style=\"color: var(--ed-color-success-100);\"></ed-icon>\n      <ed-icon name=\"dollar\" style=\"color: var(--ed-color-success-100);\"></ed-icon>\n      <ed-icon name=\"dollar\" style=\"color: var(--ed-color-success-100);\"></ed-icon>\n    </div>\n    <span class=\"ed-caption-s\">&bull;</span>\n    <ed-badge size=\"small\">Comfort Food</ed-badge>\n    <ed-badge size=\"small\">Gastropub</ed-badge>\n    <ed-badge size=\"small\">Cocktail Bar</ed-badge>\n    <ed-badge size=\"small\">Vegetarian</ed-badge>\n    <ed-badge size=\"small\">Gluten Free</ed-badge>\n  </div>\n</div>\n```"
    },
    {
      "heading": "Align Items",
      "markdown": "By default, items are centered in the block direction of the `ed-cluster` 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-cluster` to specify how items are aligned in the block 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-stack\">\n  <div class=\"ed-cluster ed-align-items-start\" style=\"min-height: 8rem;\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-cluster ed-align-items-end\" style=\"min-height: 8rem;\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-cluster ed-align-items-center\" style=\"min-height: 8rem;\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-cluster ed-align-items-stretch\" style=\"min-height: 8rem;\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n```"
    },
    {
      "heading": "Gap",
      "markdown": "By default, the gap between cluster 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-cluster` to specify the gap between items.\n\n```html\n<div class=\"ed-stack\">\n  <div class=\"ed-cluster ed-gap-1\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n  <div class=\"ed-cluster ed-gap-8\">\n    <div></div>\n    <div></div>\n    <div></div>\n  </div>\n</div>\n```"
    }
  ]
}