Source: dist/css/library_boot.css, line 9257
6.2.1 Base Grid Areas
The library base is a grid system that is used for the library page.
Example
Default styling
Grid Area: BreadCrumb
Grid Area: Grid Area 1
Grid Area: Grid Area 2
Grid Area: Grid Area 3
Grid Area: Grid Area 4
Grid Area: Grid Area 5
<div class="BODY_TAG-stand-in grid:md flex flex_column bg_black-4 w_100 p_3:md p_2">
<div class="page-wrapper grid p_2 p_3:md isolation_isolate br_radius bg_white-7">
<div class="grid:md grid-template_page flex flex_column gap_4:md gap_3">
<div class="grid-area_menuArea"><div class="w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: M</div></div>
<header class="grid-area_headerArea"><div class="w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: BreadCrumb</div></header>
<section class="grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md">
<aside class="grid-area_filterArea col-end_filterArea order_last order_unset:md">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Filter</div> </aside>
<div class="grid-area_contentArea grid:md flex flex_column columns_5 gap_4">
<div class="col-start_1 col-end_1">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 1</div> </div>
<div class="col-start_2 col-end_2 ">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 2</div> </div>
<div class="col-start_3 col-end_3">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 3</div> </div>
<div class="col-start_4 col-end_4">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 4</div> </div>
<div class="col-start_5 col-end_5">
<div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Grid Area 5</div> </div>
</div>
</section>
<footer class="flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3">
<div class="col-start col-end"><div class="w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis">Grid Area: Footer</div></div>
</footer>
</div>
</div>
</div>