Expandable Elements

Foundation provides a useful class for buttons called expand which expands a button element to the full-width of the page.

There are several other element types which could greatly benefit from full-width expansion and 0-width padding on mobile, and Foundation Mobile adds those.

---

Expandable button groups

Add the expand class to button-groups to go from this:

To this:

Expandable block-grid

Add the expand class to block-grid elements to go from this:

To this:

Or, you may wish for just the inner elements to touch, but have the outer container maintain its padding from the edge of the screen. In that case, just add the expand-inner class to the block-grid element instead.

Click here to switch the above block-grid element to the expand-inner class.

Expandable mobile-list

Add the expand class to Foundation Mobile's mobile-list elements to go from this:

To this:

Expandable collapsible elements

Add the expand class to Foundation Mobile's data-collapsible elements to go from this:

To this: