页面的head部分，需远程调用font-awesome图标字体库，并引入本地CSS样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，div容器里分别放入i标签和span标签，多个分类只需要复制粘帖改内容即可，代码如下：

<div class="wrapper">
  <div class="header">
    <h1 class="header__title">网格布局的分类扩展卡片</h1>
    <h2 class="header__subtitle">简单易用</h2>
  </div>
  <div class="cards">
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>科技</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>新闻</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>娱乐</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>电影</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>音乐</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>金融</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>网络</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>营销</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
    <div class=" card [ is-collapsed ] ">
      <div class="card__inner [ js-expander ]">
        <span>探索</span>
        <i class="fa fa-folder-o"></i>
      </div>
      <div class="card__expander">
        <i class="fa fa-close [ js-collapser ]"></i>
        具体内容
      </div>
    </div>
  </div>
</div>

页面的底部，需远程调用jQuery库，并引入一个本地JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>