diff --git a/src/website/views/components/table/_examples.pug b/src/website/views/components/table/_examples.pug
index 2f81e8b67..e718dac86 100644
--- a/src/website/views/components/table/_examples.pug
+++ b/src/website/views/components/table/_examples.pug
@@ -17,7 +17,7 @@ p.-text Enable a hover state by applying the modifier class <code>-hover</code>.
 
 h3 Portal theme
 p.-text
-  | Enable portal styling by applying class <code>-portal</code>.
+  | Enable portal styling by applying class <code>-portal</code> and <code>-sm</code>.
   | To display a row in active / selected state, apply class <code>-active</code> to the <code>tr</code>.
 :example(lang="html"):html-beautify:pug include ./_portal.pug
 
@@ -255,4 +255,4 @@ h2 Two tier table header
         td —
         td 1
         td 66%
-        td 66%
\ No newline at end of file
+        td 66%
diff --git a/src/website/views/components/table/_portal.pug b/src/website/views/components/table/_portal.pug
index 34797626a..528db6a37 100644
--- a/src/website/views/components/table/_portal.pug
+++ b/src/website/views/components/table/_portal.pug
@@ -1,6 +1,6 @@
 include ./_common.pug
 
-table.chi-table.-portal
+table.chi-table.-portal.-sm
 	thead
 		tr
 			th Name
diff --git a/src/website/views/templates/portal.pug b/src/website/views/templates/portal.pug
index 237ce6cb6..cb7e85093 100644
--- a/src/website/views/templates/portal.pug
+++ b/src/website/views/templates/portal.pug
@@ -268,13 +268,13 @@ h3 Base
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal-base
+    ul.chi-tabs#example-portal-cards
       li.-disabled
-        a(href=`#webcomponent-portal-base`) Web Component
+        a(href=`#webcomponent-portal-cards`) Web Component
       li.-active
