Box

<esp-box>

Used as a base to group context visually. esp-box has a css part of box that can be styled to create cards, forms, and other UI elements.

Slots

<esp-box> has a slot:

Default

The default slot holds elements to display in the box.

Attributes

<esp-box> has the following attributes:

full-screen

full-screen has a default value of false.

Whether the box should take up the full screen. Useful when displaying a dialog in full-screen mode.

Methods

<esp-box> has the following methods:

traverseToClosest

Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.

CSS Parts

<esp-box> has a CSS part:

box

The box element. The default style is a padded element displayed as a box. Style the CSS part to create cards, forms, and other UI elements. Here is a card style:

CSS Properties

<esp-box> has the following CSS properties:

--esp-color-box-background

The background color of the box.

--esp-box-background

Adds a layer in the background of the box. Intended for background images or gradients.

--esp-box-background-opacity

The opacity of the background layer.

--esp-size-box-padding

The padding inside the box.

--esp-field-background

Background color of the shared field shell. Defaults to var(--esp-color-layer-2).

--esp-field-border-color

Border color of the shared field shell. Defaults to var(--esp-color-border).

--esp-field-border-width

Border width of the shared field shell. Defaults to 1px.

--esp-field-text-color

Text color used inside the shared field shell. Defaults to var(--esp-color-text).

--esp-field-hover-bg

Hover background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-bg

Focus background color of the shared field shell. Derived from --esp-field-background.

--esp-field-focus-shadow

Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).