layout-3columns.twig in Open Social 8.9
<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 class="row container layout--with-three-columns">
<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 class="region--sidebar-first" style="padding: 20px; background-color:#ec407a; min-height: 400px">
<p>Sidebar first</p>
<p class="flat-text small"></p>
<p class="flat-text"></p>
<p class="flat-text"></p>
</div>
<div class="region--sidebar-second" style="padding: 20px; background-color:#ffe0b2 ; min-height: 400px">
<p>Sidebar second</p>
<p class="flat-text small"></p>
<p class="flat-text"></p>
<p class="flat-text"></p>
</div>
</div>
</div>
</div>
File
themes/socialbase/components/05-templates/layout/layout-3columns.twig
View source
- <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 class="row container layout--with-three-columns">
- <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 class="region--sidebar-first" style="padding: 20px; background-color:#ec407a; min-height: 400px">
- <p>Sidebar first</p>
- <p class="flat-text small"></p>
- <p class="flat-text"></p>
- <p class="flat-text"></p>
- </div>
-
- <div class="region--sidebar-second" style="padding: 20px; background-color:#ffe0b2 ; min-height: 400px">
- <p>Sidebar second</p>
- <p class="flat-text small"></p>
- <p class="flat-text"></p>
- <p class="flat-text"></p>
- </div>
- </div>
-
- </div>
- </div>