Page templates

CSS file

Page templates refer to the main body structure of the page. Using the design system grid, almost any layout is possible. To ensure consistency across the certify.SBA.gov platform, use the snippets below.

Single column page

<div class="sba-l-container">
  <!-- If using page title -->
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-u-padding-x--2">
      <h1>[HEADING]</h1>
    </div>
  </div>
  <!-- END page title -->
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-u-padding-x--2">
      [CONTENT]
    </div>
  </div>
</div>

Two-column, wide left

Normal sidebar

<div class="sba-l-container">
  <!-- If using page title -->
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-u-padding-x--2">
      <h1>[HEADING]</h1>
    </div>
  </div>
  <!-- END page title -->
  <div class="sba-l-row">
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-lg sba-l-lg-col--8 sba-u-padding-x--2">
      [CONTENT]
    </div>
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-sm sba-l-lg-col--4 sba-u-padding-x--2 sba-u-lg-padding-left--4">
      [SIDEBAR]
    </div>
  </div>
</div>

Narrow sidebar

<div class="sba-l-container">
  <!-- If using page title -->
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-u-padding-x--2">
      <h1>[HEADING]</h1>
    </div>
  </div>
  <!-- END page title -->
  <div class="sba-l-row">
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-lg sba-l-lg-col--9 sba-u-padding-x--2 sba-u-lg-padding-right--6">
      [CONTENT]
    </div>
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-sm sba-l-lg-col--3 sba-u-padding-x--2">
      [SIDEBAR]
    </div>
  </div>
</div>

Two-column, wide right

Normal sidebar

<div class="sba-l-container">
  <!-- If using page title -->
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-u-padding-x--2">
      <h1>[HEADING]</h1>
    </div>
  </div>
  <!-- END page title -->
  <div class="sba-l-row">
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-sm sba-l-lg-col--4 sba-u-padding-x--2 sba-u-lg-padding-right--4">
      [SIDEBAR]
    </div>
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-lg sba-l-lg-col--8 sba-u-padding-x--2">
      [CONTENT]
    </div>
  </div>
</div>

Narrow sidebar

<div class="sba-l-container">
  <!-- If using page title -->
  <div class="sba-l-row">
    <div class="sba-l-col--12 sba-u-padding-x--2">
      <h1>[HEADING]</h1>
    </div>
  </div>
  <!-- END page title -->
  <div class="sba-l-row">
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-sm sba-l-lg-col--3 sba-u-padding-x--2">
      [SIDEBAR]
    </div>
    <div class="sba-l-sm-col--12 sba-l-md-col--golden-lg sba-l-lg-col--9 sba-u-padding-x--2 sba-u-lg-padding-left--6">
      [CONTENT]
    </div>
  </div>
</div>

Page templates use a combination of layout and utility classes, and multiple templates may be used if necessary on a single page when they are stacked on top of each other.