Layout

Layout Structures

  • Full Width: Body > .ap-section > .ap-container > .ap-row > .ap-col {{ x }} > .ap-content-block
  • Split Layout: Body > .ap-split-container (fw) > .ap-container > A: .ap-split-sidebar > .ap-sidebar-nav // B: .ap-split-main > .ap-section > .ap-split-main-container > .ap-row > .ap-col {{ x }} > .ap-content-block

Full Width (no columns)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Full Width (half width columns)

  • .ap-col > .ap-content-block > CONTENT
  • .ap-col > .ap-content-block.ap-color-block > CONTENT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Full Width (offset columns)

Stock image of tech bros doing tech bro things at white board.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Stock image of tech bros doing tech bro things at white board.

Utilities

.ap-row-padding
Adds 70px padding to the top of a row. Use to achieve consistent spacing between successive rows which matches horizontal spacing between columns.
.ap-button-margin
Adds 20px margin to the top of a button. Use to any buttons needing consistent spacing from above element.