diff --git a/docs/cyp/layout/section.html b/docs/cyp/layout/section.html
new file mode 100644
index 00000000..11b473bb
--- /dev/null
+++ b/docs/cyp/layout/section.html
@@ -0,0 +1,8 @@
+---
+layout: cypress
+title: Layout/Section
+---
+
+<section id="section" class="section"></section>
+<section id="section-medium" class="section is-medium"></section>
+<section id="section-large" class="section is-large"></section>
diff --git a/docs/cypress/integration/layout/section.spec.js b/docs/cypress/integration/layout/section.spec.js
new file mode 100644
index 00000000..7cce873d
--- /dev/null
+++ b/docs/cypress/integration/layout/section.spec.js
@@ -0,0 +1,40 @@
+import { setMobile, setDesktop } from "../utils";
+
+describe("Layout/Section", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/section/");
+    setDesktop();
+  });
+
+  it("has a Section", () => {
+    cy.get(".section").should("exist");
+  });
+
+  it("has a correct Section", () => {
+    cy.get("#section").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("48px");
+    });
+
+    setMobile();
+
+    cy.get("#section").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("48px 24px");
+    });
+  });
+
+  it("has a correct medium Section", () => {
+    cy.get("#section-medium").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("144px 72px");
+    });
+  });
+
+  it("has a correct large Section", () => {
+    cy.get("#section-large").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("288px 96px");
+    });
+  });
+});