---
layout: default
menu: docs
title: Documentation
page-title: Documentation
---


<div class="row justify-content-center">
   <div class="col-lg-3 order-lg-1 mb-4">
      <a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
         {% include ui/icon.html icon="github" class="mr-2" %}Browse source code
      </a>

      <div class="list-group list-group-transparent mb-0">
         {% for p in site.data.docs %}
         {% assign doc = site.docs | where: "slug", p.page | first %}
         <a href="{{ site.base }}{{ doc.url | relative_url }}" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
            {{ doc.title }}{% if doc.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}
         </a>
         {% endfor %}
      </div>
   </div>
	<div class="col-lg-9">
		<div class="card">
			<div class="card-body p-lg-8">

				<div class="markdown">
					<h2 class="mt-0 mb-4">{{ page.title }}{% if page.done %} {% include ui/icon.html icon="check" color="green" %}{% endif %}</h2>

               {% if page.plugin %}
                  <div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div>
               {% endif %}

					{% if page.description %}
					   <p>{{ page.description }}</p>
					{% endif %}

					{% if page.in_progress %}
					<div class="alert alert-primary mt-5 mb-6">
						<div><strong>Work in progress!</strong> More detailed documentation is coming soon.</div>
					</div>
					{% endif %}

					{% if page.toc %}
					{{ content | toc_only }}
					{% endif %}

					{{ content | toc_generate }}
				</div>
			</div>
		</div>
	</div>
</div>