Box

<k-box>

• kirby/panel/src/components/Layout/Box.vue

The <k-box> component is a multi-purpose box with text. You can use it as a foundation for empty state displays or anything else that needs to be displayed in a box. It comes with several pre-defined styles …

<k-box text="This is a nice box" theme="positive" />

Props

Prop	Type	Default	Description
html	boolean	false	If set to true, the text is rendered as HTML code, otherwise as plain text
text	string	–	Text to display inside the box
theme	string Supported values: none, code, button, positive, negative, notice, info, empty	"none"	Choose one of the pre-defined styles

Slots

Slot	Description
default	Use instead of text prop

Events

The box listens to any typical HTML event.

<k-box text="This is a box" @click="clicked" />

Content

Via text prop

<k-box text="This is a nice box" />

Custom content

The box can be filled with your own elements to overwrite the default text implementation:

<k-box>
  <!-- custom html goes here -->
</k-box>

CSS classes

.k-box