diff --git a/dist/posts/posts.js b/dist/posts/posts.js
new file mode 100644
index 00000000..4d1dbab3
--- /dev/null
+++ b/dist/posts/posts.js
@@ -0,0 +1,2 @@
+import{j as e,x as l}from"../__chunks__/lit-element.XkUWx5ik.js";const i=()=>l`<article><a href="#" class="image"><img src="images/pic01.jpg" alt=""></a><h3>Interdum aenean</h3><p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p><ul class="actions"><li><a href="#" class="button">More</a></li></ul></article><article><a href="#" class="image"><img src="images/pic02.jpg" alt=""></a><h3>Nulla amet dolore</h3><p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p><ul class="actions"><li><a href="#" class="button">More</a></li></ul></article><article><a href="#" class="image"><img src="images/pic03.jpg" alt=""></a><h3>Tempus ullamcorper</h3><p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p><ul class="actions"><li><a href="#" class="button">More</a></li></ul></article><article><a href="#" class="image"><img src="images/pic04.jpg" alt=""></a><h3>Sed etiam facilis</h3><p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p><ul class="actions"><li><a href="#" class="button">More</a></li></ul></article><article><a href="#" class="image"><img src="images/pic05.jpg" alt=""></a><h3>Feugiat lorem aenean</h3><p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p><ul class="actions"><li><a href="#" class="button">More</a></li></ul></article><article><a href="#" class="image"><img src="images/pic06.jpg" alt=""></a><h3>Amet varius aliquam</h3><p>Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed nulla amet lorem feugiat tempus aliquam.</p><ul class="actions"><li><a href="#" class="button">More</a></li></ul></article>`;function s(a){a.innerHTML="",a.style.removeProperty("display"),e(i(),a)}export{s as default};
+//# sourceMappingURL=posts.js.map
diff --git a/dist/posts/posts.js.map b/dist/posts/posts.js.map
new file mode 100644
index 00000000..342715da
--- /dev/null
+++ b/dist/posts/posts.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"posts.js","sources":["../../src/blocks/posts/posts.ts"],"sourcesContent":["import { html, render } from 'lit';\n\nconst template = () => {\n  return html` <article>\n      <a href=\"#\" class=\"image\"><img src=\"images/pic01.jpg\" alt=\"\" /></a>\n      <h3>Interdum aenean</h3>\n      <p>\n        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed\n        nulla amet lorem feugiat tempus aliquam.\n      </p>\n      <ul class=\"actions\">\n        <li><a href=\"#\" class=\"button\">More</a></li>\n      </ul>\n    </article>\n    <article>\n      <a href=\"#\" class=\"image\"><img src=\"images/pic02.jpg\" alt=\"\" /></a>\n      <h3>Nulla amet dolore</h3>\n      <p>\n        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed\n        nulla amet lorem feugiat tempus aliquam.\n      </p>\n      <ul class=\"actions\">\n        <li><a href=\"#\" class=\"button\">More</a></li>\n      </ul>\n    </article>\n    <article>\n      <a href=\"#\" class=\"image\"><img src=\"images/pic03.jpg\" alt=\"\" /></a>\n      <h3>Tempus ullamcorper</h3>\n      <p>\n        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed\n        nulla amet lorem feugiat tempus aliquam.\n      </p>\n      <ul class=\"actions\">\n        <li><a href=\"#\" class=\"button\">More</a></li>\n      </ul>\n    </article>\n    <article>\n      <a href=\"#\" class=\"image\"><img src=\"images/pic04.jpg\" alt=\"\" /></a>\n      <h3>Sed etiam facilis</h3>\n      <p>\n        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed\n        nulla amet lorem feugiat tempus aliquam.\n      </p>\n      <ul class=\"actions\">\n        <li><a href=\"#\" class=\"button\">More</a></li>\n      </ul>\n    </article>\n    <article>\n      <a href=\"#\" class=\"image\"><img src=\"images/pic05.jpg\" alt=\"\" /></a>\n      <h3>Feugiat lorem aenean</h3>\n      <p>\n        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed\n        nulla amet lorem feugiat tempus aliquam.\n      </p>\n      <ul class=\"actions\">\n        <li><a href=\"#\" class=\"button\">More</a></li>\n      </ul>\n    </article>\n    <article>\n      <a href=\"#\" class=\"image\"><img src=\"images/pic06.jpg\" alt=\"\" /></a>\n      <h3>Amet varius aliquam</h3>\n      <p>\n        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed\n        nulla amet lorem feugiat tempus aliquam.\n      </p>\n      <ul class=\"actions\">\n        <li><a href=\"#\" class=\"button\">More</a></li>\n      </ul>\n    </article>`;\n};\nexport default function (block: HTMLElement) {\n  block.innerHTML = '';\n\n  block.style.removeProperty('display');\n  render(template(), block);\n}\n"],"names":["template","html","posts","block","render"],"mappings":"iEAEA,MAAMA,EAAW,IACRC,8+DAmET,SAAAC,EAAyBC,EAAoB,CAC3CA,EAAM,UAAY,GAEZA,EAAA,MAAM,eAAe,SAAS,EAC7BC,EAAAJ,IAAYG,CAAK,CAC1B"}
\ No newline at end of file
diff --git a/src/blocks/posts/posts.ts b/src/blocks/posts/posts.ts
new file mode 100644
index 00000000..122a29e7
--- /dev/null
+++ b/src/blocks/posts/posts.ts
@@ -0,0 +1,76 @@
+import { html, render } from 'lit';
+
+const template = () => {
+  return html` <article>
+      <a href="#" class="image"><img src="images/pic01.jpg" alt="" /></a>
+      <h3>Interdum aenean</h3>
+      <p>
+        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed
+        nulla amet lorem feugiat tempus aliquam.
+      </p>
+      <ul class="actions">
+        <li><a href="#" class="button">More</a></li>
+      </ul>
+    </article>
+    <article>
+      <a href="#" class="image"><img src="images/pic02.jpg" alt="" /></a>
+      <h3>Nulla amet dolore</h3>
+      <p>
+        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed
+        nulla amet lorem feugiat tempus aliquam.
+      </p>
+      <ul class="actions">
+        <li><a href="#" class="button">More</a></li>
+      </ul>
+    </article>
+    <article>
+      <a href="#" class="image"><img src="images/pic03.jpg" alt="" /></a>
+      <h3>Tempus ullamcorper</h3>
+      <p>
+        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed
+        nulla amet lorem feugiat tempus aliquam.
+      </p>
+      <ul class="actions">
+        <li><a href="#" class="button">More</a></li>
+      </ul>
+    </article>
+    <article>
+      <a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
+      <h3>Sed etiam facilis</h3>
+      <p>
+        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed
+        nulla amet lorem feugiat tempus aliquam.
+      </p>
+      <ul class="actions">
+        <li><a href="#" class="button">More</a></li>
+      </ul>
+    </article>
+    <article>
+      <a href="#" class="image"><img src="images/pic05.jpg" alt="" /></a>
+      <h3>Feugiat lorem aenean</h3>
+      <p>
+        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed
+        nulla amet lorem feugiat tempus aliquam.
+      </p>
+      <ul class="actions">
+        <li><a href="#" class="button">More</a></li>
+      </ul>
+    </article>
+    <article>
+      <a href="#" class="image"><img src="images/pic06.jpg" alt="" /></a>
+      <h3>Amet varius aliquam</h3>
+      <p>
+        Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante interdum. Sed
+        nulla amet lorem feugiat tempus aliquam.
+      </p>
+      <ul class="actions">
+        <li><a href="#" class="button">More</a></li>
+      </ul>
+    </article>`;
+};
+export default function (block: HTMLElement) {
+  block.innerHTML = '';
+
+  block.style.removeProperty('display');
+  render(template(), block);
+}
diff --git a/types/blocks/posts/posts.d.ts b/types/blocks/posts/posts.d.ts
new file mode 100644
index 00000000..95509577
--- /dev/null
+++ b/types/blocks/posts/posts.d.ts
@@ -0,0 +1 @@
+export default function (block: HTMLElement): void;
diff --git a/vite.config.ts b/vite.config.ts
index 4bf880d9..7e2d2e51 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,6 +27,7 @@ export default defineConfig(({ command, mode }) => {
           counter: resolve(__dirname, 'src/blocks/counter/counter.ts'),
           banner: resolve(__dirname, 'src/blocks/banner/banner.ts'),
           features: resolve(__dirname, 'src/blocks/features/features.ts'),
+          posts: resolve(__dirname, 'src/blocks/posts/posts.ts'),
         },
         output: {
           dir: 'dist',