<template>
  <div class="page">
    <simple-header title="Grid" :back-link="true"></simple-header>
    <page-content>
      <div class="grid-demo">
        <div class="grids">
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>

        </div>
      </div>
      <div class="grid-demo">
        <h1 class="demos-title">Small</h1>
        <div class="grids grids-small">
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>
          <a href="javascript:;" class="grid">
            <div class="grid_icon">
              <img src="../assets/images/home/button.png" alt="">
            </div>
            <p class="grid_label">
              Button
            </p>
          </a>

        </div>
      </div>
    </page-content>
  </div>
</template>
<script>
import { SimpleHeader } from '../components/header'
import Content from '../components/content'

export default {
  components: {
    SimpleHeader,
    'page-content': Content
  }
}
</script>
