@dnb/eufemia

--- version: 10.104.0 generatedAt: 2026-04-17T18:46:09.956Z checksum: ec84dc16e718312ef1af443ead4f2bc8f3bbe35d1a14f99e0971ce4ac21ae5c4 --- ## Deprecated styles ### Mint-Green Section ```tsx render( <Section innerSpace={{ top: 'small', bottom: 'small', }} backgroundColor="mint-green" > <P space={0}> Visual Section: <Anchor href="#">mint-green</Anchor> </P> </Section> ) ``` ### Sea-Green Section ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} style_type="sea-green" > <P space={0}> Visual Section: <Anchor href="#">sea-green</Anchor> </P> </Section> ) ``` ### Emerald-Green Section ```tsx render( <Section innerSpace={{ top: 'medium', bottom: 'medium', }} style_type="emerald-green" > <P space={0}> Visual Section: <Anchor href="#">emerald-green</Anchor> </P> </Section> ) ``` ### Lavender Section ```tsx render( <Section innerSpace={{ top: 'small', bottom: 'small', }} textColor="black-80" backgroundColor="lavender" > <P space={0}> Visual Section: <Anchor href="#">lavender</Anchor> </P> </Section> ) ``` ### Black-3 Section ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} backgroundColor="black-3" > <P space={0}> Visual Section: <Anchor href="#">black-3</Anchor> </P> </Section> ) ``` ### Sand-Yellow Section ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} backgroundColor="sand-yellow" > <P space={0}> Visual Section: <Anchor href="#">sand-yellow</Anchor> </P> </Section> ) ``` ### Pistachio Section ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} backgroundColor="pistachio" > <P space={0}> Visual Section: <Anchor href="#">pistachio</Anchor> </P> </Section> ) ``` ### Fire-Red Section ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} style_type="fire-red" > <P space={0}> Visual Section: <Anchor href="#">fire-red</Anchor> </P> </Section> ) ``` ### Fire-Red-8 Section ```tsx render( <Section innerSpace={{ top: 'large', bottom: 'large', }} backgroundColor="fire-red-8" > <P space={0}> Visual Section: <Anchor href="#">fire-red-8</Anchor> </P> </Section> ) ``` ## Properties ```json { "props": { "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" }, "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" }, "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" }, "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" }, "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" }, "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" }, "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" }, "dropShadow": { "doc": "Use `true` to show the default Eufemia DropShadow. Supports also media query breakpoints like `{ small: true }`.", "type": "boolean", "status": "optional" }, "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" }, "innerSpace": { "doc": "Will add a padding around the content. Supports also media query breakpoints like `{small: { top: 'medium' }}`.", "type": "string", "status": "optional" }, "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" }, "[Space](/uilib/layout/space/properties)": { "doc": "Spacing properties like `top` or `bottom` are supported.", "type": ["string", "object"], "status": "optional" } } } ``` ## Variants | Variant | Description | | --------- | ------------------------------------------------------------------------------------------------ | | `info` | Neutral, informational. | | `error` | Indicates an erroneous state. | | `warning` | Draws attention to a potential problem that may or may not require an action on the user's part. | | `success` | Indicates a successful state. | ## Styles You can easily [customize the color](/uilib/components/section#customize-color). | Style | Description | | ------------------- | --------------------------------------------------------------------------------------------------- | | `white` | uses `--color-white`. | | `divider` | uses `--color-white` as background with a border-line on top and bottom. | | `transparent` | CSS transparent. Used in situations where a Section is of interest, but without a color as a basis. | | ~~`mint-green-12`~~ | _(default)_ uses `--color-mint-green-12`. | | ~~`mint-green`~~ | uses `--color-mint-green`. | | ~~`lavender`~~ | uses `--color-lavender`. | | ~~`sand-yellow`~~ | uses `--color-sand-yellow`. | | ~~`pistachio`~~ | uses `--color-pistachio`. | | ~~`black-3`~~ | uses `--color-black-3`. | | ~~`emerald-green`~~ | uses `--color-emerald-green`. | | ~~`fire-red`~~ | uses `--color-fire-red`. Is used by [GlobalStatus](/uilib/components/global-status) |