added more layout components

This commit is contained in:
James Tombleson 2024-07-13 10:35:36 -07:00
parent 174516f34f
commit 262cd8b897
5 changed files with 53 additions and 21 deletions

View File

@ -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>
}

View File

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

View File

@ -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>
}

View File

@ -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>
}

View File

@ -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>
}