Hero

Hero

The b.Hero constructor creates a hero.

Modifier	Action
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.Small`	Set size to small
`b.Medium`	Set size to medium
`b.Large`	Set size to large
`b.HalfHeight`	Set size to 50% of the height of the viewport
`b.FullHeight`	Set size to 100% of the height of the viewport
`b.FullHeightWithNavbar`	Set size to 100% of the height of the viewport minus the navbar height

Child	Action
`b.OnSection(...any)`	Apply children to the `<section class="hero">` element
`b.OnBody(...any)`	Apply children to the `<div class="hero-body">` element
`b.HeroHead(...any)`	Apply children to the `<div class="hero-head">` element
`b.HeroFoot(...any)`	Apply children to the `<div class="hero-foot">` element
`e.Element`	Add element to the `<div class="hero-body">` element
`gomponents.Node`of type `gomponents.AttributeType`	Apply attribute to the `<section class="hero">` element
`gomponents.Node`of type `gomponents.ElementType`	Add element to the `<div class="hero-body">` element
Anything else	Apply child to the `<section class="hero">` element

The head, body and foot elements are created only if at least one child has been provided for the part.

Bulma examples

Bulma documentation

The hero body is implied when you provide elements as children to b.Hero:

Example

Code

b.Hero(
	b.Title(html.P, "Hero title"),
	b.Subtitle(html.P ,"Hero subtitle"),
)

ResultHTML

Hero title

Hero subtitle

<section class="hero"><div class="hero-body"><p class="title">Hero title</p><p class="subtitle">Hero subtitle</p></div></section>

Colors

Bulma documentation

Example

Code

b.Hero(
	b.Primary,
	b.Title(html.P, "Primary hero"),
	b.Subtitle(html.P ,"Primary subtitle"),
)

ResultHTML

Primary hero

Primary subtitle

<section class="hero is-primary"><div class="hero-body"><p class="title">Primary hero</p><p class="subtitle">Primary subtitle</p></div></section>

Example

Code

b.Hero(
	b.Link,
	b.Title(html.P, "Link hero"),
	b.Subtitle(html.P ,"Link subtitle"),
)

ResultHTML

Link hero

Link subtitle

<section class="hero is-link"><div class="hero-body"><p class="title">Link hero</p><p class="subtitle">Link subtitle</p></div></section>

Example

Code

b.Hero(
	b.Info,
	b.Title(html.P, "Info hero"),
	b.Subtitle(html.P ,"Info subtitle"),
)

ResultHTML

Info hero

Info subtitle

<section class="hero is-info"><div class="hero-body"><p class="title">Info hero</p><p class="subtitle">Info subtitle</p></div></section>

Example

Code

b.Hero(
	b.Success,
	b.Title(html.P, "Success hero"),
	b.Subtitle(html.P ,"Success subtitle"),
)

ResultHTML

Success hero

Success subtitle

<section class="hero is-success"><div class="hero-body"><p class="title">Success hero</p><p class="subtitle">Success subtitle</p></div></section>

Example

Code

b.Hero(
	b.Warning,
	b.Title(html.P, "Warning hero"),
	b.Subtitle(html.P ,"Warning subtitle"),
)

ResultHTML

Warning hero

Warning subtitle

<section class="is-warning hero"><div class="hero-body"><p class="title">Warning hero</p><p class="subtitle">Warning subtitle</p></div></section>

Example

Code

b.Hero(
	b.Danger,
	b.Title(html.P, "Danger hero"),
	b.Subtitle(html.P ,"Danger subtitle"),
)

ResultHTML

Danger hero

Danger subtitle

<section class="hero is-danger"><div class="hero-body"><p class="title">Danger hero</p><p class="subtitle">Danger subtitle</p></div></section>

Sizes

Bulma documentation

Example

Code

b.Hero(
	b.Small, b.Primary,
	b.Title(html.P, "Small hero"),
	b.Subtitle(html.P, "Small subtitle"),
)

ResultHTML

Small hero

Small subtitle

<section class="hero is-small is-primary"><div class="hero-body"><p class="title">Small hero</p><p class="subtitle">Small subtitle</p></div></section>

Example

Code

b.Hero(
	b.Medium, b.Link,
	b.Title(html.P, "Medium hero"),
	b.Subtitle(html.P, "Medium subtitle"),
)

ResultHTML

Medium hero

Medium subtitle

<section class="hero is-medium is-link"><div class="hero-body"><p class="title">Medium hero</p><p class="subtitle">Medium subtitle</p></div></section>

Example

Code

b.Hero(
	b.Large, b.Info,
	b.Title(html.P, "Large hero"),
	b.Subtitle(html.P, "Large subtitle"),
)

ResultHTML

Large hero

Large subtitle

<section class="hero is-large is-info"><div class="hero-body"><p class="title">Large hero</p><p class="subtitle">Large subtitle</p></div></section>

Example

Code

b.Hero(
	b.HalfHeight, b.Success,
	e.Div(
		b.Title(html.P, "Half height hero"),
		b.Subtitle(html.P, "Half height subtitle"),
	),
)

ResultHTML

Half height hero

Half height subtitle

<section class="hero is-halfheight is-success"><div class="hero-body"><div><p class="title">Half height hero</p><p class="subtitle">Half height subtitle</p></div></div></section>

Example

Code

b.Hero(
	b.FullHeight, b.Danger,
	e.Div(
		b.Title(html.P, "Full height hero"),
		b.Subtitle(html.P, "Full height subtitle"),
	),
)

ResultHTML

Full height hero

Full height subtitle

<section class="hero is-fullheight is-danger"><div class="hero-body"><div><p class="title">Full height hero</p><p class="subtitle">Full height subtitle</p></div></div></section>

Bulma documentation

Example

ResultHTML

<nav class="navbar"><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item" href="#">Home</a><a class="navbar-item" href="#">Documentation</a></div><div class="navbar-end"><div class="navbar-item"><div class="buttons"><a class="button is-dark">Github</a><a class="button is-link">Download</a></div></div></div></div></nav>
<section class="hero is-link is-fullheight-with-navbar"><div class="hero-body"><p class="title">Fullheight hero with navbar</p></div></section>

Code

b.Navbar(
	b.NavbarStart(
		b.NavbarAHref("#", "Home"),
		b.NavbarAHref("#", "Documentation"),
	),
	b.NavbarEnd(
		b.NavbarItem(
			b.Buttons(
				b.ButtonA(b.Dark, "Github"),
				b.ButtonA(b.Link, "Download"),
			),
		),
	),
),
b.Hero(
	b.Link, b.FullHeightWithNavbar,
	b.Title(html.P, "Fullheight hero with navbar"),
)

Fullheight hero in 3 parts

Bulma documentation

Use b.HeroHead and b.HeroFoot to define body header and footer. Please note they can be used multiple times, in which case the children will be aggregated.

Example

ResultHTML

Title

Subtitle

Overview
Modifiers
Grid
Elements
Components
Layout

<section class="hero is-primary is-medium"><div class="hero-head"><nav class="navbar"><div class="navbar-brand"><a class="navbar-item" href="#"><img src="https://bulma.io/images/bulma-type-white.png" alt="Logo"></a><a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false" onclick="this.classList.toggle('is-active');this.closest('.navbar').getElementsByClassName('navbar-menu')[0].classList.toggle('is-active')"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div class="navbar-menu"><div class="navbar-end"><a class="navbar-item is-active" href="#">Home</a><a class="navbar-item" href="#">Examples</a><a class="navbar-item" href="#">Documentation</a><span class="navbar-item"><a class="button is-primary is-inverted"><span class="icon"><i class="fa-brands fa-github"></i></span><span>Download</span></a></span></div></div></nav></div><div class="hero-body"><div class="container has-text-centered"><p class="title">Title</p><p class="subtitle">Subtitle</p></div></div><div class="hero-foot"><div class="tabs"><ul><li class="is-active"><a>Overview</a></li><li><a>Modifiers</a></li><li><a>Grid</a></li><li><a>Elements</a></li><li><a>Components</a></li><li><a>Layout</a></li></ul></div></div></section>

Code

b.Hero(
	b.Primary, b.Medium,
	// Hero head: will stick at the top
	b.HeroHead(
		b.Navbar(
			b.NavbarBrand(
				b.NavbarAHref(
					"#",
					e.ImgSrc("https://bulma.io/images/bulma-type-white.png", e.Alt("Logo")),
				),
			),
			b.NavbarEnd(
				b.NavbarAHref("#", b.Active, "Home"),
				b.NavbarAHref("#", "Examples"),
				b.NavbarAHref("#", "Documentation"),
				b.NavbarItem(
					html.Span,
					b.ButtonA(
						b.Primary, b.Inverted,
						fa.Icon(fa.Brand, "github"),
						"Download",
					),
				),
			),
		),
	),

	// Hero content: will be in the middle
	b.Container(
		b.TextCentered,
		b.Title(html.P, "Title"),
		b.Subtitle(html.P, "Subtitle"),
	),

	// Hero footer: will stick at the bottom
	b.HeroFoot(
		b.Tabs(
			b.Container,
			b.TabLink(b.Active, "Overview"),
			b.TabLink("Modifiers"),
			b.TabLink("Grid"),
			b.TabLink("Elements"),
			b.TabLink("Components"),
			b.TabLink("Layout"),
		),
	),
)

Example

ResultHTML

Title

Subtitle

Overview
Modifiers
Grid
Elements
Components
Layout

<section class="is-large hero is-info"><div class="hero-head"><nav class="navbar"><div class="navbar-brand"><a class="navbar-item" href="#"><img src="https://bulma.io/images/bulma-type-white.png" alt="Logo"></a><a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false" onclick="this.classList.toggle('is-active');this.closest('.navbar').getElementsByClassName('navbar-menu')[0].classList.toggle('is-active')"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div class="navbar-menu"><div class="navbar-end"><a class="navbar-item is-active" href="#">Home</a><a class="navbar-item" href="#">Examples</a><a class="navbar-item" href="#">Documentation</a><span class="navbar-item"><a class="is-primary is-inverted button"><span class="icon"><i class="fa-brands fa-github"></i></span><span>Download</span></a></span></div></div></nav></div><div class="hero-body"><div class="container has-text-centered"><p class="title">Title</p><p class="subtitle">Subtitle</p></div></div><div class="hero-foot"><div class="is-fullwidth tabs is-boxed"><ul><li class="is-active"><a>Overview</a></li><li><a>Modifiers</a></li><li><a>Grid</a></li><li><a>Elements</a></li><li><a>Components</a></li><li><a>Layout</a></li></ul></div></div></section>

Code

b.Hero(
	b.Info, b.Large,
	b.HeroHead(
		b.Navbar(
			b.Container,
			b.NavbarBrand(
				b.NavbarAHref(
					"#",
					e.ImgSrc("https://bulma.io/images/bulma-type-white.png", e.Alt("Logo")),
				),
			),
			b.NavbarEnd(
				b.NavbarAHref("#", b.Active, "Home"),
				b.NavbarAHref("#", "Examples"),
				b.NavbarAHref("#", "Documentation"),
				b.NavbarItem(
					html.Span,
					b.ButtonA(
						b.Primary, b.Inverted,
						fa.Icon(fa.Brand, "github"),
						"Download",
					),
				),
			),
		),
	),
	b.Container(
		b.TextCentered,
		b.Title(html.P, "Title"),
		b.Subtitle(html.P, "Subtitle"),
	),
	b.HeroFoot(
		b.Tabs(
			b.Boxed, b.FullWidth,
			b.Container,
			b.TabLink(b.Active, "Overview"),
			b.TabLink("Modifiers"),
			b.TabLink("Grid"),
			b.TabLink("Elements"),
			b.TabLink("Components"),
			b.TabLink("Layout"),
		),
	),
)

Example

ResultHTML

Title

Subtitle

Overview
Modifiers
Grid
Elements
Components
Layout

<section class="hero is-success is-fullheight"><div class="hero-head"><nav class="navbar"><div class="navbar-brand"><a class="navbar-item" href="#"><img src="https://bulma.io/images/bulma-type-white.png" alt="Logo"></a><a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false" onclick="this.classList.toggle('is-active');this.closest('.navbar').getElementsByClassName('navbar-menu')[0].classList.toggle('is-active')"><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span></a></div><div class="navbar-menu"><div class="navbar-end"><a class="navbar-item is-active" href="#">Home</a><a class="navbar-item" href="#">Examples</a><a class="navbar-item" href="#">Documentation</a><span class="navbar-item"><a class="button is-primary is-inverted"><span class="icon"><i class="fa-brands fa-github"></i></span><span>Download</span></a></span></div></div></nav></div><div class="hero-body"><div class="container has-text-centered"><p class="title">Title</p><p class="subtitle">Subtitle</p></div></div><div class="hero-foot"><div class="is-fullwidth tabs is-boxed"><ul><li class="is-active"><a>Overview</a></li><li><a>Modifiers</a></li><li><a>Grid</a></li><li><a>Elements</a></li><li><a>Components</a></li><li><a>Layout</a></li></ul></div></div></section>

Code

b.Hero(
	b.Success, b.FullHeight,
	b.HeroHead(
		b.Navbar(
			b.Container,
			b.NavbarBrand(
				b.NavbarAHref(
					"#",
					e.ImgSrc("https://bulma.io/images/bulma-type-white.png", e.Alt("Logo")),
				),
			),
			b.NavbarEnd(
				b.NavbarAHref("#", b.Active, "Home"),
				b.NavbarAHref("#", "Examples"),
				b.NavbarAHref("#", "Documentation"),
				b.NavbarItem(
					html.Span,
					b.ButtonA(
						b.Primary, b.Inverted,
						fa.Icon(fa.Brand, "github"),
						"Download",
					),
				),
			),
		),
	),
	b.Container(
		b.TextCentered,
		b.Title(html.P, "Title"),
		b.Subtitle(html.P, "Subtitle"),
	),
	b.HeroFoot(
		b.Tabs(
			b.Boxed, b.FullWidth,
			b.Container,
			b.TabLink(b.Active, "Overview"),
			b.TabLink("Modifiers"),
			b.TabLink("Grid"),
			b.TabLink("Elements"),
			b.TabLink("Components"),
			b.TabLink("Layout"),
		),
	),
)

Bulma examples

Colors

Sizes

Fullheight with navbar

Fullheight hero in 3 parts