{
  "name": "utilities/frame",
  "title": "Frame",
  "description": "Use the `ed-frame` class to create a responsive container with consistent proportions to enclose content.",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/utilities/frame/",
  "sections": [
    {
      "heading": "Frame",
      "markdown": "Use the `ed-frame` class to create a responsive container with consistent proportions to enclose content.\n\n```html\n<div class=\"ed-frame\" style=\"max-inline-size: 20rem;\">\n  <div></div>\n</div>\n```"
    },
    {
      "heading": "Examples",
      "markdown": "Frames are well-suited for images and image placeholders.\n\n```html\n<div class=\"ed-flank\" style=\"--ed-flank-size: 8rem;\">\n  <div class=\"ed-frame ed-border-radius-2x\">\n    <img src=\"https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20\" alt=\"\" />\n  </div>\n  <div class=\"ed-flank:end\" style=\"--ed-flank-content-percentage: 70%\">\n    <div class=\"ed-stack ed-gap-2\">\n      <h3>The Lord of the Rings: The Fellowship of the Ring</h3>\n      <span>J.R.R. Tolkien</span>\n    </div>\n    <ed-button id=\"options-menu\" appearance=\"plain\">\n      <ed-icon name=\"more\" label=\"Options\"></ed-icon>\n    </ed-button>\n    <ed-tooltip for=\"options-menu\">Options</ed-tooltip>\n  </div>\n</div>\n```\n\n```html\n<div class=\"ed-grid\" style=\"--ed-grid-min-column-size: 25ch;\">\n  <ed-card>\n    <div class=\"ed-frame:landscape\" slot=\"header\">\n      <img src=\"https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20\" alt=\"Grey and white tabby kitten\" />\n    </div>\n    <div class=\"ed-stack ed-gap-2\">\n      <h3 class=\"ed-heading-m\">White-socks</h3>\n      <span class=\"ed-body-s\">Kitten &bull; Male</span>\n      <div class=\"ed-flank:end ed-gap-2\">\n        <ed-button density=\"compact\" appearance=\"filled\" variant=\"brand\">Adopt this pet</ed-button>\n        <ed-button id=\"fav-whitesocks\" appearance=\"plain\" density=\"compact\">\n          <ed-icon name=\"heart\" variant=\"regular\" label=\"Favorite\"></ed-icon>\n        </ed-button>\n        <ed-tooltip for=\"fav-whitesocks\">Favorite</ed-tooltip>\n      </div>\n    </div>\n  </ed-card>\n  <ed-card>\n    <div class=\"ed-frame:landscape\" slot=\"header\">\n      <div class=\"ed-stack ed-align-items-center ed-gap-2 ed-caption-s\">\n        <ed-icon name=\"zzz\"></ed-icon>\n        <span>Photo coming soon</span>\n      </div>\n    </div>\n    <div class=\"ed-stack ed-gap-2\">\n      <h3 class=\"ed-heading-m\">Bumpkin</h3>\n      <span class=\"ed-body-s\">Adult &bull; Male</span>\n      <div class=\"ed-flank:end ed-gap-2\">\n        <ed-button density=\"compact\" appearance=\"filled\" variant=\"brand\">Adopt this pet</ed-button>\n        <ed-button id=\"fav-bumpkin\" appearance=\"plain\" density=\"compact\">\n          <ed-icon name=\"heart\" variant=\"regular\" label=\"Favorite\"></ed-icon>\n        </ed-button>\n        <ed-tooltip for=\"fav-bumpkin\">Favorite</ed-tooltip>\n      </div>\n    </div>\n  </ed-card>\n  <ed-card>\n    <div class=\"ed-frame:landscape\" slot=\"header\">\n      <img src=\"https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20\" alt=\"Diluted calico kitten\" />\n    </div>\n    <div class=\"ed-stack ed-gap-2\">\n      <h3 class=\"ed-heading-m\">Swish-tail</h3>\n      <span class=\"ed-body-s\">Kitten &bull; Female</span>\n      <div class=\"ed-flank:end ed-gap-2\">\n        <ed-button density=\"compact\" appearance=\"filled\" variant=\"brand\">Adopt this pet</ed-button>\n        <ed-button id=\"fav-swishtail\" appearance=\"plain\" density=\"compact\">\n          <ed-icon name=\"heart\" variant=\"regular\" label=\"Favorite\"></ed-icon>\n        </ed-button>\n        <ed-tooltip for=\"fav-swishtail\">Favorite</ed-tooltip>\n      </div>\n    </div>\n  </ed-card>\n  <ed-card>\n    <div class=\"ed-frame:landscape\" slot=\"header\">\n      <img src=\"https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20\" alt=\"Short-haired tabby cat\" />\n    </div>\n    <div class=\"ed-stack ed-gap-2\">\n      <h3 class=\"ed-heading-m\">Sharp-ears</h3>\n      <span class=\"ed-body-s\">Adult &bull; Female</span>\n      <div class=\"ed-flank:end ed-gap-2\">\n        <ed-button density=\"compact\" appearance=\"filled\" variant=\"brand\">Adopt this pet</ed-button>\n        <ed-button id=\"fav-sharpears\" appearance=\"plain\" density=\"compact\">\n          <ed-icon name=\"heart\" variant=\"regular\" label=\"Favorite\"></ed-icon>\n        </ed-button>\n        <ed-tooltip for=\"fav-sharpears\">Favorite</ed-tooltip>\n      </div>\n    </div>\n  </ed-card>\n</div>\n```"
    },
    {
      "heading": "Aspect Ratio",
      "markdown": "Frames have a square aspect ratio by default. You can append `:square` (1 / 1), `:landscape` (16 / 9), or `:portrait` (9 / 16) to the `ed-frame` class in your markup to specify an aspect ratio for the frame. Alternatively, you can define the `aspect-ratio` property to set a custom proportion.\n\n```html\n<div class=\"ed-grid\">\n  <div class=\"ed-frame:landscape\">\n    <div></div>\n  </div>\n  <div class=\"ed-frame:portrait\">\n    <div></div>\n  </div>\n  <div class=\"ed-frame\" style=\"aspect-ratio: 4 / 3;\">\n    <div></div>\n  </div>\n</div>\n```"
    },
    {
      "heading": "Border Radius",
      "markdown": "Frames have a square border radius by default. You can add any of the following [`ed-border-radius-*`](https://test-apps.eurodata.de/a/eurodata-ui/docs/theming/borders#radius-classes) classes to an element with `ed-frame` to specify the border radius:\n\n-   `ed-border-radius-1x`\n-   `ed-border-radius-2x`\n-   `ed-border-radius-3x`\n-   `ed-border-radius-pill`\n-   `ed-border-radius-circle`\n-   `ed-border-radius-square`\n\nAlternatively, you can define the `border-radius` property to set custom rounding.\n\n```html\n<div class=\"ed-grid\">\n  <div class=\"ed-frame ed-border-radius-3x\">\n    <div></div>\n  </div>\n  <div class=\"ed-frame ed-border-radius-circle\">\n    <div></div>\n  </div>\n  <div class=\"ed-frame\" style=\"border-radius: 50% 0%;\">\n    <div></div>\n  </div>\n</div>\n```"
    }
  ]
}