@umbraco-ui/uui-box/custom-elements.json

A box web component for grouping elements

{
  "version": "experimental",
  "tags": [
    {
      "name": "uui-box",
      "path": "./lib/uui-box.element.ts",
      "description": "A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.",
      "attributes": [
        {
          "name": "headline",
          "description": "Headline for this box, can also be set via the `headline` slot.",
          "type": "string | null",
          "default": "\"null\""
        },
        {
          "name": "headline-variant",
          "description": "Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)",
          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
          "default": "\"\\\"h5\\\"\""
        }
      ],
      "properties": [
        {
          "name": "headline",
          "attribute": "headline",
          "description": "Headline for this box, can also be set via the `headline` slot.",
          "type": "string | null",
          "default": "\"null\""
        },
        {
          "name": "headlineVariant",
          "attribute": "headline-variant",
          "description": "Changes the headline variant for accessibility for this box.\nNotice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)",
          "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
          "default": "\"\\\"h5\\\"\""
        },
        {
          "name": "styles",
          "type": "CSSResult[]",
          "default": "[\"UUITextStyles\",null]"
        }
      ],
      "slots": [
        {
          "name": "headline",
          "description": "headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling."
        },
        {
          "name": "header",
          "description": "header area, use this for things that are not the headline but are located in the header."
        },
        {
          "name": "header-actions",
          "description": "right-side of the box header, use this to append some actions that are general for the topic of this box."
        },
        {
          "name": "",
          "description": "area for the content of the box"
        }
      ],
      "cssProperties": [
        {
          "name": "--uui-box-header-padding",
          "description": "overwrite the header padding"
        },
        {
          "name": "--uui-box-default-padding",
          "description": "overwrite the box padding"
        },
        {
          "name": "--uui-box-border-width",
          "description": "overwrite the box border, default is 0"
        },
        {
          "name": "--uui-box-box-shadow",
          "description": "overwrite the box shadow, default is var(--uui-shadow-depth-1)"
        },
        {
          "name": "--uui-box-border-radius",
          "description": "overwrite the box border-radius, default is var(--uui-border-radius)"
        },
        {
          "name": "--uui-box-border-color",
          "description": "overwrites the box border colorm default is var(--uui-color-divider-standalone)"
        }
      ]
    }
  ]
}