Box
Samples
Basic
0.1ms
116 allocs
Title
Description
Lorem ipsum dolor sit amet…
View Source
<%= render "shared/box" do |box| %>
<% box.title "Title" %>
<% box.description "Description" %>
<% box.body "Lorem ipsum dolor sit amet…" %>
<% end %>
With Divider
0.1ms
115 allocs
Title
Description
Lorem ipsum dolor sit amet…
View Source
<%= render "shared/box", divider: true do |box| %>
<% box.title "Title" %>
<% box.description "Description" %>
<% box.body "Lorem ipsum dolor sit amet…" %>
<% end %>
With top border
0.0ms
118 allocs
Title
View Source
<%= render "shared/box", title: "Title", border_top: true %>
Without background
0.0ms
116 allocs
Title
View Source
<%= render "shared/box", title: "Title", no_background: true %>
Options
| Name | Required | Type | Default | Description |
|---|---|---|---|---|
title |
Content Block |
|||
title_size |
String |
A CSS string to control title size |
||
title_padding |
String |
A CSS string to control title padding |
||
description |
Content Block |
Content text to render beneath the title |
||
table |
Content Block |
|||
body |
Content Block |
The main content body of the element |
||
footer |
Content Block |
Add a footer at the bottom within the container, with a top border and some padding |
||
raw_footer |
Content Block |
Add a footer without a top border and padding |
||
actions |
Content Block |
Content designated to contain actions, like buttons, beneath the body |
||
pagy |
Pagy object |
Pass in a pagy to render a pagy_nav below the body |
||
divider |
Boolean |
false |
Whether to add dividers between sections |
|
border_top |
Boolean |
false |
Whether to add a top border to the container element |
|
no_background |
Boolean |
false |
Pass true to remove the surrounding background on the container |