Description List

Semantic HTML definition list for displaying term-description pairs.

Name: John Doe
Email: john@example.com
Role: Administrator

1234567891011121314151617181920212223
package showcase

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

templ DescriptionListDefault() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Name",
			Value: "John Doe",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Email",
			Value: "john@example.com",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Role",
			Value: "Administrator",
		})
	}
}

Custom Width

Override the default width to fit your layout.

Company: Acme Corporation
Address: 123 Main Street, City, Country

123456789101112131415161718192021
package showcase

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

templ DescriptionListCustomWidth() {
	@popui.DescriptionList(props.DescriptionList{
		Class: "w-full",
	}) {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Company",
			Value: "Acme Corporation",
		})
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Address",
			Value: "123 Main Street, City, Country",
		})
	}
}

Rich Text Content

Use DT and DD components for complex HTML content.

Name: John Doe
Bio: Software engineer with expertise in Go and TypeScript.
10+ years experience
Open source contributor

123456789101112131415161718192021222324252627
package showcase

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

templ DescriptionListRichText() {
	@popui.DescriptionList() {
		@popui.DescriptionListItem(props.DescriptionListItem{
			Label: "Name",
			Value: "John Doe",
		})
		@popui.DescriptionListItem() {
			@popui.DT() { Bio }
			@popui.DD() {
				@popui.Prose() {
					<p>Software engineer with expertise in <strong>Go</strong> and <strong>TypeScript</strong>.</p>
					<ul>
						<li>10+ years experience</li>
						<li>Open source contributor</li>
					</ul>
				}
			}
		}
	}
}

API Reference

DescriptionList

Container for definition list items (dl element).

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the list element
`Class`	`string`	-	Additional CSS classes to merge with list styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)

DescriptionListItem

Individual item with label and value, rendered as dt/dd pair.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the item element
`Class`	`string`	-	Additional CSS classes to merge with item styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)
`Label`	`string`	-	The term or label to display (dt element)
`Value`	`string`	-	The description or value to display (dd element)

DT

Definition term element (dt) with proper styling for use in DescriptionListItem.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes

DD

Definition description element (dd) with proper styling for use in DescriptionListItem.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier
`Class`	`string`	-	Additional CSS classes
`Attributes`	`templ.Attributes`	-	Additional HTML attributes