diff --git a/packages/angular/package.json b/packages/angular/package.json
index b1fdb76..5152fee 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/angular",
-  "version": "0.4.0+20",
+  "version": "0.4.0+21",
   "license": "MIT",
   "keywords": [
     "anywhere-ui",
@@ -66,5 +66,5 @@
     "tslint": "~6.1.3",
     "typescript": "4.9.5"
   },
-  "buildnum": "20"
+  "buildnum": "21"
 }
\ No newline at end of file
diff --git a/packages/angular/projects/anywhere-ui/package.json b/packages/angular/projects/anywhere-ui/package.json
index cd07c14..5fb19a1 100644
--- a/packages/angular/projects/anywhere-ui/package.json
+++ b/packages/angular/projects/anywhere-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/angular",
-  "version": "0.4.0+20",
+  "version": "0.4.0+21",
   "license": "MIT",
   "keywords": [
     "anywhere-ui",
@@ -33,5 +33,5 @@
     "@anywhere-ui/core": "^0.3.0",
     "@anywhere-ui/flex": "^1.0.2"
   },
-  "buildnum": "20"
+  "buildnum": "21"
 }
\ No newline at end of file
diff --git a/packages/core/package.json b/packages/core/package.json
index 1079f85..128c5fc 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anywhere-ui/core",
-  "version": "0.4.0+20",
+  "version": "0.4.0+21",
   "description": "Base components for AnywhereUI",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -85,5 +85,5 @@
     "build": "^0.1.4",
     "run": "^1.4.0"
   },
-  "buildnum": "20"
+  "buildnum": "21"
 }
