socialbase-1.1.0/components/05-templates/layout/layout-default.twig

<div class="browser-window">
  <div class="top-bar">
    <div class="circles">
      <div class="circle" id="close-circle"></div>
      <div class="circle" id="minimize-circle"></div>
      <div class="circle" id="maximize-circle"></div>
    </div>
  </div>
  <div class="content">
    <div>
      <div style="padding: 20px;background-color:#E57373; min-height: 80px">
        <p>Header</p>
      </div>
    </div>
    <div class="hidden-xs">
      <div style="padding: 20px;background-color:#E6EE9C; min-height: 30px">
        <p>Breadcrumbs</p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#9575CD; min-height: 220px">
        <p>Hero</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#FFE082; min-height: 40px">
        <p>Secondary navigation</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="padding: 20px;background-color:#FF8A65; min-height: 100px">
        <p>Content top</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div class="row layout--with-complementary">
      <div class="region--complementary">
        <div class="region--complementary-top" style="padding: 20px; background-color:#4DD0E1; min-height: 150px">
          <p>Complementary top</p>
          <p class="flat-text small"></p>
          <p class="flat-text"></p>
          <p class="flat-text"></p>
        </div>
        <div class="region--complementary-bottom" style="padding: 20px;background-color:#81C784; min-height: 150px">
          <p>Complementary bottom</p>
          <p class="flat-text small"></p>
          <p class="flat-text"></p>
          <p class="flat-text"></p>
        </div>
      </div>
      <div class="region--content" style="padding: 20px; background-color:#4DB6AC; min-height: 400px">
        <p>Page title</p>
        <p>Main content</p>
        <p class="flat-text-header"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
        <p class="flat-text"></p>
      </div>
    </div>
    <div>
      <div style="background-color:#DCE775; min-height: 100px">
        <p>Content bottom</p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
        <p class="flat-text inline25"></p>
      </div>
    </div>
    <div>
      <div style="background-color:#64b5f6; min-height: 50px">
        <p>Footer</p>
      </div>
    </div>
  </div>
</div>