diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 6e8180bf76..de7b02c767 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -24,6 +24,7 @@ export * from "./popover";
 export * from "./progress";
 export * from "./radio-button";
 export * from "./search";
+export * from "./section";
 export * from "./select";
 export * from "./table";
 export * from "./tabs";
diff --git a/libs/components/src/section/index.ts b/libs/components/src/section/index.ts
new file mode 100644
index 0000000000..ea2aa32a22
--- /dev/null
+++ b/libs/components/src/section/index.ts
@@ -0,0 +1 @@
+export * from "./section.component";
diff --git a/libs/components/src/section/section.component.ts b/libs/components/src/section/section.component.ts
new file mode 100644
index 0000000000..a681dcf7d9
--- /dev/null
+++ b/libs/components/src/section/section.component.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "bit-section",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <section class="tw-mb-12">
+      <ng-content></ng-content>
+    </section>
+  `,
+})
+export class SectionComponent {}
diff --git a/libs/components/src/section/section.stories.ts b/libs/components/src/section/section.stories.ts
new file mode 100644
index 0000000000..fb9948e9be
--- /dev/null
+++ b/libs/components/src/section/section.stories.ts
@@ -0,0 +1,35 @@
+import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+
+import { TypographyModule } from "../typography";
+
+import { SectionComponent } from "./section.component";
+
+export default {
+  title: "Component Library/Section",
+  component: SectionComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TypographyModule],
+    }),
+    componentWrapperDecorator((story) => `<div class="tw-text-main">${story}</div>`),
+  ],
+} as Meta;
+
+type Story = StoryObj<SectionComponent>;
+
+/** Sections are simple containers that apply a bottom margin. They often contain a heading. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+        <bit-section>
+            <h2 bitTypography="h2">Foo</h2>
+            <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+        </bit-section>
+        <bit-section>
+            <h2 bitTypography="h2">Bar</h2>
+            <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+        </bit-section>
+    `,
+  }),
+};