- 1.5.0

Box

Renders a box for a section on the page.

Read more Read less

Maturity: Refining

Usage

Minimal example with only a box body:

<.box>
  <p>This is a box.</p>
</.box>

With title, banner, action, and footer:

<.box>
  <:title>Profile</:title>
  <:banner>
    <img src="banner-image.png" alt="" />
  </:banner>
  <:action>
    <button_link patch={~p"/profiles/#{@profile}/edit"}>Edit</button_link>
  </:action>

  <p>This is a profile.</p>

  <:footer>
    <p>Last edited: <%= @profile.updated_at %></p>
  </:footer>
</.box>

A box is not a named landmark by default. To turn it into one, set id and point aria-labelledby at its title:

<.box id="profile" aria-labelledby="profile-title">
  <:title>Profile</:title>
  <p>This is a profile.</p>
</.box>

In this example, the body has the ID profile-body. You pass the ID to a disclosure button in the :action slot to toggle visibility.

Edit

Dogs are known for their loyalty and companionship. Whether you're looking for a playful pup or a calm and cuddly companion, there's a dog out there waiting for you. From energetic retrievers to gentle lap dogs, each breed has its own unique traits that can match your lifestyle. Visit your local shelter today to find the perfect furry friend to bring joy and love into your home

Attribute Type Documentation Default Value
class :any

Any additional classes to be added.

 Read more Read less
[]

Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component.

The value can be a string or a list of strings.
heading :string

The heading level for the title.

 Read more Read less
"h2"
id :string

A DOM ID for the box. If set, the title gets the ID {id}-title and

 Read more Read less

the body {id}-body.
rest :global

Any additional HTML attributes.
action :slot

A slot for action buttons related to the box.

 
<:action>
  <.link patch="/profiles/1/edit">Edit</.link>
</:action>
banner :slot

A slot that can be used to render a banner image in the header.
footer :slot

An optional slot for the footer.
Required inner_block * :slot

Slot for the content of the box body.

 
<p>
  Dogs are known for their loyalty and companionship. Whether you're
  looking for a playful pup or a calm and cuddly companion, there's a dog
  out there waiting for you. From energetic retrievers to gentle lap dogs,
  each breed has its own unique traits that can match your lifestyle.
  Visit your local shelter today to find the perfect furry friend to bring
  joy and love into your home
</p>
title :slot

The title for the box.