Iota Css Example Code - Main HTML for those who are following along with the "Main Content Part 2" iota CSS Tutorial

index.html

<!-- ... -->
<!-- Main Section -->
<main class="u-pv-x7">
  <!-- Title Section -->
  <div class="o-container o-container--size-small">
    <div class="o-grid o-grid--middle u-mb-x7">
      <div class="o-grid__col u-1/2 u-text-center u-text-left@sm">
        <h1 class="o-type-35">Dashboard</h1>
      </div>
      <div class="o-grid__col u-1/2 u-text-center u-text-right@sm">
        <a href="#" class="c-button">Add New</a>  
      </div>
    </div>
    <!-- Cards Section -->
    <div class="o-grid o-grid--gutter-x4 u-mb-x3">
      <div class="o-grid__col u-1/3@sm u-mb-x4">
        <div class="c-card u-text-center">
          <h2 class="o-type-80 u-color-purple u-weight-normal">10</h2>
          <p class="o-type-20">Published Posts</p>
        </div>
      </div>
      <div class="o-grid__col u-1/3@sm u-mb-x4">
        <div class="c-card u-text-center">
          <h2 class="o-type-80 u-color-red u-weight-normal">10</h2>
          <p class="o-type-20">Deleted Posts</p>
        </div>
      </div>
      <div class="o-grid__col u-1/3@sm u-mb-x4">
        <div class="c-card u-text-center">
          <h2 class="o-type-80 u-color-grey u-weight-normal">10</h2>
          <p class="o-type-20">Scheduled Posts</p>
        </div>
      </div>
    </div>
    <!-- All Posts Section -->
    <div class="c-card c-card--light">
      <div class="o-grid o-grid--middle u-mb-x4">
        <div class="o-grid__col u-1/2 u-text-left">
          <h3 class="o-type-28">All Posts</h3>
        </div>
        <div class="o-grid__col u-1/2 u-text-right">
          <a href="#" class="c-button c-button--outline">View All</a>
        </div>
      </div>
      <ul class="o-list o-list--block">
        <li class="o-list__item o-type-20">
          <div class="o-media o-media--middle o-media--gutter-x3">
            <div class="o-media__fixed">
              <date class="u-color-grey">18/7/2017</date>
            </div>
            <div class="o-media__fluid">
              <a href="" class="c-link u-color-purple">How to create stunning article titles by Not Me</a>
            </div>
          </div>
        </li>
        <li class="o-list__item o-type-20">
          <div class="o-media o-media--middle o-media--gutter-x3">
            <div class="o-media__fixed">
              <date class="u-color-grey">18/7/2017</date>
            </div>
            <div class="o-media__fluid">
              <a href="" class="c-link u-color-purple">How to create stunning article titles by Not Me</a>
            </div>
          </div>
        </li>
        <li class="o-list__item o-type-20">
          <div class="o-media o-media--middle o-media--gutter-x3">
            <div class="o-media__fixed">
              <date class="u-color-grey">18/7/2017</date>
            </div>
            <div class="o-media__fluid">
              <a href="" class="c-link u-color-purple">How to create stunning article titles by Not Me</a>
            </div>
          </div>
        </li>
        <li class="o-list__item o-type-20">
          <div class="o-media o-media--middle o-media--gutter-x3">
            <div class="o-media__fixed">
              <date class="u-color-grey">18/7/2017</date>
            </div>
            <div class="o-media__fluid">
              <a href="" class="c-link u-color-purple">How to create stunning article titles by Not Me</a>
            </div>
          </div>
        </li>
        <li class="o-list__item o-type-20">
          <div class="o-media o-media--middle o-media--gutter-x3">
            <div class="o-media__fixed">
              <date class="u-color-grey">18/7/2017</date>
            </div>
            <div class="o-media__fluid">
              <a href="" class="c-link u-color-purple">How to create stunning article titles by Not Me</a>
            </div>
          </div>
        </li>            
      </ul>
    </div>
  </div>
</main>
<!-- ... -->