{
  "id": "uilib/components/section",
  "name": "Section",
  "description": "The Section component is a visual helper.",
  "group": "components",
  "slug": "/uilib/components/section/",
  "props": [
    {
      "name": "variant",
      "doc": "Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "breakout",
      "doc": "Use `true` to enable a fullscreen breakout look. Supports also media query breakpoints like `{ small: boolean }`. Defaults to `true`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "outset",
      "doc": "Define if the Card should break out negatively on larger screens. You cannot use `breakout` and `outset` together. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "outline",
      "doc": "Define a custom border color. If `true` is given, `color-black-8` is used. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-8' }`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "outlineWidth",
      "doc": "Define a custom border width. Defaults to `var(--card-outline-width)`. Supports also media query breakpoints like `{ small: '2px' }`.",
      "type": "string | number",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "roundedCorner",
      "doc": "Use `true` to enable rounded corners (border-radius). Supports also media query breakpoints like `{ small: boolean }`. Defaults to `false`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "backgroundColor",
      "doc": "Define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'white' }`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "dropShadow",
      "doc": "Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "textColor",
      "doc": "Define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like `{ small: 'black-80' }`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "innerSpace",
      "doc": "Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "innerRef",
      "doc": "By providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.",
      "type": "React.RefObject",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "info",
      "doc": "Neutral, informational."
    },
    {
      "name": "error",
      "doc": "Indicates an erroneous state."
    },
    {
      "name": "warning",
      "doc": "Draws attention to a potential problem that may or may not require an action on the user's part."
    },
    {
      "name": "success",
      "doc": "Indicates a successful state."
    },
    {
      "name": "white",
      "doc": "uses `--color-white`."
    },
    {
      "name": "divider",
      "doc": "uses `--color-white` as background with a border-line on top and bottom."
    },
    {
      "name": "transparent",
      "doc": "CSS transparent. Used in situations where a Section is of interest, but without a color as a basis."
    },
    {
      "name": "mint-green-12",
      "doc": "<em>(default)</em> uses `--color-mint-green-12`."
    },
    {
      "name": "mint-green",
      "doc": "uses `--color-mint-green`."
    },
    {
      "name": "lavender",
      "doc": "uses `--color-lavender`."
    },
    {
      "name": "sand-yellow",
      "doc": "uses `--color-sand-yellow`."
    },
    {
      "name": "pistachio",
      "doc": "uses `--color-pistachio`."
    },
    {
      "name": "black-3",
      "doc": "uses `--color-black-3`."
    },
    {
      "name": "emerald-green",
      "doc": "uses `--color-emerald-green`."
    },
    {
      "name": "fire-red",
      "doc": "uses `--color-fire-red`. Is used by <a href=\"/uilib/components/global-status\">GlobalStatus</a>"
    }
  ],
  "events": [],
  "related": [
    "Space"
  ],
  "checksum": "85c75127b95462aece331392bd0b4d994ecd9e4dce99041969c3fa1cf0c98d39",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/section/Section.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/section/Section.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/section.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/section/"
    },
    "props": {
      "local": "src/docs/uilib/components/section/properties.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/section/properties/"
    },
    "events": null,
    "demos": {
      "local": "src/docs/uilib/components/section/demos.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/section/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T11:12:44.283Z",
  "schemaVersion": 1
}