---
title: Document Categories
body_class: app-documents
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/bootstrap-select/bootstrap-select.css">
  {{/content}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/apps/documents.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/matchheight/jquery.matchHeight-min.js"></script>
    <script src="{{global}}/vendor/bootstrap-select/bootstrap-select.js"></script>
    <script src="{{global}}/vendor/stickyfill/stickyfill.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/matchheight.js"></script>
    <script src="{{global}}/js/Plugin/bootstrap-select.js"></script>
    <script src="{{global}}/js/Plugin/animate-list.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{assets}}/js/Site.js"></script>
    <script src="{{assets}}/js/App/Documents.js"></script>
  {{/content}}

  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/apps/documents.js"></script>
  {{/content}}

  {{#content "body"}}

    <div class="page">
      <div class="page-header">
        <h1 class="page-title mb-10">Category List</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item active">Categories</li>
        </ol>
      </div>
      <div class="page-content">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-btn">
              <select data-plugin="selectpicker" data-style="btn-inverse">
                <option>Getting started</option>
                <option>Configuration</option>
                <option>Developer Tourial</option>
                <option>Compatible Themes</option>
              </select>
            </div>
            <button type="submit" class="input-search-btn">
              <i class="icon md-search" aria-hidden="true"></i>
            </button>
            <input type="text" class="form-control" placeholder="Search the knowledge base...">
          </div>
        </div>
        <div class="documents-wrap categories" data-plugin="animateList" data-child="li">
          <ul class="blocks blocks-100 blocks-xxl-4 blocks-lg-3 blocks-sm-2" data-plugin="matchHeight">
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Getting Started</h4>
                <p>Sapientium sis excelsus atilii patientiamque percipi splendido
                  dum optabilem. Efficiantur.</p>
                <a href="articles.html">3 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Divitias modis</h4>
                <p>Facerem impendere exitum fortunae expetendam astris architecto.
                  Vendibiliora suum, peccant.</p>
                <a href="articles.html">2 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Developer Tourials</h4>
                <p>Oportere seditiones perveniri modo expetendum ignota istis timeam
                  plus consequatur.</p>
                <a href="articles.html">4 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Compatible Themes</h4>
                <p>Faciendum sale quid, cognitionem, hominibus minimum movere, atomum
                  sive. Omnes.</p>
                <a href="articles.html">5 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Commodis clamat</h4>
                <p>Debilitatem simul domus desistemus aptior infanti. Praeterierunt
                  quem tenuit inquam.</p>
                <a href="articles.html">2 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Numeris imperio</h4>
                <p>Ignorant divitiarum, affirmatis multam assidua maxime, possum consuetudinum
                  habeat utraque.</p>
                <a href="articles.html">6 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Generis acutum</h4>
                <p>Physici ea scribi disseruerunt expetendis eximiae, faciendum. Primo,
                  copulatas detracto.</p>
                <a href="articles.html">5 Articles</a>
              </div>
            </li>
            <li>
              <div class="category">
                <div class="icon-wrap">
                  <i class="icon md-desktop-windows" aria-hidden="true"></i>
                </div>
                <h4>Distinctio arbitrium</h4>
                <p>Principes ratione veri monet confirmare consuetudine, incurrunt,
                  iracundiae oblique, inopem.</p>
                <a href="articles.html">3 Articles</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

  {{/content}}
{{/extend}}