DescriptionList

Groups of names and values, for listing attributes on detail pages.

Title: Spice and Wolf
Author: Isuna Hasekura
Released: 14 March 2026

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="max-w-sm">
    <DescriptionTerm>Title</DescriptionTerm>
    <DescriptionDetails>Spice and Wolf</DescriptionDetails>
    <DescriptionTerm>Author</DescriptionTerm>
    <DescriptionDetails>Isuna Hasekura</DescriptionDetails>
    <DescriptionTerm>Released</DescriptionTerm>
    <DescriptionDetails>14 March 2026</DescriptionDetails>
  </DescriptionList>
</template>

vue

Usage

import { DescriptionList, DescriptionTerm, DescriptionDetails } from '@hina-ui/vue'

DescriptionList renders a native dl. Names go in DescriptionTerm (dt) and values in DescriptionDetails (dd). They stack vertically by default, with names in a medium weight.

Status: Ongoing
Rating: All ages

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="max-w-sm">
    <DescriptionTerm>Status</DescriptionTerm>
    <DescriptionDetails>Ongoing</DescriptionDetails>
    <DescriptionTerm>Rating</DescriptionTerm>
    <DescriptionDetails>All ages</DescriptionDetails>
  </DescriptionList>
</template>

vue

Examples

Two columns

orientation="horizontal" puts names and values into two columns side by side: names in one, values in the other. Detail pages in admin interfaces usually look like this.

Title: Spice and Wolf
Publisher: Dengeki Bunko
Volumes: 7 in total

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList orientation="horizontal" class="max-w-md">
    <DescriptionTerm>Title</DescriptionTerm>
    <DescriptionDetails>Spice and Wolf</DescriptionDetails>
    <DescriptionTerm>Publisher</DescriptionTerm>
    <DescriptionDetails>Dengeki Bunko</DescriptionDetails>
    <DescriptionTerm>Volumes</DescriptionTerm>
    <DescriptionDetails>7 in total</DescriptionDetails>
  </DescriptionList>
</template>

vue

The name column is as wide as the longest name. --hn-dl-term-width sets a fixed width instead, for lining up several lists.

<DescriptionList orientation="horizontal" class="[--hn-dl-term-width:8rem]">…</DescriptionList>

vue

One name, several values

A single dt can be followed by several dd elements, and values can contain other components.

Author: Isuna Hasekura; Jyuu Ayakura
Tags: Sci-fiSchoolHealing

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm, Inline, Tag } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="max-w-sm">
    <DescriptionTerm>Author</DescriptionTerm>
    <DescriptionDetails>Isuna Hasekura</DescriptionDetails>
    <DescriptionDetails>Jyuu Ayakura</DescriptionDetails>
    <DescriptionTerm>Tags</DescriptionTerm>
    <DescriptionDetails>
      <Inline align="center">
        <Tag>Sci-fi</Tag>
        <Tag>School</Tag>
        <Tag>Healing</Tag>
      </Inline>
    </DescriptionDetails>
  </DescriptionList>
</template>

vue