Site Designer Guide
foundation grid components classes reference

Foundation 6 reference

Foundation 6 logo

This reference covers the Foundation 6 classes and components available when you build a Site Designer project with the Foundation framework selected. Use it alongside the official Foundation 6 docs for the full API.

Grid system

Foundation uses a Flexbox-based XY grid. The key classes are:

ClassPurpose
grid-xHorizontal flex row container
grid-yVertical flex column container
cellA grid cell (column equivalent)
small-12Full width on small screens
medium-6Half width on medium screens (≥640 px)
large-4One-third width on large screens (≥1024 px)
autoCell grows to fill remaining space
shrinkCell shrinks to its content width
grid-padding-xAdds horizontal gutters between cells
grid-margin-xMargin-based gutters (does not collapse)

A typical two-column layout: <div class="grid-x grid-padding-x"><div class="cell medium-6">…</div><div class="cell medium-6">…</div></div>

Common components

Buttons

<a class="button">Default</a>
<a class="button success">Success</a>
<a class="button alert">Alert</a>
<a class="button secondary large">Large secondary</a>
<a class="button expanded">Full-width</a>

Callout (alerts)

<div class="callout">Info</div>
<div class="callout success">Success</div>
<div class="callout warning">Warning</div>
<div class="callout alert">Alert (danger)</div>

Card

<div class="card">
  <div class="card-divider">Card title</div>
  <div class="card-section"><p>Card body text.</p></div>
</div>

<!-- Horizontal menu -->
<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
</ul>

<!-- Top bar with navigation -->
<div class="top-bar">
  <div class="top-bar-left">…brand…</div>
  <div class="top-bar-right">…links…</div>
</div>

Reveal (modal)

<div class="reveal" id="myModal" data-reveal>
  <h3>Modal title</h3>
  <p>Modal content.</p>
  <button class="close-button" data-close>&#215;</button>
</div>
<button data-open="myModal">Open modal</button>

Accordion

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item>
    <a class="accordion-title" href="#">Panel 1</a>
    <div class="accordion-content" data-tab-content>Content here.</div>
  </li>
</ul>

Tabs

<ul class="tabs" data-tabs id="myTabs">
  <li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="myTabs">
  <div class="tabs-panel is-active" id="panel1">Panel 1 content.</div>
  <div class="tabs-panel" id="panel2">Panel 2 content.</div>
</div>

Orbit slider

<div class="orbit" data-orbit>
  <ul class="orbit-container">
    <li class="orbit-slide is-active">Slide 1</li>
    <li class="orbit-slide">Slide 2</li>
  </ul>
</div>

Visibility and utility classes

ClassEffect
show-for-small-onlyVisible only on small screens
hide-for-mediumHidden on medium screens and up
show-for-srVisible only to screen readers
text-left / text-center / text-rightText alignment
float-left / float-right / clearfixFloat utilities
align-centerCenters a grid-x container’s cells
align-rightRight-aligns cells in a grid-x container

Foundation JS

Interactive components require Foundation’s JavaScript to be initialized. Site Designer handles initialization automatically when you add these components through the canvas. The JS-dependent components are:

  • data-accordion — accordion panels
  • data-tabs — tab switcher
  • data-reveal — modal
  • data-orbit — image slider
  • data-dropdown — dropdown menus
  • data-sticky — sticky navigation
  • data-interchange — responsive image/content swapping

Full documentation

For the complete Foundation 6 reference — every component, every option, JavaScript API — visit get.foundation/sites/docs/.