Looma
Main

Description List

Named values: each ui-description-item is a term and its value, rendered as a <dl> of <div><dt/><dd/></div> groups. layout="rows" lines terms up in one column and values in the next, for a short summary; layout="stacked" sets every term above its value, for a narrow space such as a side panel or a popover; layout="grid" sets the pairs in columns, term above value, for facts to scan across; layout="tiles" sets each pair on its own tile, for figures to compare. columns (2, 3, or 4) caps how many columns grid and tiles set, and density="compact" sets the pairs close together. A rows list does not stack on its own; choose stacked where it will be narrow. A value can hold code (Text variant="code"), a Badge, or a long identifier, which wraps rather than overflowing.

Rows

Each term beside its value, for a short summary.

Site
Acme
Invited by
Ada Lovelace
Role
Editor

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>

<ui-description-list>
  <ui-description-item
    term="Site"
  >Acme</ui-description-item>
  <ui-description-item
    term="Invited by"
  >Ada Lovelace</ui-description-item>
  <ui-description-item
    term="Role"
  >Editor</ui-description-item>
</ui-description-list>
<script setup>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList>
    <UiDescriptionItem
      term="Site"
    >Acme</UiDescriptionItem>
    <UiDescriptionItem
      term="Invited by"
    >Ada Lovelace</UiDescriptionItem>
    <UiDescriptionItem
      term="Role"
    >Editor</UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList>
    <UiDescriptionItem
      term="Site"
    >Acme</UiDescriptionItem>
    <UiDescriptionItem
      term="Invited by"
    >Ada Lovelace</UiDescriptionItem>
    <UiDescriptionItem
      term="Role"
    >Editor</UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList>
    <UiDescriptionItem
      term="Site"
    >Acme</UiDescriptionItem>
    <UiDescriptionItem
      term="Invited by"
    >Ada Lovelace</UiDescriptionItem>
    <UiDescriptionItem
      term="Role"
    >Editor</UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<UiDescriptionList>
  <UiDescriptionItem
    term="Site"
  >Acme</UiDescriptionItem>
  <UiDescriptionItem
    term="Invited by"
  >Ada Lovelace</UiDescriptionItem>
  <UiDescriptionItem
    term="Role"
  >Editor</UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem],
  template: `
    <dl
      ui-description-list
    >
      <div
        ui-description-item
        [term]="'Site'"
      >Acme</div>
      <div
        ui-description-item
        [term]="'Invited by'"
      >Ada Lovelace</div>
      <div
        ui-description-item
        [term]="'Role'"
      >Editor</div>
    </dl>
  `,
})
export default class Example {}

Tiles

layout="tiles" sets each figure on its own tile, term above value, to scan.

Documents
12
Changes
48
Reviewed
30

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>

<ui-description-list
  layout="tiles"
>
  <ui-description-item
    term="Documents"
  >12</ui-description-item>
  <ui-description-item
    term="Changes"
  >48</ui-description-item>
  <ui-description-item
    term="Reviewed"
  >30</ui-description-item>
</ui-description-list>
<script setup>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList
    layout="tiles"
  >
    <UiDescriptionItem
      term="Documents"
    >12</UiDescriptionItem>
    <UiDescriptionItem
      term="Changes"
    >48</UiDescriptionItem>
    <UiDescriptionItem
      term="Reviewed"
    >30</UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="tiles"
  >
    <UiDescriptionItem
      term="Documents"
    >12</UiDescriptionItem>
    <UiDescriptionItem
      term="Changes"
    >48</UiDescriptionItem>
    <UiDescriptionItem
      term="Reviewed"
    >30</UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="tiles"
  >
    <UiDescriptionItem
      term="Documents"
    >12</UiDescriptionItem>
    <UiDescriptionItem
      term="Changes"
    >48</UiDescriptionItem>
    <UiDescriptionItem
      term="Reviewed"
    >30</UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<UiDescriptionList
  layout="tiles"
>
  <UiDescriptionItem
    term="Documents"
  >12</UiDescriptionItem>
  <UiDescriptionItem
    term="Changes"
  >48</UiDescriptionItem>
  <UiDescriptionItem
    term="Reviewed"
  >30</UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem],
  template: `
    <dl
      ui-description-list
      [layout]="'tiles'"
    >
      <div
        ui-description-item
        [term]="'Documents'"
      >12</div>
      <div
        ui-description-item
        [term]="'Changes'"
      >48</div>
      <div
        ui-description-item
        [term]="'Reviewed'"
      >30</div>
    </dl>
  `,
})
export default class Example {}

Stacked

layout="stacked" sets every term above its value, one pair per line, such as in a narrow side panel.

Owner
Ada Lovelace
Created
12 March 2026
Notes
Shared with the design team for review before the next release.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>

