---
layout: default
menu: components
page-title: Tabler components
---

{% assign columns = page.columns | default: 0 %}

<div class="row">
   <div class="col-lg-3">
      <div class="list-group list-group-transparent mb-0">
         {% for component in site.components %}
         <a href="{{ component.url }}" class="list-group-item list-group-item-action{% if component.url == page.url %} active{% endif %}">{{ component.title }}</a>
         {% endfor %}
      </div>
   </div>
   <div class="col-lg-9">
      <div class="card">
         <div class="card-body p-5">
            <div class="border border-bottom-0 bg-light p-1 rounded-top">
               <div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
                  <div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
                     {{ content }}
                  </div>
               </div>
            </div>

            <div class="highlight m-0 rounded-0 rounded-bottom">
               {{ content | highlight_tidy: 'html' }}
            </div>
         </div>
      </div>
   </div>
</div>