-        a(href=`#html-portal-base`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal-base
-  .chi-tabs-panel.-active#html-portal-base
+        a(href=`#html-portal-cards`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-cards
+  .chi-tabs-panel.-active#html-portal-cards
     :code(lang="html")
       <div class="chi-card -portal">
         <div class="chi-card__header -sm">
@@ -296,13 +296,13 @@ h3 Highlight
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal-base
+    ul.chi-tabs#example-portal-cards-highlight
       li.-disabled
-        a(href=`#webcomponent-portal-base`) Web Component
+        a(href=`#webcomponent-portal-cards-highlight`) Web Component
       li.-active
-        a(href=`#html-portal-base`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal-base
-  .chi-tabs-panel.-active#html-portal-base
+        a(href=`#html-portal-cards-highlight`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-cards-highlight
+  .chi-tabs-panel.-active#html-portal-cards-highlight
     :code(lang="html")
       <div class="chi-card -portal -highlight">
         <div class="chi-card__header -sm">
@@ -331,13 +331,13 @@ p.-text Use cards with tabs for organizing enterprise portal card content into s
           | Aenean pretium massa sed vehicula porta. Phasellus id metus felis.
           | Ut felis magna, facilisis ut malesuada nec.
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal-tabs
+    ul.chi-tabs#example-portal-cards-tabs
       li.-disabled
-        a(href=`#webcomponent-portal-tabs`) Web Component
+        a(href=`#webcomponent-portal-cards-tabs`) Web Component
       li.-active
-        a(href=`#html-portal-tabs`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal-tabs
-  .chi-tabs-panel.-active#html-portal-tabs
+        a(href=`#html-portal-cards-tabs`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-cards-tabs
+  .chi-tabs-panel.-active#html-portal-cards-tabs
     :code(lang="html")
       <div class="chi-card -portal">
         <div class="chi-card__tabs">
@@ -358,7 +358,8 @@ p.-text Use cards with tabs for organizing enterprise portal card content into s
         </div>
       </div>
 
-h3 Table
+h2 Table
+h3 Base
 .example.-mb--3
   .-p--3
     .chi-card.-portal
@@ -389,13 +390,13 @@ h3 Table
               td name-3
               td Nov 5, 2020 10:15 AM
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal-tabs
+    ul.chi-tabs#example-portal-table
       li.-disabled
-        a(href=`#webcomponent-portal-tabs`) Web Component
+        a(href=`#webcomponent-portal-table`) Web Component
       li.-active
-        a(href=`#html-portal-tabs`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal-tabs
-  .chi-tabs-panel.-active#html-portal-tabs
+        a(href=`#html-portal-table`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-table
+  .chi-tabs-panel.-active#html-portal-table
     :code(lang="html")
       <div class="chi-card -portal">
         <div class="chi-card__header -sm">
@@ -469,13 +470,13 @@ h3 Table + tabs
               td name-3
               td Nov 5, 2020 10:15 AM
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal-tabs
+    ul.chi-tabs#example-portal-table-tabs
       li.-disabled
-        a(href=`#webcomponent-portal-tabs`) Web Component
+        a(href=`#webcomponent-portal-table-tabs`) Web Component
       li.-active
-        a(href=`#html-portal-tabs`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal-tabs
-  .chi-tabs-panel.-active#html-portal-tabs
+        a(href=`#html-portal-table-tabs`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-table-tabs
+  .chi-tabs-panel.-active#html-portal-table-tabs
     :code(lang="html")
       <div class="chi-card -portal">
         <div class="chi-card__tabs">
@@ -522,6 +523,165 @@ h3 Table + tabs
         </div>
       </div>
 
+h2 Data table
+.example.-mb--3
+  .-p--3
+    .chi-card.-portal.-bg--white.-bg-md--grey-15
+      .chi-card__header.-sm
+        .chi-card__title Title
+      .chi-card__content.-p--0
+        .chi-data-table.-portal.-compact
+          .chi-data-table__head
+            .chi-data-table__row
+              .chi-data-table__cell
+                div Name
+              .chi-data-table__cell
+                div ID
+              .chi-data-table__cell
+                div Last Login
+          .chi-data-table__body
+            .chi-data-table__row
+              .chi-data-table__cell.-key.-bold
+                div Name 1
+              .chi-data-table__cell.-key
+                div name-1
+              .chi-data-table__cell
+                div Dec 18, 2020 3:26 PM
+            .chi-data-table__row
+              .chi-data-table__cell.-key.-bold
+                div Name 2
+              .chi-data-table__cell.-key
+                div name-2
+              .chi-data-table__cell
+                div Dec 18, 2020 2:38 AM
+            .chi-data-table__row
+              .chi-data-table__cell.-key.-bold
+                div Name 3
+              .chi-data-table__cell.-key
+                div name-3
+              .chi-data-table__cell
+                div Nov 5, 2020 10:15 AM
+          .chi-data-table__footer
+            nav.chi-pagination.-compact(role='navigation', aria-label='Pagination')
+              .chi-pagination__content
+                .chi-pagination__start
+                  .chi-pagination__results
+                    span.chi-pagination__label 240 Results
+                .chi-pagination__center
+                  .chi-pagination__button-group.chi-button-group
+                    a(class=`chi-button -icon -flat -sm`, href='#', aria-label='Previous page')
+                      .chi-button__content
+                        i(class="chi-icon icon-chevron-left", aria-hidden='true')
+                  .chi-pagination__label
+                    strong 2
+                    span of
+                    strong 3
+                  .chi-pagination__button-group.chi-button-group
+                    a(class=`chi-button -icon -flat -sm`, href='#', aria-label='Next page')
+                      .chi-button__content
+                        i(class="chi-icon icon-chevron-right", aria-hidden='true')
+                .chi-pagination__end
+
+  .example-tabs.-pl--2
+    ul.chi-tabs#example-portal-data-table
+      li.-disabled
+        a(href=`#webcomponent-portal-data-table`) Web Component
+      li.-active
+        a(href=`#html-portal-data-table`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-data-table
+  .chi-tabs-panel.-active#html-portal-data-table
+    :code(lang='html')
+      <div class="chi-card -portal -bg--white -bg-md--grey-15">
+        <div class="chi-card__header -sm">
+          <div class="chi-card__title">Title</div>
+        </div>
+        <div class="chi-card__content -p--0">
+          <div class="chi-data-table -portal -compact">
+            <div class="chi-data-table__head">
+              <div class="chi-data-table__row">
+                <div class="chi-data-table__cell">
+                  <div>Name</div>
+                </div>
+                <div class="chi-data-table__cell">
+                  <div>ID</div>
+                </div>
+                <div class="chi-data-table__cell">
+                  <div>Last Login</div>
+                </div>
+              </div>
+            </div>
+            <div class="chi-data-table__body">
+              <div class="chi-data-table__row">
+                <div class="chi-data-table__cell -key -bold">
+                  <div>Name 1</div>
+                </div>
+                <div class="chi-data-table__cell -key">
+                  <div>name-1</div>
+                </div>
+                <div class="chi-data-table__cell">
+                  <div>Dec 18, 2020 3:26 PM</div>
+                </div>
+              </div>
+              <div class="chi-data-table__row">
+                <div class="chi-data-table__cell -key -bold">
+                  <div>Name 2</div>
+                </div>
+                <div class="chi-data-table__cell -key">
+                  <div>name-2</div>
+                </div>
+                <div class="chi-data-table__cell">
+                  <div>Dec 18, 2020 2:38 AM</div>
+                </div>
+              </div>
+              <div class="chi-data-table__row">
+                <div class="chi-data-table__cell -key -bold">
+                  <div>Name 3</div>
+                </div>
+                <div class="chi-data-table__cell -key">
+                  <div>name-3</div>
+                </div>
+                <div class="chi-data-table__cell">
+                  <div>Nov 5, 2020 10:15 AM</div>
+                </div>
+              </div>
+            </div>
+            <div class="chi-data-table__footer">
+              <nav class="chi-pagination -compact" role="navigation" aria-label="Pagination">
+                <div class="chi-pagination__content">
+                  <div class="chi-pagination__start">
+                    <div class="chi-pagination__results">
+                      <span class="chi-pagination__label">240 Results</span>
+                    </div>
+                  </div>
+                  <div class="chi-pagination__center">
+                    <div class="chi-pagination__button-group chi-button-group">
+                      <a class="chi-button -icon -flat -sm" href="#" aria-label="Previous page">
+                        <div class="chi-button__content">
+                          <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
+                        </div>
+                      </a>
+                    </div>
+                    <div class="chi-pagination__label">
+                      <strong>2</strong>
+                      <span>of</span>
+                      <strong>3</strong>
+                    </div>
+                    <div class="chi-pagination__button-group chi-button-group">
+                      <a class="chi-button -icon -flat -sm" href="#" aria-label="Next page">
+                        <div class="chi-button__content">
+                          <i class="chi-icon icon-chevron-right" aria-hidden="true"></i>
+                        </div>
+                      </a>
+                    </div>
+                  </div>
+                  <div class="chi-pagination__end"></div>
+                </div>
+              </nav>
+            </div>
+          </div>
+        </div>
+      </div>
+
 h2 Stat
 h3 Compact
 p.-text
@@ -899,13 +1059,13 @@ h3 Base
               .chi-stat-submetric__title
                 | Planned
   .example-tabs.-pl--2
-    ul.chi-tabs#example-base
+    ul.chi-tabs#example-portal-stat
       li.-disabled
-        a(href=`#webcomponent-base`) Web Component
+        a(href=`#webcomponent-portal-stat`) Web Component
       li.-active
-        a(href=`#html-base`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-base
-  .chi-tabs-panel.-active#html-base
+        a(href=`#html-portal-stat`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-stat
+  .chi-tabs-panel.-active#html-portal-stat
     :code(lang="html")
       <div class="chi-grid">
         <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
@@ -1011,13 +1171,13 @@ h3 Stat with Background Icons
             .chi-stat-background-icon
               i.chi-icon.icon-mail
   .example-tabs.-pl--2
-    ul.chi-tabs#example-base
+    ul.chi-tabs#example-portal-stat-icons
       li.-disabled
-        a(href=`#webcomponent-base`) Web Component
+        a(href=`#webcomponent-portal-stat-icons`) Web Component
       li.-active
-        a(href=`#html-base`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-base
-  .chi-tabs-panel.-active#html-base
+        a(href=`#html-portal-stat-icons`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-stat-icons
+  .chi-tabs-panel.-active#html-portal-stat-icons
     :code(lang="html")
       <div class="chi-grid">
         <div class="chi-col -w--6 -w-lg--3 -pb--2 -pb-lg--0">
@@ -1074,7 +1234,7 @@ h3 Stat with Background Icons
         </div>
       </div>
 
-h2 Portal
+h2 Modal
 h3 Base
 .example.-mb--3
   .chi-backdrop.-p--6.-position--relative.-z--0
@@ -1090,13 +1250,13 @@ h3 Base
         footer.chi-modal__footer
           button.chi-button.-primary.-lg.-text--uppercase Button
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal
+    ul.chi-tabs#example-portal-modal
       li.-disabled
-        a(href=`#webcomponent-portal`) Web Component
+        a(href=`#webcomponent-portal-modal`) Web Component
       li.-active
-        a(href=`#html-portal`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal
-  .chi-tabs-panel.-active#html-portal
+        a(href=`#html-portal-modal`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-modal
+  .chi-tabs-panel.-active#html-portal-modal
     .chi-tab__description
       span.-text--grey
         | This HTML Blueprint requires JavaScript.
@@ -1104,14 +1264,14 @@ h3 Base
         | <a href="../../getting-started/installation">Chi.js</a>.
     :code(lang="html")
       <!-- Trigger -->
-      <button id="modal-trigger-10" class="chi-button chi-modal__trigger" data-target="#modal-10">
+      <button id="modal-trigger-base" class="chi-button chi-modal__trigger" data-target="#modal-base">
         Launch portal modal
       </button>
 
       <!-- Modal -->
       <div class="chi-backdrop -closed">
         <div class="chi-backdrop__wrapper">
-          <section id="modal-10" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
+          <section id="modal-base" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
             <header class="chi-modal__header">
               <h2 class="chi-modal__title">Modal Title</h2>
               <button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
@@ -1131,7 +1291,7 @@ h3 Base
       </div>
 
       <!-- JavaScript -->
-      <script>chi.modal(document.getElementById('modal-trigger-10'));</script>
+      <script>chi.modal(document.getElementById('modal-trigger-base'));</script>
 
 h3 Alert
 .example.-mb--3
@@ -1154,13 +1314,13 @@ h3 Alert
         footer.chi-modal__footer
           button.chi-button.-primary.-lg.-text--uppercase.-px--4 Button
   .example-tabs.-pl--2
-    ul.chi-tabs#example-portal
+    ul.chi-tabs#example-portal-modal-alert
       li.-disabled
-        a(href=`#webcomponent-portal`) Web Component
+        a(href=`#webcomponent-portal-modal-alert`) Web Component
       li.-active
-        a(href=`#html-portal`) HTML Blueprint
-  .chi-tabs-panel#webcomponent-portal
-  .chi-tabs-panel.-active#html-portal
+        a(href=`#html-portal-modal-alert`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-modal-alert
+  .chi-tabs-panel.-active#html-portal-modal-alert
     .chi-tab__description
       span.-text--grey
         | This HTML Blueprint requires JavaScript.
@@ -1168,14 +1328,14 @@ h3 Alert
         | <a href="../../getting-started/installation">Chi.js</a>.
     :code(lang="html")
       <!-- Trigger -->
-      <button id="modal-trigger-11" class="chi-button chi-modal__trigger" data-target="#modal-11">
+      <button id="modal-trigger-alert" class="chi-button chi-modal__trigger" data-target="#modal-alert">
         Launch portal alert modal
       </button>
 
       <!-- Modal -->
       <div class="chi-backdrop -closed">
         <div class="chi-backdrop__wrapper">
-          <section id="modal-11" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
+          <section id="modal-alert" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
             <header class="chi-modal__header">
               <h2 class="chi-modal__title">Alert Modal Title</h2>
               <button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
@@ -1201,7 +1361,153 @@ h3 Alert
       </div>
 
       <!-- JavaScript -->
-      <script>chi.modal(document.getElementById('modal-trigger-11'));</script>
+      <script>chi.modal(document.getElementById('modal-trigger-alert'));</script>
+
+h2 Drawer
+.example.-mb--3(style='overflow:hidden;')
+  .-position--relative.-z--0(style="height:30rem;overflow:hidden;")
+    .chi-backdrop.-position--absolute
+      .chi-backdrop__wrapper
+        #drawer-23.chi-drawer.-bottom.-portal.-active.-position--absolute
+          .chi-drawer__header
+            span.chi-drawer__title
+              | Drawer title here
+            button.chi-button.-icon.-close(aria-label='Close')
+              .chi-button__content
+                i.chi-icon.icon-x
+          .chi-drawer__content
+            .-p--2.-text Drawer content here
+  .example-tabs.-pl--2
+    ul.chi-tabs#example-portal-drawer
+      li.-disabled
+        a(href=`#webcomponent-portal-drawer`) Web Component
+      li.-active
+        a(href=`#html-portal-drawer`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-drawer
+  .chi-tabs-panel.-active#html-portal-drawer
+    .chi-tab__description
+      span.-text--grey
+        | This HTML Blueprint requires JavaScript.
+        | You may use your own solution, or use Chi's vanilla JavaScript solution,
+        | <a href="../../getting-started/installation">Chi.js</a>.
+    :code(lang="html")
+      <!-- Trigger -->
+      <button id="drawer-trigger" class="chi-button -primary chi-drawer__trigger" data-target="#drawer">Launch demo drawer</button>
+
+      <!-- Drawer -->
+      <div class="chi-backdrop -closed">
+        <div class="chi-backdrop__wrapper">
+          <div id="drawer" class="chi-drawer -bottom -portal">
+            <div class="chi-drawer__header">
+              <span class="chi-drawer__title">
+                Drawer title here
+              </span>
+              <button class="chi-button -icon -close" aria-label="Close">
+                <div class="chi-button__content">
+                  <i class="chi-icon icon-x"></i>
+                </div>
+              </button>
+            </div>
+            <div class="chi-drawer__content">
+              <div class="-p--2 -text">Drawer content here</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- JavaScript -->
+      <script>chi.drawer(document.getElementById('drawer-trigger'));</script>
+
+h2 Accordion
+.example.-mb--3
+  .-p--3
+    .chi-accordion.-portal#example-portal
+      .chi-accordion__item
+        button.chi-accordion__trigger
+          .chi-accordion__title
+            | Accordion 1
+          i.chi-icon.icon-chevron-down
+        .chi-accordion__content
+          p.chi-accordion__text Content goes here
+      .chi-accordion__item.-expanded
+        button.chi-accordion__trigger
+          .chi-accordion__title
+            | Accordion 2
+          i.chi-icon.icon-chevron-down
+        .chi-accordion__content
+          p.chi-accordion__text Content goes here
+      .chi-accordion__item
+        button.chi-accordion__trigger
+          .chi-accordion__title
+            | Accordion 3
+          i.chi-icon.icon-chevron-down
+        .chi-accordion__content
+          p.chi-accordion__text Content goes here
+      .chi-accordion__item
+        button.chi-accordion__trigger
+          .chi-accordion__title
+           | Accordion 4
+          i.chi-icon.icon-chevron-down
+        .chi-accordion__content
+          p.chi-accordion__text Content goes here
+  .example-tabs.-pl--2
+    ul.chi-tabs#example-portal-accordion
+      li.-disabled
+        a(href=`#webcomponent-portal-accordion`) Web Component
+      li.-active
+        a(href=`#html-portal-accordion`) HTML Blueprint
+  .chi-tabs-panel#webcomponent-portal-accordion
+  .chi-tabs-panel.-active#html-portal-accordion
+    .chi-tab__description
+      span.-text--grey
+        | This HTML Blueprint requires JavaScript.
+        | You may use your own solution, or use Chi's vanilla JavaScript solution,
+        | <a href="../../getting-started/installation">Chi.js</a>.
+    :code(lang="html")
+      <div class="chi-accordion -portal" id="example-portal">
+        <div class="chi-accordion__item">
+          <button class="chi-accordion__trigger">
+            <div class="chi-accordion__title">Accordion 1</div>
+            <i class="chi-icon icon-chevron-down"></i>
+          </button>
+          <div class="chi-accordion__content">
+            <p class="chi-accordion__text">Content goes here</p>
+          </div>
+        </div>
+        <div class="chi-accordion__item -expanded">
+          <button class="chi-accordion__trigger">
+            <div class="chi-accordion__title">Accordion 2</div>
+            <i class="chi-icon icon-chevron-down"></i>
+          </button>
+          <div class="chi-accordion__content">
+            <p class="chi-accordion__text">Content goes here</p>
+          </div>
+        </div>
+        <div class="chi-accordion__item">
+          <button class="chi-accordion__trigger">
+            <div class="chi-accordion__title">Accordion 3</div>
+            <i class="chi-icon icon-chevron-down"></i>
+          </button>
+          <div class="chi-accordion__content">
+            <p class="chi-accordion__text">Content goes here</p>
+          </div>
+        </div>
+        <div class="chi-accordion__item">
+          <button class="chi-accordion__trigger">
+            <div class="chi-accordion__title">Accordion 4</div>
+            <i class="chi-icon icon-chevron-down"></i>
+          </button>
+          <div class="chi-accordion__content">
+            <p class="chi-accordion__text">Content goes here</p>
+          </div>
+        </div>
+      </div>
+
+      <script>
+        const accordionPortal = document.getElementById('example-portal');
+
+        chi.accordion(accordionPortal);
+      </script>
 
 script.
   document.addEventListener(