diff --git a/docs/cyp/layout/footer.html b/docs/cyp/layout/footer.html
new file mode 100644
index 00000000..c3098f6a
--- /dev/null
+++ b/docs/cyp/layout/footer.html
@@ -0,0 +1,14 @@
+---
+layout: cypress
+title: Layout/Footer
+---
+
+<footer id="footer" class="footer">
+  <div class="content has-text-centered">
+    <p>
+      <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+      <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
+      is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+    </p>
+  </div>
+</footer>
diff --git a/docs/cyp/layout/hero.html b/docs/cyp/layout/hero.html
new file mode 100644
index 00000000..97b1bcb2
--- /dev/null
+++ b/docs/cyp/layout/hero.html
@@ -0,0 +1,45 @@
+---
+layout: cypress
+title: Layout/Hero
+---
+
+{% capture content %}
+  <div class="hero-body">
+    <p class="title">
+      Hero title
+    </p>
+    <p class="subtitle">
+      Hero subtitle
+    </p>
+  </div>
+{% endcapture %}
+
+<section id="hero" class="hero">
+  {{ content }}
+</section>
+
+<section id="hero-small" class="hero is-small">
+  {{ content }}
+</section>
+
+<section id="hero-medium" class="hero is-medium">
+  {{ content }}
+</section>
+
+<section id="hero-large" class="hero is-large">
+  {{ content }}
+</section>
+
+<section id="hero-halfheight" class="hero is-halfheight">
+  {{ content }}
+</section>
+
+<section id="hero-fullheight" class="hero is-fullheight">
+  {{ content }}
+</section>
+
+<section id="hero-with-container" class="hero is-halfheight">
+  <div class="container">
+    {{ content }}
+  </div>
+</section>
diff --git a/docs/cypress/integration/layout/footer.spec.js b/docs/cypress/integration/layout/footer.spec.js
new file mode 100644
index 00000000..82614bf3
--- /dev/null
+++ b/docs/cypress/integration/layout/footer.spec.js
@@ -0,0 +1,17 @@
+describe("Layout/Footer", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/footer/");
+  });
+
+  it("has a Footer", () => {
+    cy.get(".footer").should("exist");
+  });
+
+  it("has a correct Footer", () => {
+    cy.get("#footer").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.backgroundColor).to.equal(Cypress.env("scheme-main-bis"));
+      expect(cs.padding).to.equal("48px 24px 96px");
+    });
+  });
+});
diff --git a/docs/cypress/integration/layout/hero.spec.js b/docs/cypress/integration/layout/hero.spec.js
new file mode 100644
index 00000000..03dcd94b
--- /dev/null
+++ b/docs/cypress/integration/layout/hero.spec.js
@@ -0,0 +1,77 @@
+import { setDesktop } from "../utils";
+
+describe("Layout/Hero", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cyp/layout/hero/");
+    setDesktop();
+  });
+
+  it("has a Hero", () => {
+    cy.get(".hero").should("exist");
+  });
+
+  it("has a correct Hero", () => {
+    cy.get("#hero").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("stretch");
+      expect(cs.display).to.equal("flex");
+      expect(cs.flexDirection).to.equal("column");
+      expect(cs.justifyContent).to.equal("space-between");
+    });
+  });
+
+  it("has a correct small Hero", () => {
+    cy.get("#hero-small .hero-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("24px");
+    });
+  });
+
+  it("has a correct medium Hero", () => {
+    cy.get("#hero-medium .hero-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("144px 72px");
+    });
+  });
+
+  it("has a correct large Hero", () => {
+    cy.get("#hero-large .hero-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.padding).to.equal("288px 96px");
+    });
+  });
+
+  it("has a correct halfheight Hero", () => {
+    cy.get("#hero-halfheight").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.minHeight).to.equal(`${Cypress.env("viewports").desktop[1] / 2}px`);
+    });
+
+    cy.get("#hero-halfheight .hero-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct fullheight Hero", () => {
+    cy.get("#hero-fullheight").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.minHeight).to.equal(`${Cypress.env("viewports").desktop[1]}px`);
+    });
+
+    cy.get("#hero-fullheight .hero-body").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.alignItems).to.equal("center");
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has a correct Hero with container", () => {
+    cy.get("#hero-with-container > .container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.flexGrow).to.equal("1");
+      expect(cs.flexShrink).to.equal("1");
+    });
+  });
+});