diff --git a/docs/api/content.md b/docs/api/content.md
index add18a8e3f6..8838a16786b 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -1,13 +1,6 @@
 ---
 title: "ion-content"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/content/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import TOCInline from '@theme/TOCInline';
-
 import Props from '@site/static/auto-generated/content/props.md';
 import Events from '@site/static/auto-generated/content/events.md';
 import Methods from '@site/static/auto-generated/content/methods.md';
@@ -24,14 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<TOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-/>
-
-
 
 The content component provides an easy to use content area with some useful methods
 to control the scrollable area. There should only be one content in a single
@@ -40,204 +25,117 @@ view.
 Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
 
 
-## Fixed Content
+## Basic Usage
 
-In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+import Basic from '@site/static/usage/content/basic/index.md';
 
-## Interfaces
+<Basic />
 
-### ScrollBaseDetail
 
-```typescript
-interface ScrollBaseDetail {
-  isScrolling: boolean;
-}
-```
+## Header & Footer
 
-### ScrollDetail
+Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height.
 
-```typescript
-interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
-  scrollTop: number;
-  scrollLeft: number;
-}
-```
-
-### ScrollBaseCustomEvent 
+import HeaderFooter from '@site/static/usage/content/header-footer/index.md';
 
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
-
-```typescript
-interface ScrollBaseCustomEvent extends CustomEvent {
-  detail: ScrollBaseDetail;
-  target: HTMLIonContentElement;
-}
-```
-
-### ScrollCustomEvent 
-
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event.
-
-```typescript
-interface ScrollCustomEvent extends ScrollBaseCustomEvent {
-  detail: ScrollDetail;
-}
-```
+<HeaderFooter />
 
 
+## Fullscreen Content
 
+By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`.
 
-## Usage
+import Fullscreen from '@site/static/usage/content/fullscreen/index.md';
 
-<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
+<Fullscreen />
 
-<TabItem value="angular">
 
-```html
-<ion-content
-  [scrollEvents]="true"
-  (ionScrollStart)="logScrollStart()"
-  (ionScroll)="logScrolling($event)"
-  (ionScrollEnd)="logScrollEnd()">
-    <h1>Main Content</h1>
+## Fixed Content
 
-    <div slot="fixed">
-      <h1>Fixed Content</h1>
-    </div>
-</ion-content>
-```
+To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties.
 
+import Fixed from '@site/static/usage/content/fixed/index.md';
 
+<Fixed />
 
-</TabItem>
+## Scroll Methods
 
+Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position.
 
-<TabItem value="javascript">
+import ScrollMethods from '@site/static/usage/content/scroll-methods/index.md';
 
-```html
-<ion-content>
-  <h1>Main Content</h1>
+<ScrollMethods />
 
-  <div slot="fixed">
-    <h1>Fixed Content</h1>
-  </div>
-</ion-content>
-```
+## Scroll Events
 
-```javascript
-var content = document.querySelector('ion-content');
-content.scrollEvents = true;
-content.addEventListener('ionScrollStart', () => console.log('scroll start'));
-content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
-content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
-```
+Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events).
 
+import ScrollEvents from '@site/static/usage/content/scroll-events/index.md';
 
-</TabItem>
+<ScrollEvents />
 
 
-<TabItem value="react">
+## Theming
 
-```tsx
-import React from 'react';
-import { IonContent } from '@ionic/react';
+### Colors
 
-const ContentExample: React.FC = () => (
-  <IonContent
-    scrollEvents={true}
-    onIonScrollStart={() => {}}
-    onIonScroll={() => {}}
-    onIonScrollEnd={() => {}}>
-      <h1>Main Content</h1>
+import Colors from '@site/static/usage/content/theming/colors/index.md';
 
-      <div slot="fixed">
-        <h1>Fixed Content</h1>
-      </div>
-  </IonContent>
-);
-```
+<Colors />
 
+### CSS Shadow Parts
 
-</TabItem>
+import CSSParts from '@site/static/usage/content/theming/css-shadow-parts/index.md';
 
+<CSSParts />
 
-<TabItem value="stencil">
+### CSS Custom Properties
 
-```tsx
-import { Component, h } from '@stencil/core';
+import CSSProps from '@site/static/usage/content/theming/css-properties/index.md';
 
