docs/includes/article.html

<div 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 breadcrumbs-wrapper">
        {% 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--secondary js-print tooltipped tooltipped-n" aria-label="Print this article">
            {% include printer-icon %}
          </button>
        </div>
      </div>

      {% if page.contributor %}
        <div class="contributor-callout border rounded-1 mb-4 p-3 color-border-info color-bg-info f5">
          <p><span class="mr-2">{% octicon "info" %}</span>{% data ui.pages.contributor_callout %} <a href="{{ page.contributor.URL }}">{{ page.contributor.name }}</a>.</p>
        </div>
      {% endif %}

      {% 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"
        {%- if page.defaultPlatform %} data-default-platform="{{ page.defaultPlatform }}"{% endif %}>
          <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>
          </div>
        </nav>
      {% endif %}

      {% if page.product %}
        <div class="product-callout border rounded-1 mb-4 p-3 color-border-success color-bg-success">
        {{ 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 %}
        <h2 id="in-this-article" class="f5 mb-2"><a class="Link--primary" href="#in-this-article">{% data ui.pages.miniToc %}</a></h2>
        <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>
    </div>
    <div id="article-contents" class="article-grid-body">
      {% if featuredLinks.gettingStarted and featuredLinks.popular %}
      {% include featured-links %}
      {% endif %}
      {{ renderedPage }}

      {% if genericTocFlat %}
      {% include generic-toc-flat %}
      {% endif %}

      {% if genericTocNested %}
      {% include generic-toc-nested %}
      {% endif %}
    </div>
    </div>

    <div class="d-block mt-4 markdown-body">
      {% if currentLearningTrack and currentLearningTrack.trackName %}
        {% include learning-track-nav %}
      {% endif %}
    </div>
  </article>
</div>