centered card with foundation

using foundation 6.0.1 via cdn

by María Fernández

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.min.css">
<div class="top-bar" id="top-bar">
  <div class="top-bar-left hide-for-small-only">
      <div class="menu-text">TopBar Title</div>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a src="#">Menu option</a></li>
    </ul>
  </div>
</div>

<div class="row" id="main-content">
  <div class="small-4 columns small-centered card-content">
    <div class="row">
      <div class="small-2 columns">1</div>
      <div class="small-2 columns">2</div>
      <div class="small-2 columns">3</div>
      <div class="small-6 columns">4</div>
    </div>
    <div class="row">
      <div class="small-4 columns">5</div>
      <div class="small-4 columns">6</div>
      <div class="small-4 columns">7</div>
    </div>
  </div>
</div>

<div class="footer">Footer</div>

CSS

#top-bar {
  position: fixed;
  height: 50px;
  width: 100%;
}
#main-content {
  background-color: yellow;
  height: 300px;
  padding-top: 50px;
  overflow: hidden;
}
.side {
  background-color: cyan;
}
.card-content {
  background-color: pink;
  height: 100%;
}

.card-content .row {
  background-color: green;
  padding: 10px;
}

/* < 640 is small */
@media (max-width: 639px) {
  .card-content { width: 100%; }
}

.columns {
  border-style: solid;
  border-width: medium;
}

.footer {
  background-color: green;
  height: 30px;
}