components/bulma/hero.templ

@@ -1,10 +0,0 @@
-package bulma
-
-templ Hero(title, subtitle string) {
-	<section class="hero">
-		<div class="hero-body">
-			<p class="title">{ title }</p>
-			<p class="subtitle">{ subtitle }</p>
-		</div>
-	</section>
-}

components/bulma/layout/container.templ

@@ -0,0 +1,7 @@
+package layout
+
+templ Container(breakpoint string) {
+	<div class={ "container", breakpoint }>
+		{ children... }
+	</div>
+}

components/bulma/layout/hero.templ

@@ -0,0 +1,37 @@
+package layout
+
+templ Hero(title, subtitle string) {
+	<section class="hero">
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
+
+templ HeroSize(title, subtitle, size string) {
+	<section class={ "hero", size }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+} 
+
+templ HeroColor(title, subtitle, color string) {
+	<section class={ "hero", color }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}
+
+templ HeroColorSize(title, subtitle, color, size string) {
+	<section class={ "hero", color, size }>
+		<div class="hero-body">
+			<p class="title">{ title }</p>
+			<p class="subtitle">{ subtitle }</p>
+		</div>
+	</section>
+}

components/bulma/layout/section.templ

@@ -0,0 +1,9 @@
+package bulma
+
+// Creates a <section> object thats good to break up a page of content.
+templ Section(title, subtitle string) {
+	<section class="section">
+		<h1 class="title">{ title }</h1>
+		<h2 class="subtitle">{ subtitle }</h2>
+	</section>
+}

components/bulma/section.templ

@@ -1,11 +0,0 @@
-package bulma
-
-templ Section(title, subtitle string) {
-	<section class="section">
-		<h1 class="title">Section</h1>
-		<h2 class="subtitle">
-			A simple container to divide your page into <strong>sections</strong>, like
-			the one you're currently reading.
-		</h2>
-	</section>
-}