setup

themes/hugo-theme-monochrome/exampleSite/content/en/layouts/balloon/demo/_index.md

@@ -0,0 +1,15 @@
+---
+title: 'Balloon Layout Demo'
+bookcase_cover_src: 'cover/balloon.png'
+bookcase_cover_src_dark: 'cover/balloon_dark.png'
+type: 'balloon'
+balloon_img_src: "icons/balloon.svg"
+balloon_img_src_dark: "icons/balloon_dark.svg"
+balloon_circle: false
+balloon_resources: "/about"
+weight: 10
+---
+
+Balloon layout is useful for demonstrating information step-by-step.
+
+[Go to single page demo](/hugo-theme-monochrome/layouts/demo/balloon/single)

themes/hugo-theme-monochrome/exampleSite/content/en/layouts/balloon/demo/single.md

@@ -0,0 +1,12 @@
+---
+title: 'balloon layout single demo'
+type: 'balloon'
+balloon_img_src: "icons/balloon.svg"
+balloon_img_src_dark: "icons/balloon_dark.svg"
+balloon_circle: false
+balloon_resources: "/about"
+---
+
+Balloon layout can also be used in regular page.
+
+[Go to list demo](/hugo-theme-monochrome/layouts/demo/balloon)