\ No newline at end of file
diff --git a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-basic/checkbox-basic.tsx b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-basic/checkbox-basic.tsx
index 253b3dd..3c7d1d8 100644
--- a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-basic/checkbox-basic.tsx
+++ b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-basic/checkbox-basic.tsx
@@ -63,7 +63,7 @@ cb1.addEventListener("valueChange", (event) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               Binary checkbox is used as a controlled input with <i>checked</i>{" "}
diff --git a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-disabled/checkbox-disabled.tsx b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-disabled/checkbox-disabled.tsx
index 28e54fa..0560b6a 100644
--- a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-disabled/checkbox-disabled.tsx
+++ b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-disabled/checkbox-disabled.tsx
@@ -47,7 +47,7 @@ cb1.checked = false;
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               When disabled is present, the element cannot be edited and
diff --git a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-dynamic/checkbox-dynamic.tsx b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-dynamic/checkbox-dynamic.tsx
index 9708db1..48d2df4 100644
--- a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-dynamic/checkbox-dynamic.tsx
+++ b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-dynamic/checkbox-dynamic.tsx
@@ -103,7 +103,7 @@ categories.forEach((category) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>Checkboxes can be generated using a list of values.</p>
           </app-docsectiontext>
diff --git a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-group/checkbox-group.tsx b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-group/checkbox-group.tsx
index 302b238..92b2208 100644
--- a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-group/checkbox-group.tsx
+++ b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-group/checkbox-group.tsx
@@ -68,7 +68,7 @@ checkboxes.forEach((checkbox) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>Multiple checkboxes can be grouped together.</p>
           </app-docsectiontext>
diff --git a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-label/checkbox-label.tsx b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-label/checkbox-label.tsx
index 96710d2..c6e2165 100644
--- a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-label/checkbox-label.tsx
+++ b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-label/checkbox-label.tsx
@@ -65,7 +65,7 @@ checkboxes.forEach((checkbox) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               The label attribute provides a label text for the checkbox. This
diff --git a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-readonly/checkbox-readonly.tsx b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-readonly/checkbox-readonly.tsx
index c4f99c1..4ab8712 100644
--- a/packages/core/src/components/app-showcase/pages/checkbox/checkbox-readonly/checkbox-readonly.tsx
+++ b/packages/core/src/components/app-showcase/pages/checkbox/checkbox-readonly/checkbox-readonly.tsx
@@ -46,7 +46,7 @@ cb1.checked = false;
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               When disabled is present, the element cannot be edited and
diff --git a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-basic/dropdown-basic.tsx b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-basic/dropdown-basic.tsx
index 9569105..3bcc4f5 100644
--- a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-basic/dropdown-basic.tsx
+++ b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-basic/dropdown-basic.tsx
@@ -154,7 +154,7 @@ dropdownBasic.addEventListener("valueChange", (event) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               Dropdown is used as a controlled component with value property
diff --git a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-disabled/dropdown-disabled.tsx b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-disabled/dropdown-disabled.tsx
index c15a14f..5586058 100644
--- a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-disabled/dropdown-disabled.tsx
+++ b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-disabled/dropdown-disabled.tsx
@@ -153,7 +153,7 @@ dropdownDisabled.addEventListener("valueChange", (event) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               When disabled is present, the element cannot be edited and
diff --git a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-filter/dropdown-filter.tsx b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-filter/dropdown-filter.tsx
index c18edaf..d96b563 100644
--- a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-filter/dropdown-filter.tsx
+++ b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-filter/dropdown-filter.tsx
@@ -155,7 +155,7 @@ dropdownBasic.addEventListener("valueChange", (event) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               Dropdown provides built-in filtering that is enabled by adding the
diff --git a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-template/dropdown-template.tsx b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-template/dropdown-template.tsx
index 157bd8f..8b3a0cc 100644
--- a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-template/dropdown-template.tsx
+++ b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-template/dropdown-template.tsx
@@ -217,7 +217,7 @@ dropdownTemplate.addEventListener("valueChange", (event) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               Both the selected option and the options list can be templated to
diff --git a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-virtual-scroll/dropdown-virtual-scroll.tsx b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-virtual-scroll/dropdown-virtual-scroll.tsx
index ef5911a..5c50357 100644
--- a/packages/core/src/components/app-showcase/pages/dropdown/dropdown-virtual-scroll/dropdown-virtual-scroll.tsx
+++ b/packages/core/src/components/app-showcase/pages/dropdown/dropdown-virtual-scroll/dropdown-virtual-scroll.tsx
@@ -76,7 +76,7 @@ dropdownVirtual.addEventListener("valueChange", (event) => {
   render() {
     return (
       <Host>
-        <section>
+        <section class="py-4">
           <app-docsectiontext textTitle={this.textTitle} textId={this.textId}>
             <p>
               VirtualScrolling is an efficient way of rendering the options by
diff --git a/packages/core/src/doc/docs.json b/packages/core/src/doc/docs.json
index 2e3b457..18dfd24 100644
--- a/packages/core/src/doc/docs.json
+++ b/packages/core/src/doc/docs.json
@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-11-04T21:29:11",
+  "timestamp": "2023-11-04T22:29:13",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.6.0",
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
index aebf3dc..778d11f 100644
--- a/packages/core/src/index.html
+++ b/packages/core/src/index.html
@@ -111,7 +111,7 @@
       </div>
     </div>
     <div class="layout-footer">
-      <div class="layout-footer-left">AnywhereUI v<span id="any-ui-version">0.4.0+20</span> by <b>AdaleksTech</b></div>
+      <div class="layout-footer-left">AnywhereUI v<span id="any-ui-version">0.4.0+21</span> by <b>AdaleksTech</b></div>
       <div class="layout-footer-right">
         <a href="https://github.com/adaleks/anywhere-ui">
           <span class="iconify" data-icon="fa-brands:github" data-width="21" data-height="21"></span>
diff --git a/packages/react/package.json b/packages/react/package.json
index a186381..2e5a372 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@anywhere-ui/react",
   "sideEffects": false,
-  "version": "0.4.0+20",
+  "version": "0.4.0+21",
   "description": "AnywhereUI integration for React apps",
   "license": "MIT",
   "keywords": [
@@ -63,7 +63,7 @@
       "dist"
     ]
   },
-  "buildnum": "20",
+  "buildnum": "21",
   "dependencies": {
     "@anywhere-ui/core": "^0.1.1",
     "@anywhere-ui/flex": "^1.0.2"
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bc48ff5..cd46732 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@anywhere-ui/vue",
   "sideEffects": false,
-  "version": "0.4.0+20",
+  "version": "0.4.0+21",
   "description": "AnywhereUI integration for Vue apps.",
   "license": "MIT",
   "keywords": [
@@ -66,5 +66,5 @@
       "dist"
     ]
   },
-  "buildnum": "20"
+  "buildnum": "21"
 }
\ No newline at end of file