<p>Key</p>
<ul class="no-bullet">
<li><span class="box blue"></span> Content area</li>
<li><span class="box gray"></span> Gutter (padding)</li>
<li><span class="box black"></span> Column (demo border)</li>
</ul>
<div class="row">
<div class="small-6 columns"><span>6 columns</span></div>
<div class="small-6 columns"><span>6 columns</span></div>
</div>
<div class="row">
<div class="small-3 columns"><span>3 columns</span></div>
<div class="small-9 columns"><span>9 columns</span></div>
</div>
// demo styles
$primary-color: #1779ba;
$secondary-color: #767676;
$light-gray: #e6e6e6;
body {
padding: 2rem;
}
.row {
background: $light-gray;
margin-bottom: 1rem;
}
.column,
.columns {
background: $secondary-color;
border: 5px solid black;
span {
background: $primary-color;
display: block;
text-align: center;
width: 100%;
}
}
.callout {
background: $primary-color;
text-align: center;
}
.box {
height: 20px;
width: 20px;
display: inline-block;
&.blue {
background: $primary-color;
}
&.gray {
background: $secondary-color;
}
&.black {
background: #000;
}
}
$(document).foundation();
Also see: Tab Triggers