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"> <div class="small-4 column"> <h1 class="subheader">No panel</h1> <p>Hi, I'm a typical column in Foundation. Notice that my background color is the same as any column, in this case plain white. And I have...