---
layout: default
route: documentation
---
{% assign current_category = page['doc-tab'] %}
{% assign current_link_id = page.breadcrumb | last %}
{% assign current_link = site.data.links.by_id[current_link_id] %}
{% assign subtitle = current_link.subtitle %}

{% include global/header.html %}

<main id="js-docs" class="bd-docs {% if page.fullwidth %}is-fullwidth{% endif %}">
  <div class="bd-docs-overlay js-toggle" data-target="js-docs"></div>

  <button id="js-menu-toggle" class="button bd-docs-button js-toggle" data-target="js-docs">
    <i class="fas fa-arrow-right-from-bracket"></i>
  </button>

  <div class="bd-docs-menu">
    {% include docs/menu.html %}
  </div>

  <div class="bd-docs-lead bd-theme-{{ page.theme }}">
    {% assign title = page.title | markdownify %}
    {% assign subtitle = subtitle | markdownify %}

    {%
      include docs/hero.html
      variant="docs"
      title=title
      subtitle=subtitle
      prints=page.hero_prints
    %}

    <div class="bd-docs-content algolia-content">
      {% if page.markdown %}
        <div class="content">{{ content }}</div>
      {% else %}
        {{ content }}
      {% endif %}

      {% if page.meta.variables %}
        {% include docs/elements/anchor.html name="Sass and CSS variables" %}
        {% include docs/components/variables.html %}
      {% endif %}
    </div>

    {% include docs/components/pagination.html %}
  </div>
</main>

<script type="text/javascript" src="{{ site.url }}/assets/javascript/docs.js"></script>