Skip to content

BorderBox is a Box component with a border.

Arguments

NameTypeDefaultDescription
paddingSymbol:defaultOne of :condensed, :default, or :spacious.
system_argumentsHashN/ASystem arguments

Slots

Optional Header.

When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Body

Optional Body.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Optional Footer.

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Rows

Use Rows to add rows with borders and maintain the same padding.

NameTypeDefaultDescription
schemeSymbolN/AColor scheme. One of :default, :info, :neutral, or :warning.
system_argumentsHashN/ASystem arguments

Examples

Header

Body
  • Row one
  • Row two
<%= 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

Header
Body
  • Row two
<%= 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 %>