components/bulma/card.templ

@@ -14,9 +14,39 @@ templ ArticleCardWithThumbnail(title, thumbnailUrl, url, datePosted, sourceName
 				</div>
 			</div>
 			<div class="content">
-				{ datePosted }<br/>
+				{ datePosted }
+				<br/>
 				{ sourceName }
 			</div>
 		</div>
 	</div>
 }
+
+// Creates a card container.
+// Accepts children
+templ Card() {
+	<div class="card">
+		{ children... }
+	</div>
+}
+
+// Creates a image card container.
+// Accepts children
+templ CardImage() {
+	<div class="card-image">
+		{ children... }
+	</div>
+}
+
+//
+templ CardImageSize(size string) {
+	<figure class={ "image", size }>
+		{ children... }
+	</figure>
+}
+
+templ CardContentContainer() {
+	<div class="card-content">
+		{ children... }
+	</div>
+}

components/bulma/example/layout.templ

@@ -1 +0,0 @@
-package example

components/bulma/html/img.templ

@@ -0,0 +1,9 @@
+package html
+
+templ Img(src string) {
+    <img src={ src } />
+}
+
+templ ImgAlt(src, alt string) {
+    <img src={ src } alt={ alt }/>
+}

components/bulma/image.templ

@@ -0,0 +1,10 @@
+package bulma
+
+// Creates a image wrapper.
+// This accepts children.
+// Use html.Img() to load a image as a child
+templ Image(image string) {
+    <figure class={ "image", image }>
+        { children... }
+    </figure>
+}

components/bulma/layout/section.templ

@@ -1,4 +1,4 @@
-package bulma
+package layout
 
 // Creates a <section> object thats good to break up a page of content.
 templ Section(title, subtitle string) {