<ui-description-list
  layout="stacked"
>
  <ui-description-item
    term="Owner"
  >Ada Lovelace</ui-description-item>
  <ui-description-item
    term="Created"
  >12 March 2026</ui-description-item>
  <ui-description-item
    term="Notes"
  >Shared with the design team for review before the next release.</ui-description-item>
</ui-description-list>
<script setup>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList
    layout="stacked"
  >
    <UiDescriptionItem
      term="Owner"
    >Ada Lovelace</UiDescriptionItem>
    <UiDescriptionItem
      term="Created"
    >12 March 2026</UiDescriptionItem>
    <UiDescriptionItem
      term="Notes"
    >Shared with the design team for review before the next release.</UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="stacked"
  >
    <UiDescriptionItem
      term="Owner"
    >Ada Lovelace</UiDescriptionItem>
    <UiDescriptionItem
      term="Created"
    >12 March 2026</UiDescriptionItem>
    <UiDescriptionItem
      term="Notes"
    >Shared with the design team for review before the next release.</UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="stacked"
  >
    <UiDescriptionItem
      term="Owner"
    >Ada Lovelace</UiDescriptionItem>
    <UiDescriptionItem
      term="Created"
    >12 March 2026</UiDescriptionItem>
    <UiDescriptionItem
      term="Notes"
    >Shared with the design team for review before the next release.</UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<UiDescriptionList
  layout="stacked"
>
  <UiDescriptionItem
    term="Owner"
  >Ada Lovelace</UiDescriptionItem>
  <UiDescriptionItem
    term="Created"
  >12 March 2026</UiDescriptionItem>
  <UiDescriptionItem
    term="Notes"
  >Shared with the design team for review before the next release.</UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem],
  template: `
    <dl
      ui-description-list
      [layout]="'stacked'"
    >
      <div
        ui-description-item
        [term]="'Owner'"
      >Ada Lovelace</div>
      <div
        ui-description-item
        [term]="'Created'"
      >12 March 2026</div>
      <div
        ui-description-item
        [term]="'Notes'"
      >Shared with the design team for review before the next release.</div>
    </dl>
  `,
})
export default class Example {}

Grid of facts

layout="grid" sets facts in columns, term above value; columns="3" stops at three on a wide list. A value can be code, a badge, or a long identifier, which wraps rather than overflowing.

Order

ORD-20931

Status
Paid
Total
$1,240.00
Placed
2 April 2026
Customer
Northwind Traders
Checksum

9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-text/ui-text.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-badge/ui-badge.html"
>

<ui-description-list
  layout="grid"
  columns="3"
>
  <ui-description-item
    term="Order"
  >
    <ui-text
      variant="code"
    >ORD-20931</ui-text>
  </ui-description-item>
  <ui-description-item
    term="Status"
  >
    <ui-badge
      tone="success"
    >Paid</ui-badge>
  </ui-description-item>
  <ui-description-item
    term="Total"
  >$1,240.00</ui-description-item>
  <ui-description-item
    term="Placed"
  >2 April 2026</ui-description-item>
  <ui-description-item
    term="Customer"
  >Northwind Traders</ui-description-item>
  <ui-description-item
    term="Checksum"
  >
    <ui-text
      variant="code"
    >9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</ui-text>
  </ui-description-item>
</ui-description-list>
<script setup>
  import { UiBadge, UiDescriptionItem, UiDescriptionList, UiText } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList
    layout="grid"
    columns="3"
  >
    <UiDescriptionItem
      term="Order"
    >
      <UiText
        variant="code"
      >ORD-20931</UiText>
    </UiDescriptionItem>
    <UiDescriptionItem
      term="Status"
    >
      <UiBadge
        tone="success"
      >Paid</UiBadge>
    </UiDescriptionItem>
    <UiDescriptionItem
      term="Total"
    >$1,240.00</UiDescriptionItem>
    <UiDescriptionItem
      term="Placed"
    >2 April 2026</UiDescriptionItem>
    <UiDescriptionItem
      term="Customer"
    >Northwind Traders</UiDescriptionItem>
    <UiDescriptionItem
      term="Checksum"
    >
      <UiText
        variant="code"
      >9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</UiText>
    </UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiBadge, UiDescriptionItem, UiDescriptionList, UiText } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="grid"
    columns="3"
  >
    <UiDescriptionItem
      term="Order"
    >
      <UiText
        variant="code"
      >ORD-20931</UiText>
    </UiDescriptionItem>
    <UiDescriptionItem
      term="Status"
    >
      <UiBadge
        tone="success"
      >Paid</UiBadge>
    </UiDescriptionItem>
    <UiDescriptionItem
      term="Total"
    >$1,240.00</UiDescriptionItem>
    <UiDescriptionItem
      term="Placed"
    >2 April 2026</UiDescriptionItem>
    <UiDescriptionItem
      term="Customer"
    >Northwind Traders</UiDescriptionItem>
    <UiDescriptionItem
      term="Checksum"
    >
      <UiText
        variant="code"
      >9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</UiText>
    </UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiBadge, UiDescriptionItem, UiDescriptionList, UiText } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="grid"
    columns="3"
  >
    <UiDescriptionItem
      term="Order"
    >
      <UiText
        variant="code"
      >ORD-20931</UiText>
    </UiDescriptionItem>
    <UiDescriptionItem
      term="Status"
    >
      <UiBadge
        tone="success"
      >Paid</UiBadge>
    </UiDescriptionItem>
    <UiDescriptionItem
      term="Total"
    >$1,240.00</UiDescriptionItem>
    <UiDescriptionItem
      term="Placed"
    >2 April 2026</UiDescriptionItem>
    <UiDescriptionItem
      term="Customer"
    >Northwind Traders</UiDescriptionItem>
    <UiDescriptionItem
      term="Checksum"
    >
      <UiText
        variant="code"
      >9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</UiText>
    </UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiBadge, UiDescriptionItem, UiDescriptionList, UiText } from "@threadlabs/looma";
