BorderBox is a Box component with a border.
Arguments
| Name | Type | Default | Description |
|---|
padding | Symbol | :default | One of :condensed, :default, or :spacious. |
system_arguments | Hash | N/A | System arguments |
Slots
Optional Header.
When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
Body
Optional Body.
Optional Footer.
Rows
Use Rows to add rows with borders and maintain the same padding.
| Name | Type | Default | Description |
|---|
scheme | Symbol | N/A | Color scheme. One of :default, :info, :neutral, or :warning. |
system_arguments | Hash | N/A | System arguments |
Examples
Header with title, body, rows, and footer
<%= render(Primer::BorderBoxComponent.new) do |component| %>
<% component.header do |h| %>
<% h.title(tag: :h2) do %>
Header
<% end %>
<% end %>
<% component.body do %>
Body
<% end %>
<% component.row do %>
<% if true %>
Row one
<% end %>
<% end %>
<% component.row do %>
Row two
<% end %>
<% component.footer do %>
Footer
<% end %>
<% end %>
Padding density
<%= render(Primer::BorderBoxComponent.new(padding: :condensed)) do |component| %>
<% component.header do %>
Header
<% end %>
<% component.body do %>
Body
<% end %>
<% component.row do %>
Row two
<% end %>
<% component.footer do %>
Footer
<% end %>
<% end %>
Row colors
- Default
- Neutral
- Info
- Warning
<%= render(Primer::BorderBoxComponent.new) do |component| %>
<% component.row do %>
Default
<% end %>
<% component.row(scheme: :neutral) do %>
Neutral
<% end %>
<% component.row(scheme: :info) do %>
Info
<% end %>
<% component.row(scheme: :warning) do %>
Warning
<% end %>
<% end %>