- 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.

Minimal
Open in playground

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 

<.box id="box-single-minimal">
  <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>
</.box>
Heading level
Open in playground

The heading should be chosen to follow the header hierarchy in the document outline.

Adopt a Loyal Friend

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 

<.box id="box-single-heading-level" heading="h3">
  <:title>Adopt a Loyal Friend</:title>
  <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>
</.box>
Action without title
Open in playground
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 

<.box id="box-single-action-without-title">
  <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>
  <:action>
    <.link patch="/profiles/1/edit">Edit</.link>
  </:action>
</.box>