Update docs for new XXL grid tier

- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant

scss/_variables.scss

@@ -271,6 +271,7 @@ $paragraph-margin-bottom:   1rem !default;
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
+// scss-docs-start grid-breakpoints
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -279,6 +280,7 @@ $grid-breakpoints: (
   xl: 1200px,
   xxl: 1400px
 ) !default;
+// scss-docs-end grid-breakpoints
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
@@ -288,6 +290,7 @@ $grid-breakpoints: (
 //
 // Define the maximum width of `.container` for different screen sizes.
 
+// scss-docs-start container-max-widths
 $container-max-widths: (
   sm: 540px,
   md: 720px,
@@ -295,6 +298,7 @@ $container-max-widths: (
   xl: 1140px,
   xxl: 1320px
 ) !default;
+// scss-docs-end container-max-widths
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
@@ -795,6 +799,7 @@ $form-validation-states: (
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 
+// scss-docs-start zindex-stack
 $zindex-dropdown:                   1000 !default;
 $zindex-sticky:                     1020 !default;
 $zindex-fixed:                      1030 !default;
@@ -802,6 +807,7 @@ $zindex-modal-backdrop:             1040 !default;
 $zindex-modal:                      1050 !default;
 $zindex-popover:                    1060 !default;
 $zindex-tooltip:                    1070 !default;
+// scss-docs-end zindex-stack
 
 
 // Navs

site/assets/scss/_layout.scss

+.bd-layout {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: $grid-gutter-width;
+    grid-template-areas:
+      "sidebar intro"
+      "sidebar toc"
+      "sidebar content";
+    grid-template-columns: 1fr 3fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "sidebar intro toc"
+      "sidebar content toc";
+    grid-template-columns: 1fr 4fr 1fr;
+  }
+}
+
+.bd-sidebar {
+  grid-area: sidebar;
+}
+
+.bd-intro {
+  grid-area: intro;
+}
+
+.bd-toc {
+  grid-area: toc;
+}
+
+.bd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}

site/assets/scss/_toc.scss

-// stylelint-disable selector-max-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type
 
-.bd-toc-wrap {
+.bd-toc {
   @include media-breakpoint-up(lg) {
     @supports (position: sticky) {
       position: sticky;
@@ -11,34 +11,34 @@
       overflow-y: auto;
     }
   }
-}
-
-.bd-toc nav {
-  @include font-size(.875rem);
 
-  ul {
-    padding-left: 0;
-    list-style: none;
+  nav {
+    @include font-size(.875rem);
 
     ul {
-      padding-left: 1rem;
-      margin-top: .25rem;
+      padding-left: 0;
+      list-style: none;
+
+      ul {
+        padding-left: 1rem;
+        margin-top: .25rem;
+      }
     }
-  }
 
-  li {
-    margin-bottom: .25rem;
-  }
+    li {
+      margin-bottom: .25rem;
+    }
 
-  a {
-    color: inherit;
-  }
+    a {
+      color: inherit;
 
-  a:not(:hover) {
-    text-decoration: none;
-  }
+      &:not(:hover) {
+        text-decoration: none;
+      }
 
-  a code {
-    font: inherit;
+      code {
+        font: inherit;
+      }
+    }
   }
 }

site/assets/scss/docs.scss

@@ -37,6 +37,7 @@
 @import "content";
 @import "skippy";
 @import "sidebar";
+@import "layout";
 @import "toc";
 @import "footer";
 @import "component-examples";

site/content/docs/4.3/components/dropdowns.md

@@ -607,7 +607,7 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
 
 If you want to use responsive alignment, disable dynamic positioning by adding the `data-display="static"` attribute and use the responsive variation classes.
 
-To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl}-right`.
+To align **right** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-right`.
 
 {{< example >}}
 <div class="btn-group">
@@ -622,7 +622,7 @@ To align **right** the dropdown menu with the given breakpoint or larger, add `.
 </div>
 {{< /example >}}
 
-To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl}-left`.
+To align **left** the dropdown menu with the given breakpoint or larger, add `.dropdown-menu-right` and `.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-left`.
 
 {{< example >}}
 <div class="btn-group">

site/content/docs/4.3/components/list-group.md

@@ -96,7 +96,7 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
 
 ## Horizontal
 
-Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
+Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
 
 **ProTip:** Want equal-width list group items when horizontal? Add `.flex-fill` to each list group item.
 

site/content/docs/4.3/components/navbar.md

@@ -10,7 +10,7 @@ toc: true
 
 Here's what you need to know before getting started with the navbar:
 
-- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl}` for responsive collapsing and [color scheme](#color-schemes) classes.
+- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
 - Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
 - Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars.
 - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
@@ -481,7 +481,7 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
 
 ## Responsive behaviors
 
-Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
+Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
 
 For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
 

site/content/docs/4.3/content/tables.md

@@ -721,7 +721,7 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 
 ## Responsive tables
 
-Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.
+Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
 
 {{< callout warning >}}
 ##### Vertical clipping/truncation
@@ -802,7 +802,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 
 ### Breakpoint specific
 
-Use `.table-responsive{-sm|-md|-lg|-xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
 
 **These tables may appear broken until their responsive styles apply at specific viewport widths.**
 

site/content/docs/4.3/examples/grid/index.html

@@ -46,6 +46,12 @@ include_js: false
     <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
   </div>
 
+  <div class="row mb-3">
+    <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+    <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+    <div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
+  </div>
+
   <h2 class="mt-4">Three equal columns</h2>
   <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
   <div class="row mb-3">
@@ -168,7 +174,7 @@ include_js: false
   <hr class="my-4">
 
   <h2 class="mt-4">Containers</h2>
-  <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
+  <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>xxl</code> breakpoint.</p>
 </div>
 
 <div class="container themed-container">.container</div>
@@ -176,4 +182,5 @@ include_js: false
 <div class="container-md themed-container">.container-md</div>
 <div class="container-lg themed-container">.container-lg</div>
 <div class="container-xl themed-container">.container-xl</div>
+<div class="container-xxl themed-container">.container-xxl</div>
 <div class="container-fluid themed-container">.container-fluid</div>

site/content/docs/4.3/examples/navbars/index.html

@@ -198,6 +198,40 @@ extra_css:
   </div>
 </nav>
 
+<nav class="navbar navbar-expand-xxl navbar-dark bg-dark">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Expand at xxl</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarsExampleXxl">
+      <ul class="navbar-nav mr-auto mb-2 mb-xl-0">
+        <li class="nav-item active">
+          <a class="nav-link" aria-current="page" href="#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="dropdownXxl" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
+          <ul class="dropdown-menu" aria-labelledby="dropdownXxl">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+          </ul>
+        </li>
+      </ul>
+      <form>
+        <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+      </form>
+    </div>
+  </div>
+</nav>
+
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container">
     <a class="navbar-brand" href="#">Container</a>

site/content/docs/4.3/layout/breakpoints.md

@@ -65,16 +65,7 @@ Each breakpoint size was chosen to be a multiple of 12 and to be representative
 
 These breakpoints are customizable via Sass—you'll find them in a Sass map in our `_variables.scss` stylesheet.
 
-{{< highlight scss >}}
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
 

site/content/docs/4.3/layout/containers.md

@@ -153,15 +153,7 @@ Use `.container-fluid` for a full width container, spanning the entire width of
 
 As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
 
-{{< highlight scss >}}
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-) !default;
-{{< /highlight >}}
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
 

site/content/docs/4.3/layout/grid.md

@@ -141,7 +141,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
 
 ### Equal-width
 
-For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
+For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
 {{< example class="bd-example-row" >}}
 <div class="container">
@@ -418,30 +418,11 @@ Variables and maps determine the number of columns, the gutter width, and the me
 {{< highlight scss >}}
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
+{{< /highlight >}}
 
-$grid-breakpoints: (
-  // Extra small screen / phone
-  xs: 0,
-  // Small screen / phone
-  sm: 576px,
-  // Medium screen / tablet
-  md: 768px,
-  // Large screen / desktop
-  lg: 992px,
-  // Extra large screen / wide desktop
-  xl: 1200px,
-  // Extra extra large screen / wide desktop
-  xxl: 1400px
-);
+{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-);
-{{< /highlight >}}
+{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
 
 ### Mixins
 

site/content/docs/4.3/layout/z-index.md

@@ -11,20 +11,6 @@ These higher values start at an arbitrary number, high and specific enough to id
 
 We don't encourage customization of these individual values; should you change one, you likely need to change them all.
 
-{{< highlight scss >}}
-{{< zindex.inline >}}
-{{- $file := readFile "scss/_variables.scss" -}}
-{{- $matches := findRE `\$zindex\-.+;` $file -}}
-
-{{- if (eq (len $matches) 0) -}}
-{{- errorf "Got no matches for $zindex- in %q!" $.Page.Path -}}
-{{- end -}}
-
-{{- range $matches }}
-{{ . | replaceRE "\\s{13}" "    " }}
-{{- end -}}
-
-{{< /zindex.inline >}}
-{{< /highlight >}}
+{{< scss-docs name="zindex-stack" file="scss/_variables.scss" >}}
 
 To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit `z-index` values of `1`, `2`, and `3` for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher `z-index` value to show their border over the sibling elements.

site/content/docs/4.3/utilities/display.md

@@ -12,12 +12,12 @@ Change the value of the [`display` property](https://developer.mozilla.org/en-US
 
 ## Notation
 
-Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Display utility classes that apply to all [breakpoints]({{< docsref "/layout/breakpoints" >}}), from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0;` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
 As such, the classes are named using the format:
 
 * `.d-{value}` for `xs`
-* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
+* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *value* is one of:
 
@@ -33,7 +33,7 @@ Where *value* is one of:
 
 The display values can be altered by changing the `$displays` variable and recompiling the SCSS.
 
-The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg` and `xl` screens.
+The media queries effect screen widths with the given breakpoint *or larger*. For example, `.d-lg-none` sets `display: none;` on both `lg`, `xl`, and `xxl` screens.
 
 ## Examples
 
@@ -51,9 +51,9 @@ The media queries effect screen widths with the given breakpoint *or larger*. Fo
 
 For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.
 
-To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-none` classes for any responsive screen variation.
+To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
 
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
 
 <table class="table">
   <thead>
@@ -87,6 +87,10 @@ To show an element only on a given interval of screen sizes you can combine one
       <td>Hidden only on xl</td>
       <td><code>.d-xl-none</code></td>
     </tr>
+    <tr>
+      <td>Hidden only on xxl</td>
+      <td><code>.d-xxl-none</code></td>
+    </tr>
     <tr>
       <td>Visible on all</td>
       <td><code>.d-block</code></td>
@@ -109,7 +113,11 @@ To show an element only on a given interval of screen sizes you can combine one
     </tr>
     <tr>
       <td>Visible only on xl</td>
-      <td><code>.d-none .d-xl-block</code></td>
+      <td><code>.d-none .d-xl-block .d-xxl-none</code></td>
+    </tr>
+    <tr>
+      <td>Visible only on xxl</td>
+      <td><code>.d-none .d-xxl-block</code></td>
     </tr>
   </tbody>
 </table>

site/content/docs/4.3/utilities/spacing.md

@@ -12,9 +12,9 @@ Assign responsive-friendly `margin` or `padding` values to an element or a subse
 
 ## Notation
 
-Spacing utilities that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
 
-The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
 
 Where *property* is one of:
 

site/data/breakpoints.yml

 - breakpoint: xs
   abbr: ""
-  name: Extra small
+  name: X-Small
   min-width: 0px
   container: ""
 
@@ -24,6 +24,12 @@
 
 - breakpoint: xl
   abbr: -xl
-  name: Extra large
+  name: X-Large
   min-width: 1200px
   container: 1140px
+
+- breakpoint: xxl
+  abbr: -xxl
+  name: XX-Large
+  min-width: 1400px
+  container: 1320px

site/layouts/_default/docs.html

@@ -9,50 +9,40 @@
     {{ partial "docs-navbar" . }}
     {{ partial "docs-subnav" . }}
 
-    <div class="container-xxl my-4">
-      <div class="row flex-xl-nowrap">
-        <div class="col-md-3 col-xl-2 bd-sidebar">
-          {{ partial "docs-sidebar" . }}
-        </div>
+    <div class="container-xxl my-4 bd-layout">
+      <div class="bd-sidebar">
+        {{ partial "docs-sidebar" . }}
+      </div>
 
-        <main class="col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content">
-          <div class="col-xl-10 px-0">
-            <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
-            <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
-            {{ partial "ads" . }}
-          </div>
+      <div class="bd-intro pt-md-3 pl-lg-4">
+        <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+        <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
+        {{ partial "ads" . }}
+      </div>
 
-          {{ if .Page.Params.sections }}
-            <div class="row my-5">
-              {{ range .Page.Params.sections }}
-                <div class="col-md-6 mb-4">
-                  <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
-                    <strong class="d-block h5 mb-0">{{ .title }}</strong>
-                    <span class="text-secondary">{{ .description }}</span>
-                  </a>
-                </div>
-              {{ end }}
-            </div>
-          {{ end }}
+      {{ if (eq .Page.Params.toc true) }}
+        <div class="bd-toc pl-xl-3 text-muted mb-lg-5">
+          <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
+          {{ .TableOfContents }}
+        </div>
+      {{ end }}
 
-          <div class="row position-relative flex-xl-row-reverse">
-            <div class="col-xl-3">
-              {{ if (eq .Page.Params.toc true) }}
-                <div class="bd-toc-wrap pl-xl-3 text-muted">
-                  <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
-                  <div class="bd-toc mb-5 mb-xl-0">
-                    {{ .TableOfContents }}
-                  </div>
-                </div>
-              {{ end }}
-            </div>
-            <div class="col-xl-9">
-              {{ .Content }}
+      <main class="bd-content pl-lg-4">
+        {{ if .Page.Params.sections }}
+          <div class="row g-3">
+            {{ range .Page.Params.sections }}
+            <div class="col-md-6">
+              <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
+                <strong class="d-block h5 mb-0">{{ .title }}</strong>
+                <span class="text-secondary">{{ .description }}</span>
+              </a>
             </div>
+            {{ end }}
           </div>
+        {{ end }}
 
-        </main>
-      </div>
+        {{ .Content }}
+      </main>
     </div>
 
     {{ partial "footer" . }}