California Design System

Box

Boxes help position content on the page. They contain content to standard sizes. They can also create column-based layouts that respond and break for mobile devices.

Basic box

Here's an example of the basic box.

Standard ca-box

<ca-box>
  <p>Standard <code>ca-box</code></p>
</ca-box>

Try resizing the window and switching layouts to see how the box responds.

Sizes

Boxes come in many sizes.

Small ca-box with size="small"

Default ca-box at medium size

Medium ca-box with size="medium"

Large ca-box with size="large"

Full ca-box with size="full"

<ca-box size="small">
  <p>Small <code>ca-box</code> with <code>size="small"</code></p>
</ca-box>
<ca-box>
  <p>Default <code>ca-box</code> at medium size</p>
</ca-box>
<ca-box size="medium">
  <p>Medium <code>ca-box</code> with <code>size="medium"</code></p>
</ca-box>
<ca-box size="large">
  <p>Large <code>ca-box</code> with <code>size="large"</code></p>
</ca-box>
<ca-box size="full">
  <p>Full <code>ca-box</code> with <code>size="full"</code></p>
</ca-box>

Columns

A box can be divided into multiple columns. This can be used to create multi-column pages.

Our boxes combine the box/row/column grid-based layout tools often seen in other popular CSS frameworks.

When a column shrinks too far, it will break onto a new line. Good for mobile.

Note that this will not work with a full-width box. (Because a full-width box has no defined size overall, I don't see a good way for us to define the ideal size of each column for responsive purposes.)

Column 1

Column 2

<ca-box columns="2">
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>

Each column

When using box columns, you have the option of using the ca-column tag to define each column. But it's not a requirement. Any element will work.

Column 1 Column 2

Column 1

Column 2

<ca-box columns="2">
  <!-- Using the ca-column tag here. -->
  <ca-column>Column 1</ca-column>
  <ca-column>Column 2</ca-column>
</ca-box>
<ca-box columns="2">
  <!-- Just using plain p tags here. Still works. -->
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>

Span

The box supports up to six columns. When using more than three or four, you'll probably want some columns to be bigger than others. That's where span comes into play.

Columns 1, 2 Column 3 Columns 1, 2 Column 3 
<ca-box columns="3">
  <ca-column span="2">Columns 1, 2</ca-column>
  <ca-column>Column 3</ca-column>
</ca-box>
<ca-box columns="3">
  <ca-column>Columns 1, 2</ca-column>
  <ca-column span="2">Column 3</ca-column>
</ca-box>

We also have equivalent classes.

Columns 1, 2

Column 3

<div class="box box-columns-3">
  <!-- Just using plain p tags here. Still works. -->
  <p class="span-2">Columns 1, 2</p>
  <p>Column 3</p>
</div>

Box column gaps

Gutters can be placed between columns if desired.

Column 1

Column 2

<ca-box columns="2" gap="2">
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>

Gaps can be applied in just one direction too.

Column 1

Column 2

Column 1

Column 2

<ca-box columns="2" gap-x="2">
  <!-- The gap will be placed between columns, but not between "rows" on mobile. -->
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>
<ca-box columns="2" gap-y="2">
  <!-- The gap will only be applied between "rows". In this case, mostly on mobile. -->
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>

Box column recursion

Let's do some nesting with our code demos.

Column 1

Column 2

<ca-box columns="2">
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>

Column 1

Column 2

<ca-box columns="2">
  <p>Column 1</p>
  <p>Column 2</p>
</ca-box>

The test matrix

Jon uses this in testing.

Column A-1

Column A-2

Column A-1

Column A-2

Column B-1

Column B-2

Column B-3

Column B-1

Column B-2

Column B-3

Column C-1

Column C-2

Column C-3

Column C-4

Column C-1

Column C-2

Column C-3

Column C-4

Columns F-1, F-2

Column F-3

Columns F-1, F-2

Column F-3

Column G-1

Columns G-2, G-3

Column G-4

Column G-1

Columns G-2, G-3

Column G-4

Columns I-1 to I-3

Column I-4

Columns I-1 to I-3

Column I-4

Columns H-1, H-2

Columns H-3, H-4

Columns H-1, H-2

Columns H-3, H-4

Column D-1

Column D-2

Column D-3

Column D-4

Column D-4

Column D-1

Column D-2

Column D-3

Column D-4

Column D-4

Columns J-1 to J-3

Columns J-4, J-5

Columns J-1 to J-3

Columns J-4, J-5

<ca-box columns="2">
  <p>Column A-1</p>
  <p>Column A-2</p>
</ca-box>
<ca-box columns="2" gap-x="2">
  <p>Column A-1</p>
  <p>Column A-2</p>
</ca-box>
<ca-box columns="3">
  <p>Column B-1</p>
  <p>Column B-2</p>
  <p>Column B-3</p>
</ca-box>
<ca-box columns="3" gap-x="2">
  <p>Column B-1</p>
  <p>Column B-2</p>
  <p>Column B-3</p>
</ca-box>
<ca-box columns="4">
  <p>Column C-1</p>
  <p>Column C-2</p>
  <p>Column C-3</p>
  <p>Column C-4</p>
</ca-box>
<ca-box columns="4" gap-x="2">
  <p>Column C-1</p>
  <p>Column C-2</p>
  <p>Column C-3</p>
  <p>Column C-4</p>
</ca-box>
<ca-box columns="3">
  <p class="span-2">Columns F-1, F-2</p>
  <p>Column F-3</p>
</ca-box>
<ca-box columns="3" gap-x="2">
  <p class="span-2">Columns F-1, F-2</p>
  <p>Column F-3</p>
</ca-box>
<ca-box columns="4">
  <p>Column G-1</p>
  <p class="span-2">Columns G-2, G-3</p>
  <p>Column G-4</p>
</ca-box>
<ca-box columns="4" gap-x="2">
  <p>Column G-1</p>
  <p class="span-2">Columns G-2, G-3</p>
  <p>Column G-4</p>
</ca-box>
<ca-box columns="4">
  <p class="span-3">Columns I-1 to I-3</p>
  <p>Column I-4</p>
</ca-box>
<ca-box columns="4" gap-x="2">
  <p class="span-3">Columns I-1 to I-3</p>
  <p>Column I-4</p>
</ca-box>
<ca-box columns="4">
  <p class="span-2">Columns H-1, H-2</p>
  <p class="span-2">Columns H-3, H-4</p>
</ca-box>
<ca-box columns="4" gap-x="2">
  <p class="span-2">Columns H-1, H-2</p>
  <p class="span-2">Columns H-3, H-4</p>
</ca-box>
<ca-box columns="5">
  <p>Column D-1</p>
  <p>Column D-2</p>
  <p>Column D-3</p>
  <p>Column D-4</p>
  <p>Column D-4</p>
</ca-box>
<ca-box columns="5" gap-x="2">
  <p>Column D-1</p>
  <p>Column D-2</p>
  <p>Column D-3</p>
  <p>Column D-4</p>
  <p>Column D-4</p>
</ca-box>
<ca-box columns="5">
  <p class="span-3">Columns J-1 to J-3</p>
  <p class="span-2">Columns J-4, J-5</p>
</ca-box>
<ca-box columns="5" gap-x="2">
  <p class="span-3">Columns J-1 to J-3</p>
  <p class="span-2">Columns J-4, J-5</p>
</ca-box>