Template Grid

A CSS grid for the standard web application page layouts. It accepts three children: Side Navigation, Content Area and Table of Content Area.

Template Grid Anatomy

sgds-template-grid accepts 3 direct children:

  1. sgds-aside-area : Side navigation area
  2. sgds-content-area : Content area
  3. sgds-toc-area : Table of content area

There are several permutations to use sgds-template-grid as not all of the 3 children are mandatory to use at the same time.

Example

Only content required

Only content required 

<sgds-template-grid>
    <sgds-content-area>
        ...
    </sgds-content-area>
<sgds-template-grid>

Content with side-navigation

Content with side navigation 

<sgds-template-grid class="with-sidenav">
    <sgds-aside-area>
    ...
    </sgds-aside-area>
    <sgds-content-area>
        ...
    </sgds-content-area>
<sgds-template-grid>

Content with side-navigation and table-of-content

Example 

<sgds-template-grid class="with-sidenav with-toc">
    <sgds-aside-area>...</sgds-aside-area>
    <sgds-content-area>...</sgds-content-area>
    <sgds-toc-area>...</sgds-toc-area>
<sgds-template-grid>
Last updated 10 June 2024
Home
Latest version 2.3.5