Card

1234567891011121314
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardDefault() {
	@popui.Card() {
		@popui.CardContent() {
			Card content goes here
		}
	}
}

1234567891011121314151617181920212223
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardWithHeader() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "John Doe",
			Subtitle: "Software Engineer",
		}) {
			@popui.Avatar(props.Avatar{
				Size:    "lg",
				Initial: "J",
			})
		}
		@popui.CardContent() {
			This card includes a header with an avatar and title information.
		}
	}
}

123456789101112131415161718
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardDisabled() {
	@popui.Card(props.Card{Disabled: true}) {
		@popui.CardHeader(props.CardHeader{
			Title:    "Disabled Card",
			Subtitle: "Cannot be interacted with",
		})
		@popui.CardContent() {
			This card is disabled.
		}
	}
}

12345678910111213141516171819202122232425
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardAsLink() {
	@popui.Card(props.Card{
		Href: "/profile",
	}) {
		@popui.CardHeader(props.CardHeader{
			Title:    "Clickable Card",
			Subtitle: "Click anywhere to navigate",
		}) {
			@popui.Avatar(props.Avatar{
				Size:    "lg",
				Initial: "C",
			})
		}
		@popui.CardContent() {
			This entire card is clickable.
		}
	}
}

Usage Statistics

Track your API consumption

API Requests · This month

7500 / 10000

123456789101112131415161718192021222324252627282930
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardProgressBar() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "Usage Statistics",
			Subtitle: "Track your API consumption",
		}) {
			@popui.Avatar(props.Avatar{
				Size: "lg",
			}) {
				@popui.Image(props.Image{
					Src: "https://i.pravatar.cc/150?img=68",
					Alt: "Logo",
				})
			}
		}
		@popui.CardProgressBar(props.CardProgressBar{
			Title:    "API Requests",
			Subtitle: "This month",
			Current:  7500,
			Total:    10000,
		})
	}
}

12345678910111213141516171819202122232425262728293031
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ CardDashboard() {
	@popui.Card() {
		@popui.CardHeader(props.CardHeader{
			Title:    "Monthly Overview",
			Subtitle: "Key performance metrics",
		})
		@popui.CardContent() {
			@popui.CardDashboard() {
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Revenue",
					Value: "$12.5k",
				})
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Orders",
					Value: "243",
				})
				@popui.CardDashboardItem(props.CardDashboardItem{
					Label: "Customers",
					Value: "89",
				})
			}
		}
	}
}

dni_back_already_stored.png

Descargar

123456789101112131415161718192021
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
	"github.com/invopop/popui/icons"
)

templ CardFile() {
	@popui.CardFile() {
		@popui.CardFileInfo(props.CardFileInfo{
			Label: "dni_back_already_stored.png",
		}) {
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Spanish_ID_card_%28back_side%29.webp/473px-Spanish_ID_card_%28back_side%29.webp.png?20210720095942" height="32" width="50"/>
		}
		@popui.AnchorButton(props.AnchorButton{Variant: "transparent"}) {
			@icons.Download()
			Descargar
		}
	}
}