shadcn-templ

Item

A versatile component for displaying content with media, title, description, and actions.

shadcn SC

shadcn

m@example.com

Admin
JD

Jane Doe

jane@example.com

Member
AB

Alice Brown

alice@example.com

templ
templ ItemDemo() {
	<div class="w-full max-w-md divide-y rounded-lg border">
		@ui.Item("px-4", nil) {
			@ui.ItemMedia("", nil) {
				@ui.Avatar("h-10 w-10", nil) {
					@ui.AvatarImage("https://github.com/shadcn.png", "shadcn", "", nil)
					@ui.AvatarFallback("", nil) {
						SC
					}
				}
			}
			@ui.ItemContent("", nil) {
				@ui.ItemTitle("", nil) {
					shadcn
				}
				@ui.ItemDescription("", nil) {
					{ "m@example.com" }
				}
			}
			@ui.ItemActions("", nil) {
				@ui.Badge(ui.BadgeVariantSecondary, "", nil) {
					Admin
				}
			}
		}
		@ui.Item("px-4", nil) {
			@ui.ItemMedia("", nil) {
				@ui.Avatar("h-10 w-10", nil) {
					@ui.AvatarFallback("", nil) {
						JD
					}
				}
			}
			@ui.ItemContent("", nil) {
				@ui.ItemTitle("", nil) {
					Jane Doe
				}
				@ui.ItemDescription("", nil) {
					jane@example.com
				}
			}
			@ui.ItemActions("", nil) {
				@ui.Badge(ui.BadgeVariantOutline, "", nil) {
					Member
				}
			}
		}
		@ui.Item("px-4", nil) {
			@ui.ItemMedia("", nil) {
				@ui.Avatar("h-10 w-10", nil) {
					@ui.AvatarFallback("", nil) {
						AB
					}
				}
			}
			@ui.ItemContent("", nil) {
				@ui.ItemTitle("", nil) {
					Alice Brown
				}
				@ui.ItemDescription("", nil) {
					alice@example.com
				}
			}
			@ui.ItemActions("", nil) {
				@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantGhost, ui.ButtonSizeIcon, "h-8 w-8", templ.Attributes{"aria-label": "Options"}) {
					@icons.MoreHorizontal(icons.Props{Class: "h-4 w-4"})
				}
			}
		}
	</div>
}