Source: dist/css/acc_boot.css, line 10022
7.2.1.2 CMS Sidebar and Content Container (RIGHT)
This component represents a pattern for a sidebar and content container used within a Content Management System (CMS).
Example
Default styling
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
<div id="page-structure" class="columns_2:md rows_2 rows_1:md gap-x_5:md gap-y_4 grid:md flex flex_column w_100" style="--col-2: 320px">
<div zone-label="main-content" class=""><div class=" reading-typography">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
</div></div>
<div zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
<nav class="nav-sub bg_primary c_white font_2 font_ui ">
<ul class="ul_none flex_column flex">
<li class="nav-item font-size_up" data-nav="parent">
<div class="bg_black-4 ">
<a class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">Parent Link: Tree starts from this node</a>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="collapsed br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse" >
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active" data-nav="child">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item " data-nav="child">
<div class="flex flex_row">
<div class="flex flex_column flex_none justify_start">
<div class="flex_none">
<span class="fa-stack">
<i class="fas fa-spacer fa-stack-1x"></i>
</span>
</div>
</div>
<div class="flex_auto self_center">
<a class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child Link</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="grandchild">
<div class="flex flex_row">
<div class="active br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
<div class="flex_none" aria-expanded="false" data-bs-toggle="collapse" data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse">
<span class="fa-stack">
<i class="fas fa-minus fa-stack-1x"></i>
<i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
</span>
</div></div> <div class="flex_auto self_center">
<a class="text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Child with Children Links</a>
<nav class="nav-sub-child bg_white-2 collapse show childNavCollapse">
<ul class="ul_none flex_column flex">
<li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item active " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" active text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> <li class="nav-item " data-nav="greatGrandChild">
<div class="flex flex_row">
<div class="flex_auto self_center">
<a class=" text-shadow_black-1 a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center">Great Grand Child Links</a>
</div>
</div>
</li> </ul>
</nav>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</li> </ul>
</nav> <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
<div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
<a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
</div>
<small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
</div> </div>
</div>