-@Component({
-  tag: 'content-example',
-  styleUrl: 'content-example.css'
-})
-export class ContentExample {
-  logScrollStart() {
-    console.log('Scroll start');
-  }
+<CSSProps />
 
-  logScrolling(ev) {
-    console.log('Scrolling', ev);
-  }
 
-  logScrollEnd() {
-    console.log('Scroll end');
-  }
+## Interfaces
 
-  render() {
-    return [
-      <ion-content
-        scrollEvents={true}
-        onIonScrollStart={() => this.logScrollStart()}
-        onIonScroll={(ev) => this.logScrolling(ev)}
-        onIonScrollEnd={() => this.logScrollEnd()}>
-          <h1>Main Content</h1>
+### ScrollBaseDetail
 
-          <div slot="fixed">
-            <h1>Fixed Content</h1>
-          </div>
-      </ion-content>
-    ];
-  }
+```typescript
+interface ScrollBaseDetail {
+  isScrolling: boolean;
 }
 ```
 
+### ScrollDetail
 
-</TabItem>
-
-
-<TabItem value="vue">
-
-```html
-<template>
-  <ion-content
-    :scroll-events="true"
-    @ionScrollStart="logScrollStart()"
-    @ionScroll="logScrolling($event)"
-    @ionScrollEnd="logScrollEnd()">
-      <h1>Main Content</h1>
-
-      <div slot="fixed">
-        <h1>Fixed Content</h1>
-      </div>
-  </ion-content>
-</template>
+```typescript
+interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+  scrollTop: number;
+  scrollLeft: number;
+}
+```
 
-<script>
-import { IonContent } from '@ionic/vue';
-import { defineComponent } from 'vue';
+### ScrollBaseCustomEvent
 
-export default defineComponent({
-  components: { IonContent }
-});
-</script>
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
 
+```typescript
+interface ScrollBaseCustomEvent extends CustomEvent {
+  detail: ScrollBaseDetail;
+  target: HTMLIonContentElement;
+}
 ```
 
+### ScrollCustomEvent
 
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event.
 
-</TabItem>
+```typescript
+interface ScrollCustomEvent extends ScrollBaseCustomEvent {
+  detail: ScrollDetail;
+}
+```
 
-</Tabs>
 
 ## Properties
 <Props />
@@ -255,4 +153,4 @@ export default defineComponent({
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/content/basic/angular.md b/static/usage/content/basic/angular.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/content/basic/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/content/basic/demo.html b/static/usage/content/basic/demo.html
new file mode 100644
index 00000000000..ea44b3903b0
--- /dev/null
+++ b/static/usage/content/basic/demo.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/basic/index.md b/static/usage/content/basic/index.md
new file mode 100644
index 00000000000..ab1c88ac36d
--- /dev/null
+++ b/static/usage/content/basic/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/content/basic/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/basic/javascript.md b/static/usage/content/basic/javascript.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/content/basic/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/content/basic/react.md b/static/usage/content/basic/react.md
new file mode 100644
index 00000000000..2ece824eea4
--- /dev/null
+++ b/static/usage/content/basic/react.md
@@ -0,0 +1,20 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/basic/vue.md b/static/usage/content/basic/vue.md
new file mode 100644
index 00000000000..84e2e35470e
--- /dev/null
+++ b/static/usage/content/basic/vue.md
@@ -0,0 +1,23 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+```
diff --git a/static/usage/content/fixed/angular.md b/static/usage/content/fixed/angular.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/content/fixed/angular.md
@@ -0,0 +1,14 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+  <ion-button>Normal Button</ion-button>
+  <ion-button slot="fixed">Fixed Button</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+```
diff --git a/static/usage/content/fixed/angular/example_component_css.md b/static/usage/content/fixed/angular/example_component_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/content/fixed/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+  top: 50%;
+  right: 20px;
+}
+```
diff --git a/static/usage/content/fixed/angular/example_component_html.md b/static/usage/content/fixed/angular/example_component_html.md
new file mode 100644
index 00000000000..178d8338f25
--- /dev/null
+++ b/static/usage/content/fixed/angular/example_component_html.md
@@ -0,0 +1,14 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+  <ion-button>Normal Button</ion-button>
+  <ion-button slot="fixed">Fixed Button</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+```
diff --git a/static/usage/content/fixed/demo.html b/static/usage/content/fixed/demo.html
new file mode 100644
index 00000000000..7b791156020
--- /dev/null
+++ b/static/usage/content/fixed/demo.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-button[slot="fixed"] {
+      top: 50%;
+      right: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <ion-button>Normal Button</ion-button>
+      <ion-button slot="fixed">Fixed Button</ion-button>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/fixed/index.md b/static/usage/content/fixed/index.md
new file mode 100644
index 00000000000..9c3d34deb6e
--- /dev/null
+++ b/static/usage/content/fixed/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/content/fixed/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/fixed/javascript.md b/static/usage/content/fixed/javascript.md
new file mode 100644
index 00000000000..2a577f1d76a
--- /dev/null
+++ b/static/usage/content/fixed/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+  <ion-button>Normal Button</ion-button>
+  <ion-button slot="fixed">Fixed Button</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+
+<style>
+  ion-button[slot="fixed"] {
+    top: 50%;
+    right: 20px;
+  }
+</style>
+```
diff --git a/static/usage/content/fixed/react.md b/static/usage/content/fixed/react.md
new file mode 100644
index 00000000000..d8e115e5491
--- /dev/null
+++ b/static/usage/content/fixed/react.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <IonButton>Normal Button</IonButton>
+      <IonButton slot="fixed">Fixed Button</IonButton>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/fixed/react/main_css.md b/static/usage/content/fixed/react/main_css.md
new file mode 100644
index 00000000000..e5931e4d94f
--- /dev/null
+++ b/static/usage/content/fixed/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-button[slot="fixed"] {
+  top: 50%;
+  right: 20px;
+}
+```
diff --git a/static/usage/content/fixed/react/main_tsx.md b/static/usage/content/fixed/react/main_tsx.md
new file mode 100644
index 00000000000..542f79deeb8
--- /dev/null
+++ b/static/usage/content/fixed/react/main_tsx.md
@@ -0,0 +1,24 @@
+```tsx
+import React from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+      <IonButton>Normal Button</IonButton>
+      <IonButton slot="fixed">Fixed Button</IonButton>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/fixed/vue.md b/static/usage/content/fixed/vue.md
new file mode 100644
index 00000000000..2c44fd0b289
--- /dev/null
+++ b/static/usage/content/fixed/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Scroll the content and notice that the fixed button does not scroll.</h1>
+
+    <ion-button>Normal Button</ion-button>
+    <ion-button slot="fixed">Fixed Button</ion-button>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent },
+  });
+</script>
+
+<style scoped>
+  ion-button[slot="fixed"] {
+    top: 50%;
+    right: 20px;
+  }
+</style>
+```
diff --git a/static/usage/content/fullscreen/angular/example_component_css.md b/static/usage/content/fullscreen/angular/example_component_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/content/fullscreen/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+  --opacity: .5
+}
+```
diff --git a/static/usage/content/fullscreen/angular/example_component_html.md b/static/usage/content/fullscreen/angular/example_component_html.md
new file mode 100644
index 00000000000..c5cf5a10dd9
--- /dev/null
+++ b/static/usage/content/fullscreen/angular/example_component_html.md
@@ -0,0 +1,25 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true" class="ion-padding">
+  <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/content/fullscreen/demo.html b/static/usage/content/fullscreen/demo.html
new file mode 100644
index 00000000000..5fd6f696dc7
--- /dev/null
+++ b/static/usage/content/fullscreen/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-toolbar {
+      --opacity: .5
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>
+          Header
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content fullscreen="true" class="ion-padding">
+      <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/fullscreen/index.md b/static/usage/content/fullscreen/index.md
new file mode 100644
index 00000000000..015ddad0a04
--- /dev/null
+++ b/static/usage/content/fullscreen/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/content/fullscreen/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/fullscreen/javascript.md b/static/usage/content/fullscreen/javascript.md
new file mode 100644
index 00000000000..f6011fa9b88
--- /dev/null
+++ b/static/usage/content/fullscreen/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content fullscreen="true" class="ion-padding">
+  <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+
+<style>
+  ion-toolbar {
+    --opacity: .5
+  }
+</style>
+```
diff --git a/static/usage/content/fullscreen/react/main_css.md b/static/usage/content/fullscreen/react/main_css.md
new file mode 100644
index 00000000000..a62d625ae0a
--- /dev/null
+++ b/static/usage/content/fullscreen/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-toolbar {
+  --opacity: .5
+}
+```
diff --git a/static/usage/content/fullscreen/react/main_tsx.md b/static/usage/content/fullscreen/react/main_tsx.md
new file mode 100644
index 00000000000..ca324631897
--- /dev/null
+++ b/static/usage/content/fullscreen/react/main_tsx.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            Header
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen={true} className="ion-padding">
+        <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+        <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+        <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+        <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+        <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>
+            Footer
+          </IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/fullscreen/vue.md b/static/usage/content/fullscreen/vue.md
new file mode 100644
index 00000000000..e4bd0c3a59f
--- /dev/null
+++ b/static/usage/content/fullscreen/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>
+        Header
+      </ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content :fullscreen="true" class="ion-padding">
+    <h1>Scroll the content and notice that the text goes behind the header and footer.</h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+  </ion-content>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>
+        Footer
+      </ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+
+<style scoped>
+  ion-toolbar {
+    --opacity: .5
+  }
+</style>
+```
diff --git a/static/usage/content/header-footer/angular.md b/static/usage/content/header-footer/angular.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/content/header-footer/angular.md
@@ -0,0 +1,26 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/content/header-footer/demo.html b/static/usage/content/header-footer/demo.html
new file mode 100644
index 00000000000..5dfee53b98c
--- /dev/null
+++ b/static/usage/content/header-footer/demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>
+          Header
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+    <ion-footer>
+      <ion-toolbar>
+        <ion-title>
+          Footer
+        </ion-title>
+      </ion-toolbar>
+    </ion-footer>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/header-footer/index.md b/static/usage/content/header-footer/index.md
new file mode 100644
index 00000000000..baca0fad424
--- /dev/null
+++ b/static/usage/content/header-footer/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/content/header-footer/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/header-footer/javascript.md b/static/usage/content/header-footer/javascript.md
new file mode 100644
index 00000000000..4a177d1d58f
--- /dev/null
+++ b/static/usage/content/header-footer/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-header>
+  <ion-toolbar>
+    <ion-title>
+      Header
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-title>
+      Footer
+    </ion-title>
+  </ion-toolbar>
+</ion-footer>
+```
diff --git a/static/usage/content/header-footer/react.md b/static/usage/content/header-footer/react.md
new file mode 100644
index 00000000000..4ffff834f2a
--- /dev/null
+++ b/static/usage/content/header-footer/react.md
@@ -0,0 +1,36 @@
+```tsx
+import React from 'react';
+import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            Header
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding">
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonTitle>
+            Footer
+          </IonTitle>
+        </IonToolbar>
+      </IonFooter>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/header-footer/vue.md b/static/usage/content/header-footer/vue.md
new file mode 100644
index 00000000000..8bd052a6460
--- /dev/null
+++ b/static/usage/content/header-footer/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>
+        Header
+      </ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-footer>
+    <ion-toolbar>
+      <ion-title>
+        Footer
+      </ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script lang="ts">
+  import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar },
+  });
+</script>
+```
diff --git a/static/usage/content/scroll-events/angular/example_component_html.md b/static/usage/content/scroll-events/angular/example_component_html.md
new file mode 100644
index 00000000000..a1c3aac558f
--- /dev/null
+++ b/static/usage/content/scroll-events/angular/example_component_html.md
@@ -0,0 +1,18 @@
+```html
+<!-- Scroll events are disabled by default for content for performance reasons, enable them to listen to them -->
+<!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
+<ion-content
+  [scrollEvents]="true"
+  (ionScrollStart)="handleScrollStart()"
+  (ionScroll)="handleScroll($any($event))"
+  (ionScrollEnd)="handleScrollEnd()"
+  class="ion-padding">
+  <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+```
diff --git a/static/usage/content/scroll-events/angular/example_component_ts.md b/static/usage/content/scroll-events/angular/example_component_ts.md
new file mode 100644
index 00000000000..7e3f7625f57
--- /dev/null
+++ b/static/usage/content/scroll-events/angular/example_component_ts.md
@@ -0,0 +1,22 @@
+```ts
+import { Component } from '@angular/core';
+import { ScrollDetail } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  handleScrollStart() {
+    console.log('scroll start');
+  }
+
+  handleScroll(ev: CustomEvent<ScrollDetail>) {
+    console.log('scroll', ev.detail);
+  }
+
+  handleScrollEnd() {
+    console.log('scroll end');
+  }
+}
+```
diff --git a/static/usage/content/scroll-events/demo.html b/static/usage/content/scroll-events/demo.html
new file mode 100644
index 00000000000..7527ed684f4
--- /dev/null
+++ b/static/usage/content/scroll-events/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const content = document.querySelector('ion-content');
+    // Scroll events are disabled by default for content for
+    // performance reasons, enable them to listen to them
+    content.scrollEvents = true;
+
+    content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+    content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+    content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/content/scroll-events/index.md b/static/usage/content/scroll-events/index.md
new file mode 100644
index 00000000000..abc114673be
--- /dev/null
+++ b/static/usage/content/scroll-events/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/content/scroll-events/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/scroll-events/javascript.md b/static/usage/content/scroll-events/javascript.md
new file mode 100644
index 00000000000..5cc4e537dd6
--- /dev/null
+++ b/static/usage/content/scroll-events/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+</ion-content>
+
+<script>
+  const content = document.querySelector('ion-content');
+  // Scroll events are disabled by default for content for
+  // performance reasons, enable them to listen to them
+  content.scrollEvents = true;
+
+  content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+  content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+  content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+</script>
+```
diff --git a/static/usage/content/scroll-events/react.md b/static/usage/content/scroll-events/react.md
new file mode 100644
index 00000000000..ce8ced69807
--- /dev/null
+++ b/static/usage/content/scroll-events/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React from 'react';
+import { IonContent, ScrollDetail } from '@ionic/react';
+
+function Example() {
+  function handleScrollStart() {
+    console.log('scroll start');
+  }
+
+  function handleScroll(ev: CustomEvent<ScrollDetail>) {
+    console.log('scroll', ev.detail);
+  }
+
+  function handleScrollEnd() {
+    console.log('scroll end');
+  }
+
+  return (
+    // Scroll events are disabled by default for content for performance reasons, enable them to listen to them
+    <IonContent
+      scrollEvents={true}
+      onIonScrollStart={handleScrollStart}
+      onIonScroll={handleScroll}
+      onIonScrollEnd={handleScrollEnd}
+      class="ion-padding">
+      <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/scroll-events/vue.md b/static/usage/content/scroll-events/vue.md
new file mode 100644
index 00000000000..2afdcf26682
--- /dev/null
+++ b/static/usage/content/scroll-events/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <!-- Scroll events are disabled by default for content for performance reasons, enable them to listen to them -->
+  <ion-content
+    :scroll-events="true"
+    @ionScrollStart="handleScrollStart()"
+    @ionScroll="handleScroll($event)"
+    @ionScrollEnd="handleScrollEnd()"
+    class="ion-padding">
+    <h1>Scroll to fire the scroll events and view them in the console.</h1>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+    methods: {
+      handleScrollStart() {
+        console.log('scroll start');
+      },
+      handleScroll(ev: CustomEvent) {
+        console.log('scroll', ev.detail);
+      },
+      handleScrollEnd() {
+        console.log('scroll end');
+      }
+    }
+  });
+</script>
+```
diff --git a/static/usage/content/scroll-methods/angular/example_component_html.md b/static/usage/content/scroll-methods/angular/example_component_html.md
new file mode 100644
index 00000000000..ffa8c913e3e
--- /dev/null
+++ b/static/usage/content/scroll-methods/angular/example_component_html.md
@@ -0,0 +1,15 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Click on the buttons to scroll the content.</h1>
+
+  <ion-button expand="block" (click)="scrollToBottom()">Scroll to Bottom</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+  <ion-button expand="block" (click)="scrollToTop()">Scroll to Top</ion-button>
+</ion-content>
+```
diff --git a/static/usage/content/scroll-methods/angular/example_component_ts.md b/static/usage/content/scroll-methods/angular/example_component_ts.md
new file mode 100644
index 00000000000..cd595635cd9
--- /dev/null
+++ b/static/usage/content/scroll-methods/angular/example_component_ts.md
@@ -0,0 +1,24 @@
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  @ViewChild(IonContent) content: IonContent;
+
+  scrollToBottom() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    this.content.scrollToBottom(500);
+  }
+
+  scrollToTop() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    this.content.scrollToTop(500);
+  }
+}
+```
diff --git a/static/usage/content/scroll-methods/demo.html b/static/usage/content/scroll-methods/demo.html
new file mode 100644
index 00000000000..c5983316135
--- /dev/null
+++ b/static/usage/content/scroll-methods/demo.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Click on the buttons to scroll the content.</h1>
+
+      <ion-button expand="block" onClick="scrollToBottom()">Scroll to Bottom</ion-button>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+      <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
+    </ion-content>
+  </ion-app>
+
+  <script>
+    const content = document.querySelector('ion-content');
+
+    function scrollToBottom() {
+      // Passing a duration to the method makes it so the scroll slowly
+      // goes to the bottom instead of instantly
+      content.scrollToBottom(500);
+    }
+
+    function scrollToTop() {
+      // Passing a duration to the method makes it so the scroll slowly
+      // goes to the bottom instead of instantly
+      content.scrollToTop(500);
+    }
+  </script>
+</body>
+
+</html>
diff --git a/static/usage/content/scroll-methods/index.md b/static/usage/content/scroll-methods/index.md
new file mode 100644
index 00000000000..e2768ef20cf
--- /dev/null
+++ b/static/usage/content/scroll-methods/index.md
@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import vue from './vue.md';
+import react from './react.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/content/scroll-methods/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/scroll-methods/javascript.md b/static/usage/content/scroll-methods/javascript.md
new file mode 100644
index 00000000000..81bf4ba4867
--- /dev/null
+++ b/static/usage/content/scroll-methods/javascript.md
@@ -0,0 +1,31 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Click on the buttons to scroll the content.</h1>
+
+  <ion-button expand="block" onClick="scrollToBottom()">Scroll to Bottom</ion-button>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+  <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+  <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+  <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+  <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+  <ion-button expand="block" onClick="scrollToTop()">Scroll to Top</ion-button>
+</ion-content>
+
+<script>
+  const content = document.querySelector('ion-content');
+
+  function scrollToBottom() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    content.scrollToBottom(500);
+  }
+
+  function scrollToTop() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    content.scrollToTop(500);
+  }
+</script>
+```
diff --git a/static/usage/content/scroll-methods/react.md b/static/usage/content/scroll-methods/react.md
new file mode 100644
index 00000000000..4d7799f6ab3
--- /dev/null
+++ b/static/usage/content/scroll-methods/react.md
@@ -0,0 +1,37 @@
+```tsx
+import React, { createRef } from 'react';
+import { IonButton, IonContent } from '@ionic/react';
+
+function Example() {
+  const contentRef = createRef<HTMLIonContentElement>();
+
+  function scrollToBottom() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    contentRef.current?.scrollToBottom(500);
+  }
+
+  function scrollToTop() {
+    // Passing a duration to the method makes it so the scroll slowly
+    // goes to the bottom instead of instantly
+    contentRef.current?.scrollToTop(500);
+  }
+
+  return (
+    <IonContent ref={contentRef} className="ion-padding">
+      <h1>Click on the buttons to scroll the content.</h1>
+
+      <IonButton expand="block" onClick={scrollToBottom}>Scroll to Bottom</IonButton>
+
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+      <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+      <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+      <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+      <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+      <IonButton expand="block" onClick={scrollToTop}>Scroll to Top</IonButton>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/scroll-methods/vue.md b/static/usage/content/scroll-methods/vue.md
new file mode 100644
index 00000000000..0dcfff9c7de
--- /dev/null
+++ b/static/usage/content/scroll-methods/vue.md
@@ -0,0 +1,34 @@
+```html
+<template>
+  <ion-content ref="content" class="ion-padding">
+    <h1>Click on the buttons to scroll the content.</h1>
+
+    <ion-button expand="block" @click="scrollToBottom()">Scroll to Bottom</ion-button>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.</p>
+    <p>Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique maximus.</p>
+    <p>Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae turpis.</p>
+    <p>Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris condimentum fermentum rutrum.</p>
+    <p>Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.</p>
+
+    <ion-button expand="block" @click="scrollToTop()">Scroll to Top</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonButton, IonContent },
+    methods: {
+      scrollToBottom() {
+        this.$refs.content.$el.scrollToBottom(500);
+      },
+      scrollToTop() {
+        this.$refs.content.$el.scrollToTop(500);
+      },
+    }
+  });
+</script>
+```
diff --git a/static/usage/content/theming/colors/angular.md b/static/usage/content/theming/colors/angular.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/content/theming/colors/angular.md
@@ -0,0 +1,38 @@
+```html
+<ion-content color="primary" class="ion-padding">
+  <h1>Primary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="secondary" class="ion-padding">
+  <h1>Secondary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="tertiary" class="ion-padding">
+  <h1>Tertiary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="success" class="ion-padding">
+  <h1>Success content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="warning" class="ion-padding">
+  <h1>Warning content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="danger" class="ion-padding">
+  <h1>Danger content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="light" class="ion-padding">
+  <h1>Light content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="medium" class="ion-padding">
+  <h1>Medium content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="dark" class="ion-padding">
+  <h1>Dark content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/content/theming/colors/demo.html b/static/usage/content/theming/colors/demo.html
new file mode 100644
index 00000000000..588dcd40212
--- /dev/null
+++ b/static/usage/content/theming/colors/demo.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+      align-content: center;
+    }
+
+    ion-content {
+      flex: 1 1 33%;
+      height: 250px;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <div class="container">
+      <ion-content color="primary" class="ion-padding">
+        <h1>Primary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="secondary" class="ion-padding">
+        <h1>Secondary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="tertiary" class="ion-padding">
+        <h1>Tertiary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="success" class="ion-padding">
+        <h1>Success content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="warning" class="ion-padding">
+        <h1>Warning content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="danger" class="ion-padding">
+        <h1>Danger content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="light" class="ion-padding">
+        <h1>Light content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="medium" class="ion-padding">
+        <h1>Medium content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+      <ion-content color="dark" class="ion-padding">
+        <h1>Dark content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </ion-content>
+    </div>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/theming/colors/index.md b/static/usage/content/theming/colors/index.md
new file mode 100644
index 00000000000..9418e4ac97e
--- /dev/null
+++ b/static/usage/content/theming/colors/index.md
@@ -0,0 +1,13 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  code={{ javascript, react, vue, angular }}
+  src="usage/content/theming/colors/demo.html"
+  includeIonContent={false}
+  size="xlarge"
+/>
diff --git a/static/usage/content/theming/colors/javascript.md b/static/usage/content/theming/colors/javascript.md
new file mode 100644
index 00000000000..4b2489b6dae
--- /dev/null
+++ b/static/usage/content/theming/colors/javascript.md
@@ -0,0 +1,38 @@
+```html
+<ion-content color="primary" class="ion-padding">
+  <h1>Primary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="secondary" class="ion-padding">
+  <h1>Secondary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="tertiary" class="ion-padding">
+  <h1>Tertiary content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="success" class="ion-padding">
+  <h1>Success content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="warning" class="ion-padding">
+  <h1>Warning content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="danger" class="ion-padding">
+  <h1>Danger content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="light" class="ion-padding">
+  <h1>Light content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="medium" class="ion-padding">
+  <h1>Medium content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+<ion-content color="dark" class="ion-padding">
+  <h1>Dark content</h1>
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/content/theming/colors/react.md b/static/usage/content/theming/colors/react.md
new file mode 100644
index 00000000000..5a24d44a829
--- /dev/null
+++ b/static/usage/content/theming/colors/react.md
@@ -0,0 +1,48 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+function Example() {
+  return (
+    <>
+      <IonContent color="primary" className="ion-padding">
+        <h1>Primary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="secondary" className="ion-padding">
+        <h1>Secondary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="tertiary" className="ion-padding">
+        <h1>Tertiary content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="success" className="ion-padding">
+        <h1>Success content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="warning" className="ion-padding">
+        <h1>Warning content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="danger" className="ion-padding">
+        <h1>Danger content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="light" className="ion-padding">
+        <h1>Light content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="medium" className="ion-padding">
+        <h1>Medium content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+      <IonContent color="dark" className="ion-padding">
+        <h1>Dark content</h1>
+        <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+      </IonContent>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/theming/colors/vue.md b/static/usage/content/theming/colors/vue.md
new file mode 100644
index 00000000000..1bbcc99834e
--- /dev/null
+++ b/static/usage/content/theming/colors/vue.md
@@ -0,0 +1,49 @@
+```html
+<template>
+  <ion-content color="primary" class="ion-padding">
+    <h1>Primary content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="secondary" class="ion-padding">
+    <h1>Secondary content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="tertiary" class="ion-padding">
+    <h1>Tertiary content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="success" class="ion-padding">
+    <h1>Success content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="warning" class="ion-padding">
+    <h1>Warning content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="danger" class="ion-padding">
+    <h1>Danger content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="light" class="ion-padding">
+    <h1>Light content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="medium" class="ion-padding">
+    <h1>Medium content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+  <ion-content color="dark" class="ion-padding">
+    <h1>Dark content</h1>
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+```
diff --git a/static/usage/content/theming/css-properties/angular/example_component_css.md b/static/usage/content/theming/css-properties/angular/example_component_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/content/theming/css-properties/angular/example_component_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+  --background: #d31373;
+  --color: #fff;
+}
+```
diff --git a/static/usage/content/theming/css-properties/angular/example_component_html.md b/static/usage/content/theming/css-properties/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/content/theming/css-properties/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/content/theming/css-properties/demo.html b/static/usage/content/theming/css-properties/demo.html
new file mode 100644
index 00000000000..4232d52adea
--- /dev/null
+++ b/static/usage/content/theming/css-properties/demo.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content {
+      --background: #d31373;
+      --color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/theming/css-properties/index.md b/static/usage/content/theming/css-properties/index.md
new file mode 100644
index 00000000000..1eb8c9d5a82
--- /dev/null
+++ b/static/usage/content/theming/css-properties/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/content/theming/css-properties/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/theming/css-properties/javascript.md b/static/usage/content/theming/css-properties/javascript.md
new file mode 100644
index 00000000000..2ad2211af87
--- /dev/null
+++ b/static/usage/content/theming/css-properties/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+
+<style>
+  ion-content {
+    --background: #d31373;
+    --color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/content/theming/css-properties/react/main_css.md b/static/usage/content/theming/css-properties/react/main_css.md
new file mode 100644
index 00000000000..be9b9d8063c
--- /dev/null
+++ b/static/usage/content/theming/css-properties/react/main_css.md
@@ -0,0 +1,6 @@
+```css
+ion-content {
+  --background: #d31373;
+  --color: #fff;
+}
+```
diff --git a/static/usage/content/theming/css-properties/react/main_tsx.md b/static/usage/content/theming/css-properties/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/content/theming/css-properties/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/theming/css-properties/vue.md b/static/usage/content/theming/css-properties/vue.md
new file mode 100644
index 00000000000..09322711dfd
--- /dev/null
+++ b/static/usage/content/theming/css-properties/vue.md
@@ -0,0 +1,30 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+
+<style scoped>
+  ion-content {
+    --background: #d31373;
+    --color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+  background: #d31373;
+}
+
+ion-content::part(scroll) {
+  color: #fff;
+}
+```
diff --git a/static/usage/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/content/theming/css-shadow-parts/angular/example_component_html.md
new file mode 100644
index 00000000000..31d6c7b092c
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/angular/example_component_html.md
@@ -0,0 +1,12 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+```
diff --git a/static/usage/content/theming/css-shadow-parts/demo.html b/static/usage/content/theming/css-shadow-parts/demo.html
new file mode 100644
index 00000000000..b1f06e8a099
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/demo.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Content</title>
+  <link rel="stylesheet" href="../../../common.css" />
+  <script src="../../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    ion-content::part(background) {
+      background: #d31373;
+    }
+
+    ion-content::part(scroll) {
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content class="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/content/theming/css-shadow-parts/index.md b/static/usage/content/theming/css-shadow-parts/index.md
new file mode 100644
index 00000000000..d64984aa9e8
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/content/theming/css-shadow-parts/demo.html"
+  includeIonContent={false}
+  devicePreview={true}
+/>
diff --git a/static/usage/content/theming/css-shadow-parts/javascript.md b/static/usage/content/theming/css-shadow-parts/javascript.md
new file mode 100644
index 00000000000..74124e4fdb3
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/javascript.md
@@ -0,0 +1,22 @@
+```html
+<ion-content class="ion-padding">
+  <h1>Heading 1</h1>
+  <h2>Heading 2</h2>
+  <h3>Heading 3</h3>
+  <h4>Heading 4</h4>
+  <h5>Heading 5</h5>
+  <h6>Heading 6</h6>
+
+  <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+</ion-content>
+
+<style>
+  ion-content::part(background) {
+    background: #d31373;
+  }
+
+  ion-content::part(scroll) {
+    color: #fff;
+  }
+</style>
+```
diff --git a/static/usage/content/theming/css-shadow-parts/react/main_css.md b/static/usage/content/theming/css-shadow-parts/react/main_css.md
new file mode 100644
index 00000000000..29c3d353879
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-content::part(background) {
+  background: #d31373;
+}
+
+ion-content::part(scroll) {
+  color: #fff;
+}
+```
diff --git a/static/usage/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/content/theming/css-shadow-parts/react/main_tsx.md
new file mode 100644
index 00000000000..33f0e53433b
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/react/main_tsx.md
@@ -0,0 +1,22 @@
+```tsx
+import React from 'react';
+import { IonContent } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonContent className="ion-padding">
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+
+      <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+    </IonContent>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/content/theming/css-shadow-parts/vue.md b/static/usage/content/theming/css-shadow-parts/vue.md
new file mode 100644
index 00000000000..129f3ec615a
--- /dev/null
+++ b/static/usage/content/theming/css-shadow-parts/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <p>Here's a small text description for the content. Nothing more, nothing less.</p>
+  </ion-content>
+</template>
+
+<script lang="ts">
+  import { IonContent } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonContent },
+  });
+</script>
+
+<style scoped>
+  ion-content::part(background) {
+    background: #d31373;
+  }
+
+  ion-content::part(scroll) {
+    color: #fff;
+  }
+</style>
+```