BorderBox

Beta

View source View storybook

On this page

Arguments
Slots
Examples

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

`Header`

Optional Header.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

`Body`

Optional Body.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

`Footer`

Optional Footer.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

`Rows`

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

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	System arguments

Examples

Header, body, rows, and footer

Header

Body

Row one
Row two

Footer

<%= render(Primer::BorderBoxComponent.new) do |component| %>
  <% component.header do %>
    Header
  <% 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

Footer

<%= 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 %>

Edit this page on GitHub