O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Panels

The panel component is used to highlight areas on your page. Panels are given a background color and a border that is 1 px wide.

There are two types of panels: regular and callout. The regular panel has a light gray background while the callout panel uses the primary color for the background. Font colors are adjusted to suit their respective backgrounds.

A subtle tweak that Foundation adds to panels is to ensure there is no top margin on the first element in a panel, or a bottom margin on the last element in the panel. At the same time, it adds padding all around the container.

Panels also allow for the radius class to round the corners slightly. To use panels, just add the panel class to a container. The following is an example:

<div class="row"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required