Single page layout

Example use cases

• Product presentation pages
• Detailed item views

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="main-wrapper">
    <div class="main-overflown">
      <div class="container">
        <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>
    </div>
  </div>
</div>

<!-- FOOTER SEGMENT -->