CSS
Menu

Box

The .Box component can be used for something as simple as a rounded corner box, or more complex lists and forms. It includes optional modifiers for padding density and color themes.

Box

A .Box is a container with a a white background, a light gray border, and rounded corners. By default there are no additional styles such as padding, these can be added as needed with utility classes. Other styles and layouts can be achieved with box elements and modifiers shown in the documentation below.

Box elements

Box elements include Box-header, Box-body, and Box-footer. These elements include borders and consistent padding. Optionally, you can include use Box-title which applies a bold font-weight the heading.

Box row

Use Box-row to add rows with borders and maintain the same padding. Box rows have a lighter border to give contrast between the header and footer.

Note: Box rows have some reliance on markup structure in order to target the first and last rows, therefore using an unordered list is recommended. See box row markup structure for more information.

Rows can be used with or without Box-header, Box-footer, or Box-body.

Box row markup structure

Box rows have some reliance on markup structure in order to target the first and last rows. Box rows are given a top border that is lighter in color than other box elements so the first row is targeted to apply a darker border color. An inner border-radius is applied to the first and last rows that that row corners don’t poke outside the Box, this can be particularly noticeable when using a highlight on box rows.

Using an unordered list is recommended in order to target the first and last rows, however, if you need to use a <div> for your rows, you may want to place your rows inside a parent <div> so that the first and last rows are styled appropriately.

Box padding density

You can changed the padding density of the box component.

Use Box--condensed to apply a more condensed line-height and reduce the padding on the Y axis.

Use Box--spacious to increase padding and increase the title font size.

You may want to increase the overall font size to work with the larger padding, in this example the default body font size is increased to 16px using the f4 typography utility.

Blue box theme

Use Box--blue to style the box borders and box header in blue.

Blue box header theme

Use Box-header--blue to add to change the header border and background to blue.

Box danger theme

Use Box--danger to apply a red border to the outside of the box. This theme is helpful for communicating destructive actions.

Note: Box-danger only works with either Box-row's or Box-body.

Box-danger is often paired with a red heading. See the subhead docs for more information.

Row themes

You can change the background color for individual rows, or change the color on hover or navigation focus.

Use Box-row--focus-gray or Box-row--focus-blue when using along-side navigation-focus if you want to highlight rows when using keyboard commands.

Box row unread

Use .Box-row-unread to apply a blue vertical line highlight for indicating a row contains unread items.

Use .Box-row-link when you want a link to appear dark gray and blue on hover on desktop, and remain a blue link on mobile. This is useful to indicate links on mobile without having hover styles.

Dashed border

Use the border-dashed utility to apply a dashed border to a box.

Boxes with flash alerts

Use flash-full for flash alert inside a box to remove the rounded corners. Place the flash alert above the Box-body and underneath the Box-header.

Flash alerts come in three different colors and can be used with icons and buttons, see the alert documentation for more information.

<div class="Box">
  <div class="Box-header">
    Box header
  </div>
  <div class="flash flash-full">
    <button class="flash-close js-flash-close"><%= octicon "x" %></button>
    Flash message with close button.
  </div>
  <div class="flash flash-full flash-success">
    <%= octicon("check") %> Flash success with an icon.
  </div>
  <div class="flash flash-full flash-warn">
    <%= octicon("alert") %> Flash warning with an icon.
  </div>
  <div class="flash flash-full flash-error">
    Flash error inside a Box.
  </div>
  <div class="Box-body">
    Box body
  </div>
</div>

Boxes with icons

Use Box-btn-octicon with btn-octicon when you want the icon to maintain the same padding as other box elements. This selector offsets margin to ensure it lines up on the left and right sides of the box so you may need to add padding neighboring elements.

<div class="Box">
  <div class="Box-body">
    <span class="pr-2">Box body</span>
    <button href="#" class="Box-btn-octicon btn-octicon"><%= octicon "pencil" %></button>
  </div>
</div>

It’s common to want to float icons to the far left or right and stop the Box-titlefrom wrapping underneath. To do this you’ll need to create a media object with utilities. Add clearfix to the surrounding div (this could be the header, body, or rows), add overflow-hidden to the title (or other text element), and float the icons as desired.

<div class="Box">
  <div class="Box-header clearfix">
    <button href="#" class="Box-btn-octicon btn-octicon float-right"><%= octicon "x" %></button>
    <h3 class="Box-title overflow-hidden pr-3">A very long title that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's right</h3>
  </div>
  <div class="Box-body">
    Box body
  </div>
</div>
<div class="Box">
  <div class="Box-row clearfix">
    <button href="#" class="Box-btn-octicon btn-octicon float-left"><%= octicon "check" %></button>
    <p class="overflow-hidden pl-3">A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left</p>
  </div>
</div>

Box headers with counters

Use a counter with a background that works against the contrast of the box header. The default counter colors do not stand out well against the header background so we suggest using one of the following styles:

Use Counter--gray for a counter with a gray background and dark gray text.

Use Counter--gray-dark for a counter with a dark gray background and white text.

Form elements and buttons in boxes

To achieve different layouts when adding buttons or form elements to boxes we suggest you use utilities to achieve the layout you want. Here’s some common examples:

Use flexbox utilities to center align items, and avoid using floats by using flex-auto to have the text fill the remaining space so that the button rests on the far right.

A similar approach can be used for buttons with multiple lines of text within a row.

Using flexbox along with form, button, and link styles, you can create more complex box headers for things like bulk actions and sorting.

You can put forms in boxes. Often form submission buttons are aligned to the bottom right of the form which you can do with text-right instead of using floats.

When a box is all by itself centered on a page you can use column widths to control the width of the box. If needed, break the mold a little and use typography utilities instead of the built in box title styles.

Box patterns can also be made with, and modified with border utilities.

Edit this page on GitHub