Table Object

Use this to vertically center elements.

Basic Usage

Apply the .table class to an element, then add .table-cell to its children. The default table collapses on mobile.

.table-cell
This side is taller.

.table-cell
{% highlight html %}

.table-cell
This side is taller.

.table-cell
{% endhighlight %}

Widths

To control width, use the table object in conjunction with grid width utilities.

.table-cell

.table-cell
{% highlight html %}

.table-cell

.table-cell
{% endhighlight %}

Evenly Spaced Cells

Use the .table-fixed extension to keep cells equal width.

.table-cell

.table-cell
.table-cell
{% highlight html %}

.table-cell

.table-cell
.table-cell
{% endhighlight %}

Padding

Add padding to any .table-cell.

.table-cell

.table-cell
{% highlight html %}

.table-cell

.table-cell
{% endhighlight %}

Mobile Table Object

Use the .mobile-table and .mobile-table-cell classes for use at all breakpoints.

.mobile-table-cell

.mobile-table-cell
{% highlight html %}

.mobile-table-cell

.mobile-table-cell
{% endhighlight %}

Flag Object

Replicate the flag object by adding .full-width to one of the cells.

Flag

.mobile-table-cell
{% highlight html %}

Flag

.mobile-table-cell
{% endhighlight %}