<%- include('../_common/_head', {
  key: 'themes',
  pagetitle: 'Themes'
}) %>

<%- include('../_component/themes/_header') %>

<%- include('../_component/themes/_menu') %>

<main class="uc-content">

  <section class="uc-section _center _gray">
    <div class="uc-section-inner">
      <h2 class="uc-section-title">UNITS Themes</h2>
      <p>UNITS has various themes available from the beginning.<br>
      Click on the card to see the demo page.</p>

      <div class="uc-card-unit">
        <div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter">

          <div class="uc-grid-cell">
            <div class="uc-card _orig-height">
              <div class="uc-card-image" style="background-image:url(/img/themes/standard.png);background-position:center top"></div>
              <h3 class="uc-card-title">Standard</h3>
              <p>It is possible to quickly build landing pages and so on.</p>
              <div class="uc-btn-unit">
                <div class="uc-btn _primary"><a href="/themes/standard/" target="_blank">Demo</a></div>
                <div class="uc-btn"><a href="https://github.com/kokushin/unitscss-theme-standard/archive/master.zip">Download</a></div>
              </div>
            </div>
          </div>

          <div class="uc-grid-cell">
            <div class="uc-card _orig-height">
              <div class="uc-card-image" style="background-image:url(/img/themes/light.png);background-position:center top"></div>
              <h3 class="uc-card-title">Light</h3>
              <p>It gives a lighter impression than conventional UNITS design.</p>
              <div class="uc-btn-unit">
                <div class="uc-btn _primary"><a href="/themes/light/" target="_blank">Demo</a></div>
                <div class="uc-btn"><a href="https://github.com/kokushin/unitscss-theme-light/archive/master.zip">Download</a></div>
              </div>
            </div>
          </div>

          <div class="uc-grid-cell">
            <div class="uc-card _orig-height">
              <div class="uc-card-image" style="background-image:url(/img/themes/blog.png);background-position:center top"></div>
              <h3 class="uc-card-title">Blog</h3>
              <p>You can make a simple and beautiful blog theme.</p>
              <div class="uc-btn-unit">
                <div class="uc-btn _primary"><a href="/themes/blog/" target="_blank">Demo</a></div>
                <div class="uc-btn"><a href="https://github.com/kokushin/unitscss-theme-blog/archive/master.zip">Download</a></div>
              </div>
            </div>
          </div>

          <div class="uc-grid-cell">
            <div class="uc-card _orig-height">
              <div class="uc-card-image" style="background-image:url(/img/themes/portfolio.png);background-position:center top"></div>
              <h3 class="uc-card-title">Portfolio</h3>
              <p>You can create a simple and functional portfolio site.</p>
              <div class="uc-btn-unit">
                <div class="uc-btn _primary"><a href="/themes/portfolio/" target="_blank">Demo</a></div>
                <div class="uc-btn"><a href="https://github.com/kokushin/unitscss-theme-portfolio/archive/master.zip">Download</a></div>
              </div>
            </div>
          </div>

          <!-- <div class="uc-grid-cell">
            <div class="uc-card _orig-height">
              <div class="uc-card-image" style="background-image:url(/img/themes/standard.png);background-position:center top"></div>
              <h3 class="uc-card-title">Product</h3>
              <p>It is a stylish design. Ideal for pages that introduce products.</p>
              <div class="uc-btn-unit">
                <div class="uc-btn _primary"><a href="/themes/product/" target="_blank">Demo</a></div>
                <div class="uc-btn"><a href="https://github.com/kokushin/unitscss-theme-product/archive/master.zip">Download</a></div>
              </div>
            </div>
          </div>-->

          <div class="uc-grid-cell">
            <div class="uc-card _orig-height">
              <div class="uc-card-image" style="background-image:url(/img/themes/docs.png);background-position:center top"></div>
              <h3 class="uc-card-title">Document</h3>
              <p>You can create a simple and functional document page.</p>
              <div class="uc-btn-unit">
                <div class="uc-btn _primary"><a href="/docs/" target="_blank">Demo</a></div>
                <div class="uc-btn"><a href="https://github.com/kokushin/unitscss-theme-docs/archive/master.zip">Download</a></div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </section>

</main>

<%- include('../_component/_footer') %>

<%- include('../_common/_foot') %>
