# `PhiaUi.Components.Layout.Box`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/box.ex#L1)

Semantic HTML wrapper component with configurable element tag.

`box` renders any HTML element specified via the `:as` attribute, defaulting
to `div`. Use it to add semantic meaning (article, section, aside, main) to
a container without losing access to PhiaUI's class merger.

## Examples

    <.box>content</.box>

    <.box as="article" class="p-4 rounded-lg border border-border">
      Card-like article
    </.box>

    <.box as="main" class="flex-1 overflow-auto">
      Main content area
    </.box>

    <.box as="aside" class="w-64 shrink-0">
      Sidebar
    </.box>

# `box`

Renders a semantic HTML wrapper with a configurable tag.
## Attributes

* `as` (`:string`) - HTML element to render as. Defaults to `"div"`. Must be one of `"div"`, `"section"`, `"article"`, `"main"`, `"aside"`, `"header"`, `"footer"`, `"span"`, `"p"`, `"ul"`, `"ol"`, `"li"`, `"nav"`, or `"figure"`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content rendered inside the element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*