</script>

<UiDescriptionList
  layout="grid"
  columns="3"
>
  <UiDescriptionItem
    term="Order"
  >
    <UiText
      variant="code"
    >ORD-20931</UiText>
  </UiDescriptionItem>
  <UiDescriptionItem
    term="Status"
  >
    <UiBadge
      tone="success"
    >Paid</UiBadge>
  </UiDescriptionItem>
  <UiDescriptionItem
    term="Total"
  >$1,240.00</UiDescriptionItem>
  <UiDescriptionItem
    term="Placed"
  >2 April 2026</UiDescriptionItem>
  <UiDescriptionItem
    term="Customer"
  >Northwind Traders</UiDescriptionItem>
  <UiDescriptionItem
    term="Checksum"
  >
    <UiText
      variant="code"
    >9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</UiText>
  </UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiBadge, UiDescriptionItem, UiDescriptionList, UiText } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem, UiText, UiBadge],
  template: `
    <dl
      ui-description-list
      [layout]="'grid'"
      [columns]="'3'"
    >
      <div
        ui-description-item
        [term]="'Order'"
      >
        <ng-template
          ui-text
          [variant]="'code'"
        >ORD-20931</ng-template>
      </div>
      <div
        ui-description-item
        [term]="'Status'"
      >
        <span
          ui-badge
          [tone]="'success'"
        >Paid</span>
      </div>
      <div
        ui-description-item
        [term]="'Total'"
      >$1,240.00</div>
      <div
        ui-description-item
        [term]="'Placed'"
      >2 April 2026</div>
      <div
        ui-description-item
        [term]="'Customer'"
      >Northwind Traders</div>
      <div
        ui-description-item
        [term]="'Checksum'"
      >
        <ng-template
          ui-text
          [variant]="'code'"
        >9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08</ng-template>
      </div>
    </dl>
  `,
})
export default class Example {}

Compact

density="compact" sets the pairs close together, for facts inside other content such as a card.

Plan
Pro
Seats
8 of 10
Renews
1 May 2026

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>

<ui-description-list
  density="compact"
>
  <ui-description-item
    term="Plan"
  >Pro</ui-description-item>
  <ui-description-item
    term="Seats"
  >8 of 10</ui-description-item>
  <ui-description-item
    term="Renews"
  >1 May 2026</ui-description-item>
</ui-description-list>
<script setup>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList
    density="compact"
  >
    <UiDescriptionItem
      term="Plan"
    >Pro</UiDescriptionItem>
    <UiDescriptionItem
      term="Seats"
    >8 of 10</UiDescriptionItem>
    <UiDescriptionItem
      term="Renews"
    >1 May 2026</UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    density="compact"
  >
    <UiDescriptionItem
      term="Plan"
    >Pro</UiDescriptionItem>
    <UiDescriptionItem
      term="Seats"
    >8 of 10</UiDescriptionItem>
    <UiDescriptionItem
      term="Renews"
    >1 May 2026</UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    density="compact"
  >
    <UiDescriptionItem
      term="Plan"
    >Pro</UiDescriptionItem>
    <UiDescriptionItem
      term="Seats"
    >8 of 10</UiDescriptionItem>
    <UiDescriptionItem
      term="Renews"
    >1 May 2026</UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<UiDescriptionList
  density="compact"
