tabler/pages/_layouts/component.html

---
layout: default
menu: components
page-header: Tabler components
og-component: true
---

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

{% capture demo-html %}
<div class="tabler-demo">
  {{ content }}
</div>
{% endcapture %}

{% capture demo-css %}
.tabler-demo {
   padding: 3rem;
   -webkit-font-smoothing: antialiased;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   width: 100%;
}
{% endcapture %}

<div class="row">
   <div class="col-lg-3">
      <div class="list-group list-group-transparent mb-0">
         {% assign components = site.components | sort: 'title' %}
         {% for component in 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-6">
            <div class="card-title">{{ page.title }}</div>
            <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>


            <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 mb-3">
               {{ content | highlight_tidy: 'html' }}
            </div>

            <div class="row">
               <div class="col">{% include ui/button.html icon="clipboard" text="Copy code" color="secondary" block=true class="mt-4" %}</div>
               <div class="col">
                  <form action="https://codepen.io/pen/define" method="post" target="_blank">
                     <input type="hidden" name="data" value='{"title":"{{ page.title | escape }}","css_external":"https://preview-dev.tabler.io/dist/css/tabler.css","html":"{{ demo-html | tidy: 'html' | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' | replace_regex: "'", "\'" }}","css":"{{ demo-css | replace_regex: "\n", "\\n" | replace_regex: "\t", "\\t" | replace_regex: '"', '\"' }}", "editors":"100"}'>
                     {% include ui/button.html icon="codesandbox" text="Edit in CodePen" color="primary" block=true class="mt-4" element="button" type="submit" %}
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>