Source: dist/css/acc_boot.css, line 10240
6.1 Structures Page Layouts
These are common pattern that are used to make column layouts on the page.
Source: dist/css/acc_boot.css, line 10251
6.1.1 Base Page Layout
This layout provides a foundational structure for standard pages. It includes consistent spacing and alignment patterns but omits additional navigational elements like sidebars or complex grid arrangements. Ideal for simple content pages that need a reliable baseline layout.
Source: dist/css/acc_boot.css, line 10317
6.1.1.1 Split Page - Pages with Side Bar
Sub.ClassList.Grid.Split-50 - Grid Split Classes
Data Elements:
Example
Default styling
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
<div class="columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid">
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
</div>
</section>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->Code Sample
Source: dist/css/acc_boot.css, line 10271
6.1.2 Page with Sidebar Patterns
Some page layouts only work when placed in main context when there is also a sidebar on the page becuase of reduced space.
Source: dist/css/acc_boot.css, line 10301
6.1.2.1 Intro Block - Page with Side Bar
Example
Default styling
content
aside
<section id="introduction" item-label="section" class="grid columns_1 columns_5:lg gap_5:lg gap_4">
<div item-label="content" class="col-start_start col-end_n3:lg col-end_end reading-typography font-size_up" style="--custom-font-size-modifier: 1;">content</div>
<div item-label="sidebar-primary" class="col-start_start col-start_n3:lg col-end_end wrapper-container">aside</div>
</section>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->Code Sample
Source: dist/css/acc_boot.css, line 10360
6.1.2.2 Triple Split Grid - Sidebar
Sub.ClassList.Grid.TripleLG - Triple split on LG
Data Elements:
Example
Default styling
content
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
<div class="columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left">
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
</div>
</section>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->Code Sample
Source: dist/css/acc_boot.css, line 10260
6.1.3 Fullscreen Patterns
Some page layouts only work when placed in fullscreen context.
Source: dist/css/acc_boot.css, line 10281
6.1.3.1 Intro Block - Fullscreen Page
Example
Default styling
Main Content
Aside
<div id="introduction" item-label="section" class="columns_2 columns_4:md columns_5:lg gap_4 gap_5:lg grid isolation_isolate p-b_4 p-b_5:lg p-t_4 p-t_5:lg p-x_3 p-x_4:md p-x_5:lg relative">
<div item-label="content" class="col-end_3:md col-end_4:lg col-end_end col-start_start">
Main Content
</div>
<div item-label="sidebar-primary" class="relative col-start_n3:md col-start_start col-end_end font_n1 font_0:lg">
Aside
</div>
</div>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->Code Sample
Source: dist/css/acc_boot.css, line 10338
6.1.3.2 Triple Split Grid - full screen
Sub.ClassList.Grid.TripleXL - Triple split on XL
Data Elements:
Example
Default styling
content
content
content
<section item-label="section" class="m-x_n4 wrapper-container">
<div class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
<div item-label="content" class="wrapper-container">content</div>
</div>
</section>
<!-- Needed for Style Guide Only -->
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only -->