article.html

<main class="container-xl px-3 px-md-6 my-4 my-lg-4 d-xl-flex">
  <article class="markdown-body width-full">
    <div class="d-lg-flex flex-justify-between">
      <div class="d-block d-lg-none">{% include article-version-switcher %}</div>
      <div class="d-flex flex-items-center" style="height: 39px;">
        {% include breadcrumbs %}
      </div>
      <div class="d-none d-lg-block">{% include article-version-switcher %}</div>
    </div>

    <div class="mt-2 article-grid-container">

    <div class="article-grid-head">
      <div class="d-flex flex-items-baseline flex-justify-between mt-3">
        <h1 class="border-bottom-0">{{ page.title }}</h1>
        <div class="d-none d-lg-block ml-2">
          <button class="btn-link link-gray js-print tooltipped tooltipped-n" aria-label="Print this article">
            {% include printer-icon %}
          </button>
        </div>
      </div>

      {% if page.intro %}
        <div class="lead-mktg">{{ page.intro }}</div>
      {% endif %}

      {% if page.permissions %}
        <div class="permissions-statement">{{ page.permissions }}</div>
      {% endif %}

      {% if page.includesPlatformSpecificContent %}
        <nav class="UnderlineNav my-3">
          <div class="UnderlineNav-body">
            <a href="#" class="UnderlineNav-item platform-switcher" data-platform="mac">Mac</a>
            <a href="#" class="UnderlineNav-item platform-switcher" data-platform="windows">Windows</a>
            <a href="#" class="UnderlineNav-item platform-switcher" data-platform="linux">Linux</a>
            <a href="#" class="UnderlineNav-item platform-switcher" data-platform="all">All</a>
          </div>
        </nav>
      {% endif %}

      {% if page.product %}
        <div class="product-callout border rounded-1 mb-4 p-3 border-purple bg-purple-light">
        {{ page.product }}
        </div>
      {% endif %}
    </div>
    <div class="article-grid-toc border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0">
      <div class="article-grid-toc-content">
        {% if miniTocItems.size > 1 %}
        <h3 id="in-this-article" class="f5 mb-2"><a class="link-gray-dark" href="#in-this-article">{% data ui.pages.miniToc %}</a></h3>
        <ul class="list-style-none pl-0 f5 mb-0">
          {% for item in miniTocItems %}
          <li class="ml-{{ item.indentationLevel | times: 3 }} {{ item.platform }} mb-2 lh-condensed">{{ item.contents }}</li>
          {% endfor %}
        </ul>
        {% endif %}
        <div class="d-none d-xl-block{% if miniTocItems.size > 1 %} border-top border-gray-light mt-4{% endif %}">
          {% assign helpId = 'xl' %}
          {% include helpfulness %}
          {% include contribution %}
        </div>
      </div>
    </div>
    <div id="article-contents" class="article-grid-body">
      {% if gettingStartedLinks and popularLinks %}
      {% include featured-links %}
      {% endif %}
      {{ renderedPage }}
    </div>
    </div>
  </article>
  <div class="d-block d-xl-none border-top border-gray-light mt-4 markdown-body">
    {% assign helpId = 'sm' %}
    {% include helpfulness %}
    {% include contribution %}
  </div>
</main>