Card

The b.Card constructor creates a card.

ChildAction
b.OnCard(...any)Apply children to the <div class="card"> element
b.OnContent(...any)Apply children to the current <div class="card-content"> element
b.SplitContent()Force starting a new <div class="card-content"> element
b.CardHeader(...any)Apply children to the <header class="card-header"> element
b.CardHeaderIcon(...anyApply an icon to the <header class="card-header"> element
b.CardHeaderTitle(...any)Add a title to the <header class="card-header"> element
b.CardFooter(...any)Apply children to the <header class="card-footer"> element
b.CardImage(...any)Add image to the <div class="card"> element
b.CardImageImg(...any)Add image to the <div class="card"> element
e.ElementAdd element to the <div class="card-content"> element
gomponents.Nodeof type gomponents.AttributeTypeApply child to the <div class="card"> element
gomponents.Nodeof type gomponents.ElementTypeApply child to the <div class="card-content"> element
Anything elseApply child to the <div class="card-content"> element

The b.CardHeader function marks children as being part of the card header.

ChildAction
b.IconElemAdd this icon as the card header icon
stringAdd this text as the card header title
Anything elseApply child to the card header

The b.CardHeaderIcon constructor creates a card header icon element, as an alternative to providing an icon to b.CardHeader, allowing to customize the icon. The b.CardHeaderTitle constructor creates a card header title element, as an alternative to providing a string to b.CardHeader, allowing to customize the title.

The b.CardImage constructor creates an image by calling b.Image and wrapping it into a card image element. The b.CardImageImg constructor creates an image by calling b.ImageImg and wrapping it into a card image element.

ChildAction
b.OnCardImage(...any)Apply children to the <div class="card-image"> element
Anything elseApply children to the <figure class="image"> element

Bulma examples

Bulma documentation
Example
Code
b.Card(
	b.CardImage(
		b.Img4By3,
		e.ImgSrc(
			"https://bulma.io/assets/images/placeholders/1280x960.png",
			e.Alt("Placeholder image"),
		),
	),
	b.Media(
		b.MediaLeft(
			b.ImageImg(
				"https://bulma.io/assets/images/placeholders/96x96.png",
				e.Alt("Placeholder image"),
			),
		),
		b.Title(4, html.P, "John Smith"),
		b.Subtitle(6, html.P, "@johnsmith"),
	),
	b.Content(
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. ", e.A("@bulmaio"), ". ", e.AHref("#", "#css"), " ", e.AHref("#", "#responsive"), e.Br(), e.Time(gomponents.Attr("datetime", "2016-1-1"), "11:09 PM - 1 Jan 2016"),
	),
)
ResultHTML
Placeholder image

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

Card parts

Bulma documentation
Example
Code
b.Block(
	b.Card(
		b.CardHeader(
			b.CardHeaderTitle(
				"Card header",
			),
			b.CardHeaderIcon(
				e.AriaLabel("more options"),
				fa.Icon(fa.Solid, "angle-down"),
			),
		),
	),
),
b.Block(
	b.Card(
		b.CardHeader(
			"Card header",
			fa.Icon(fa.Solid, "angle-down"),
		),
	),
),
b.Block(
	b.Card(
		b.CardHeaderTitle("Card header"),
		b.CardHeaderIcon(
			e.AriaLabel("more options"),
			fa.Icon(fa.Solid, "angle-down"),
		),
	),
)
ResultHTML

Card header

Card header

Card header

Example
Code
b.Card(
	b.MarginBottom(4),
	b.CardImage(
		b.Img4By3,
		e.ImgSrc(
			"https://bulma.io/assets/images/placeholders/1280x960.png",
			html.Alt("Placeholder image"),
		),
	),
),
b.Card(
	b.CardImageImg(
		"https://bulma.io/assets/images/placeholders/1280x960.png",
		b.Img4By3,
	),
)
ResultHTML
Placeholder image
Example
Code
b.Card(
	b.Content(
		"Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.",
	),
)
ResultHTML

Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

Example
Code
b.Card(
	b.CardFooter(
		e.AHref("#", "Save"),
		e.AHref("#", "Edit"),
		e.AHref("#", "Delete"),
	),
)
ResultHTML

Examples

Bulma documentation
Example
Code
b.Card(
	b.CardHeader(
		"Component",
		b.CardHeaderIcon(
			e.AriaLabel("more options"),
			fa.Icon(fa.Solid, "angle-down"),
		),
	),
	b.Content(
		"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. ", e.A("@bulmaio"), ". ", e.AHref("#", "#css"), " ", e.AHref("#", "#responsive"), e.Br(), e.Time(gomponents.Attr("datetime", "2016-1-1"), "11:09 PM - 1 Jan 2016"),
	),
	b.CardFooter(
		e.AHref("#", "Save"),
		e.AHref("#", "Edit"),
		e.AHref("#", "Delete"),
	),
)
ResultHTML

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

@bulmaio

.

#css

#responsive
Example
Code
b.Card(
	b.Title(html.P, "“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”"),
	b.Subtitle(html.P, "Jeff Atwood"),
	b.CardFooter(
		e.P(
			e.Span(
				"View on ", e.AHref("https://twitter.com/codinghorror/status/506010907021828096", "Twitter"),
			),
		),
		e.P(
			e.Span(
				"Share on ", e.AHref("#", "Facebook"),
			),
		),
	),
)
ResultHTML

“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”

Jeff Atwood