>
  <UiDescriptionItem
    term="Plan"
  >Pro</UiDescriptionItem>
  <UiDescriptionItem
    term="Seats"
  >8 of 10</UiDescriptionItem>
  <UiDescriptionItem
    term="Renews"
  >1 May 2026</UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem],
  template: `
    <dl
      ui-description-list
      [density]="'compact'"
    >
      <div
        ui-description-item
        [term]="'Plan'"
      >Pro</div>
      <div
        ui-description-item
        [term]="'Seats'"
      >8 of 10</div>
      <div
        ui-description-item
        [term]="'Renews'"
      >1 May 2026</div>
    </dl>
  `,
})
export default class Example {}

Default

A term and its value, laid out by the list around it.

Plan
Pro

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>

<ui-description-list>
  <ui-description-item
    term="Plan"
  >Pro</ui-description-item>
</ui-description-list>
<script setup>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList>
    <UiDescriptionItem
      term="Plan"
    >Pro</UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList>
    <UiDescriptionItem
      term="Plan"
    >Pro</UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList>
    <UiDescriptionItem
      term="Plan"
    >Pro</UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<UiDescriptionList>
  <UiDescriptionItem
    term="Plan"
  >Pro</UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem],
  template: `
    <dl
      ui-description-list
    >
      <div
        ui-description-item
        [term]="'Plan'"
      >Pro</div>
    </dl>
  `,
})
export default class Example {}

As a tile

In a tiles list, the term sits above its value on a tile of its own.

Members
8

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-list/ui-description-list.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-description-item/ui-description-item.html"
>

<ui-description-list
  layout="tiles"
>
  <ui-description-item
    term="Members"
  >8</ui-description-item>
</ui-description-list>
<script setup>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<template>
  <UiDescriptionList
    layout="tiles"
  >
    <UiDescriptionItem
      term="Members"
    >8</UiDescriptionItem>
  </UiDescriptionList>
</template>
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="tiles"
  >
    <UiDescriptionItem
      term="Members"
    >8</UiDescriptionItem>
  </UiDescriptionList>;
}
/** @jsxImportSource preact */
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

export default function Example() {
  return <UiDescriptionList
    layout="tiles"
  >
    <UiDescriptionItem
      term="Members"
    >8</UiDescriptionItem>
  </UiDescriptionList>;
}
<script>
  import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";
</script>

<UiDescriptionList
  layout="tiles"
>
  <UiDescriptionItem
    term="Members"
  >8</UiDescriptionItem>
</UiDescriptionList>
import { Component } from "@angular/core";
import { UiDescriptionItem, UiDescriptionList } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiDescriptionList, UiDescriptionItem],
  template: `
    <dl
      ui-description-list
      [layout]="'tiles'"
    >
      <div
        ui-description-item
        [term]="'Members'"
      >8</div>
    </dl>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: dl

Attributes

NameDescriptionPropertyTypeDefaultAllowed values
columnsThe most columns grid and tiles set on a wide list; a narrow list still drops to fewer. Left unset, they fit as many as the width allows.columnskeyword—2, 3, 4
densityHow much room each pair takes. comfortable spaces the pairs apart to read; compact sets them close together, for facts inside other content such as a card or a table's detail row.densitykeywordcomfortablecomfortable, compact
layoutrows sets each term beside its value, one per line, for a short summary; stacked sets every term above its value, one pair per line, for a narrow space; grid sets the pairs, term above value, in as many columns as fit, for facts to scan across; tiles sets each pair on its own bordered tile in a grid, for figures to compare.layoutkeywordrowsrows, stacked, grid, tiles

Framework props

NameTypeDefaultAllowed values
columns"2" | "3" | "4"—2, 3, 4
density"comfortable" | "compact"comfortablecomfortable, compact
layout"rows" | "stacked" | "grid" | "tiles"rowsrows, stacked, grid, tiles

Events

No events.

Slots

NamePurpose
defaultDefault child content.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

TokenFallback
--ui-border-strong—
--ui-border-width—
--ui-font-size-lg—
--ui-space-1—
--ui-space-2—
--ui-space-3—
--ui-space-4—
--ui-space-6—

Description Item API

One term and its value (the content) in a Description List, laid out by the list. See Description List.

Package: @threadlabs/looma · Native root: div

Attributes

NameDescriptionPropertyTypeDefaultAllowed values
termWhat the value is, such as "Invited by". The value is the item's content.termstring—

Framework props

NameTypeDefaultAllowed values
termstring—

Events

No events.

Slots

NamePurpose
defaultDefault child content.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

TokenFallback
--ui-border-default—
--ui-font-medium—
--ui-font-size-sm—
--ui-radius-md—
--ui-space-1—
--ui-space-6—
--ui-text-muted—
--ui-text-primary—