Single page layout

Single page layouts are ideal for use with the responsive grid to create custom layouts.

Example use cases

  • Product presentation pages
  • Integrated dashboards
  • Documentation pages
Code output
Open layout in new window
HTML markup

The code snippet below contains only the content segment of the layout, excluding the header and footer segments.

<!-- HEADER SEGMENT -->
Copy<div class="content">
  <div class="content-item">
    <div class="content-overflown">
      <div class="container">
        <div class="breadcrumbs-row">
          <ol class="breadcrumbs">
            <li><a href="#" class="simple-link">Home</a></li>
            <li>Sample Path</li>
          </ol>
        </div>
        <div class="box pad-lg">
          <h3 class="text-center"><strong>Single page title</strong><br><small>Feb 02 2017, 12:30</small></h3>
          <p class="text-center">Status
            <br><span class="inline-block"><i class="color-square color-criticality-1"></i> <strong>Active</strong></span>
          </p>
          <hr class="sm">
          <div class="row">
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
            <div class="col-xs-12 col-xs-6 col-md-3">
              <p>Attribute
                <br><strong>Value</strong>
              </p>
            </div>
          </div>
          <hr class="sm">
          <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi. Suspendisse sit gravida natoque nunc In vitae feugiat pede Quisque Donec. Odio elit
            habitasse Pellentesque velit et vitae pretium malesuada Aenean massa. Wisi non ante et nunc Aenean risus tincidunt Aenean nulla condimentum. Dolor laoreet metus velit nulla laoreet mattis eros Nullam Sed convallis. Sed Vivamus.
          </p>
          <p>Ut laoreet Curabitur enim volutpat pretium est vel ut lacinia quis. Amet nunc Nulla ut nibh eros id elit senectus Ut sapien. Nullam laoreet dui neque interdum Mauris Morbi Vestibulum mauris dui tellus. Phasellus consequat vestibulum
            netus adipiscing sit odio feugiat convallis malesuada sem. Semper pede orci ac leo aliquet Donec neque pretium pretium suscipit. Feugiat natoque Ut ultrices Sed orci senectus quis Sed.
          </p>
          <p>At Nam gravida nibh natoque et mauris ac id cursus at. Feugiat Suspendisse platea elit ante quis elit ante sapien fringilla vel. Vivamus faucibus nibh Maecenas amet et sapien nascetur quis lorem Curabitur. Donec Ut Morbi tincidunt
            congue felis molestie Praesent pretium malesuada nibh. Phasellus Donec condimentum lobortis velit Donec morbi Vivamus ac facilisis urna. Orci condimentum ac Aenean lobortis.
          </p>
          <p>Cras tellus tellus volutpat id tristique ac ac et Lorem nibh. Est dui natoque nisl lacus elit Nam Cras consequat Nulla et. Quisque egestas dictum nonummy Curabitur porta quis sapien wisi Nulla Donec. Lorem gravida ante lorem netus
            ac id id In In porttitor. Dignissim elit pulvinar lacus Nunc In pretium sollicitudin ultrices eu convallis. Eget accumsan adipiscing ipsum lorem sed sit auctor Sed mauris iaculis. Tincidunt commodo Curabitur risus Ut et convallis.
          </p>
          <p>Tempor quis nulla condimentum malesuada vestibulum et id Nunc nibh at. Ac leo Phasellus augue hac at Sed lacus semper tortor In. Phasellus Vestibulum Integer nibh Maecenas mauris In ipsum sem velit urna. Facilisi Curabitur convallis
            elit sit Ut sed tellus gravida dignissim Vestibulum. Lobortis tortor Donec vel justo leo et risus tortor pretium semper. Faucibus Phasellus pretium justo consectetuer tincidunt Integer Nulla et adipiscing et. Ut ut id eget dapibus
            eget Cum nunc semper sed cursus.
          </p>
        </div>
        <div class="spacer-sm"></div>
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="box pad-lg">
              <h3 class="text-center">Single page title</h3>
              <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="box pad-lg">
              <h3 class="text-center">Single page title</h3>
              <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="box pad-lg">
              <h3 class="text-center">Single page title</h3>
              <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="box pad-lg">
              <h3 class="text-center">Single page title</h3>
              <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="box pad-lg">
              <h3 class="text-center">Single page title</h3>
              <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-4">
            <div class="box pad-lg">
              <h3 class="text-center">Single page title</h3>
              <p>Lorem ipsum dolor sit amet consectetuer Quisque adipiscing tincidunt neque orci. Malesuada wisi et odio Phasellus a lorem dolor ac adipiscing wisi.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- FOOTER SEGMENT -->