Text pages

There are no notes for this item.

<body>
    <section class="layout-content container-page-wrapper landing-wrapper">
        <article class="container-left-8 container-shift-reverse-1">
            <a href="#" class="breadcrumb">Optional breadcrumb link</a>
            <h1 id="introduction">Page with categorical divisions</h1>
            <blockquote>
                <p>This page uses a grid of eight columns on the left and three on the right, with a one-column margin between. The right-side block can hold a sticky nav unit, or be left empty. This opening paragraph is a "blockquote," which has this larger
                    type style built in.</p>
            </blockquote>
            <section class="container">
                <h2 id="section-1" class="h2-bar">Page section one</h2>
                <div class="container landing-section">
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                </div>
            </section>
            <section class="container">
                <h2 id="section-2" class="h2-bar">Page section two</h2>
                <div class="container landing-section">
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                    <div>
                        <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
                        <p>Short description of the content to be found in this topical subsection.</p>
                        <p><a href="#">Additional link to topic</a></p>
                    </div>
                </div>
            </section>
        </article>

        <!-- sticky side nav with anchor links -->
        <div class="pre-sticky pre-sticky-small"></div>
        <nav class="sticky sticky-float sticky_nav">
            <ul>
                <a href="#" class="sticky_nav-nav_item" data-nav-item="intro" data-active="true">Top</a>
                <a href="#section-1" class="sticky_nav-nav_item" data-nav-item="page-section-one" data-active="false">Page section one</a>
                <a href="#section-2" class="sticky_nav-nav_item" data-nav-item="footnote-examples" data-active="false">Page section two</a>
            </ul>
        </nav>
    </section>
</body>
<body>
  <section class="layout-content container-page-wrapper landing-wrapper">
    <article class="container-left-8 container-shift-reverse-1">
      <a href="#" class="breadcrumb">Optional breadcrumb link</a>
      <h1 id="introduction">Page with categorical divisions</h1>
      <blockquote>
        <p>This page uses a grid of eight columns on the left and three on the right, with a one-column margin between. The right-side block can hold a sticky nav unit, or be left empty. This opening paragraph is a "blockquote," which has this larger type style built in.</p>
      </blockquote>
      <section class="container">
        <h2 id="section-1" class="h2-bar">Page section one</h2>
        <div class="container landing-section">
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
        </div>
      </section>
      <section class="container">
        <h2 id="section-2" class="h2-bar">Page section two</h2>
        <div class="container landing-section">
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
          <div>
            <h3 class="h3 landing-heading"><a href="#">Topic</a></h3>
            <p>Short description of the content to be found in this topical subsection.</p>
            <p><a href="#">Additional link to topic</a></p>
          </div>
        </div>
      </section>
    </article>

  <!-- sticky side nav with anchor links -->
      <div class="pre-sticky pre-sticky-small"></div>
      <nav class="sticky sticky-float sticky_nav">
        <ul>
          <a href="#" class="sticky_nav-nav_item" data-nav-item="intro" data-active="true">Top</a>
          <a href="#section-1" class="sticky_nav-nav_item" data-nav-item="page-section-one" data-active="false">Page section one</a>
          <a href="#section-2" class="sticky_nav-nav_item" data-nav-item="footnote-examples" data-active="false">Page section two</a>
        </ul>
      </nav>
  </section>
</body>
{
  "text": null
}
  • Handle: @category-text-page
  • Preview:
  • Filesystem Path: components/layouts/category-text-page/category-text-page.hbs