Back to site

Definition List

Lists term/definition pairs for structured content.

Monday
8am – 5pm
Tuesday
8am – 5pm
Wednesday
8am – 4:30pm
Thursday
9am – 4:45pm
Friday
9am – 5pm
Saturday
Closed
Sunday
Closed 
---
import DefinitionList from "@core-elements/definition-list/DefinitionList.astro";
import DefinitionListItem from "@core-elements/definition-list/DefinitionListItem.astro";
---

<DefinitionList alignX="start">
  <DefinitionListItem title="Monday">8am – 5pm</DefinitionListItem>
  <DefinitionListItem title="Tuesday">8am – 5pm</DefinitionListItem>
  <DefinitionListItem title="Wednesday">8am – 4:30pm</DefinitionListItem>
  <DefinitionListItem title="Thursday">9am – 4:45pm</DefinitionListItem>
  <DefinitionListItem title="Friday">9am – 5pm</DefinitionListItem>
  <DefinitionListItem title="Saturday">Closed</DefinitionListItem>
  <DefinitionListItem title="Sunday">Closed</DefinitionListItem>
</DefinitionList>
---
blocks:
  - _component: building-blocks/core-elements/definition-list
    items:
      - title: Monday
        text: 8am – 5pm
      - title: Tuesday
        text: 8am – 5pm
      - title: Wednesday
        text: 8am – 4:30pm
      - title: Thursday
        text: 9am – 4:45pm
      - title: Friday
        text: 9am – 5pm
      - title: Saturday
        text: Closed
      - title: Sunday
        text: Closed
    alignX: start
---

Overview

A semantic <dl> component for displaying term/definition pairs. Ideal for glossaries, FAQs, and other label–description content. Supports markdown formatting in definitions.

Properties

items array | default: array

Item Properties:

_component string | default: building-blocks/core-elements/definition-list/definition-list-item

title string

A bolded title for the list item.

text string

The text content of the list item.

alignX enum | default: start

The horizontal alignment of the definition list items.

Accepted values:
  • start
  • center
  • end

Slots

default

The content inside the DefinitionList. Used only when the items property is not set.

Child Component:
<DefinitionListItem>
Properties (documented under the items property above):
  • text/slot

Examples

AlignX

Brand
TechCorp
Model
ProBook X1
Color
Space Gray
Weight
2.8 lbs
Dimensions
13.3" x 9.2" x 0.6"
Warranty
2 years
SKU
TB-X1-2024 
---
import DefinitionList from "@core-elements/definition-list/DefinitionList.astro";
import DefinitionListItem from "@core-elements/definition-list/DefinitionListItem.astro";
---

<DefinitionList alignX="start">
  <DefinitionListItem title="Brand">TechCorp</DefinitionListItem>
  <DefinitionListItem title="Model">ProBook X1</DefinitionListItem>
  <DefinitionListItem title="Color">Space Gray</DefinitionListItem>
  <DefinitionListItem title="Weight">2.8 lbs</DefinitionListItem>
  <DefinitionListItem title="Dimensions">13.3&quot; x 9.2&quot; x 0.6&quot;</DefinitionListItem>
  <DefinitionListItem title="Warranty">2 years</DefinitionListItem>
  <DefinitionListItem title="SKU">TB-X1-2024</DefinitionListItem>
</DefinitionList>
---
blocks:
  - _component: building-blocks/core-elements/definition-list
    items:
      - title: Brand
        text: TechCorp
      - title: Model
        text: ProBook X1
      - title: Color
        text: Space Gray
      - title: Weight
        text: 2.8 lbs
      - title: Dimensions
        text: 13.3" x 9.2" x 0.6"
      - title: Warranty
        text: 2 years
      - title: SKU
        text: TB-X1-2024
    alignX: start
---
Brand
TechCorp
Model
ProBook X1
Color
Space Gray
Weight
2.8 lbs
Dimensions
13.3" x 9.2" x 0.6"
Warranty
2 years
SKU
TB-X1-2024 
---
import DefinitionList from "@core-elements/definition-list/DefinitionList.astro";
import DefinitionListItem from "@core-elements/definition-list/DefinitionListItem.astro";
---

<DefinitionList alignX="center">
  <DefinitionListItem title="Brand">TechCorp</DefinitionListItem>
  <DefinitionListItem title="Model">ProBook X1</DefinitionListItem>
  <DefinitionListItem title="Color">Space Gray</DefinitionListItem>
  <DefinitionListItem title="Weight">2.8 lbs</DefinitionListItem>
  <DefinitionListItem title="Dimensions">13.3&quot; x 9.2&quot; x 0.6&quot;</DefinitionListItem>
  <DefinitionListItem title="Warranty">2 years</DefinitionListItem>
  <DefinitionListItem title="SKU">TB-X1-2024</DefinitionListItem>
</DefinitionList>
---
blocks:
  - _component: building-blocks/core-elements/definition-list
    items:
      - title: Brand
        text: TechCorp
      - title: Model
        text: ProBook X1
      - title: Color
        text: Space Gray
      - title: Weight
        text: 2.8 lbs
      - title: Dimensions
        text: 13.3" x 9.2" x 0.6"
      - title: Warranty
        text: 2 years
      - title: SKU
        text: TB-X1-2024
    alignX: center
---
Brand
TechCorp
Model
ProBook X1
Color
Space Gray
Weight
2.8 lbs
Dimensions
13.3" x 9.2" x 0.6"
Warranty
2 years
SKU
TB-X1-2024 
---
import DefinitionList from "@core-elements/definition-list/DefinitionList.astro";
import DefinitionListItem from "@core-elements/definition-list/DefinitionListItem.astro";
---

<DefinitionList alignX="end">
  <DefinitionListItem title="Brand">TechCorp</DefinitionListItem>
  <DefinitionListItem title="Model">ProBook X1</DefinitionListItem>
  <DefinitionListItem title="Color">Space Gray</DefinitionListItem>
  <DefinitionListItem title="Weight">2.8 lbs</DefinitionListItem>
  <DefinitionListItem title="Dimensions">13.3&quot; x 9.2&quot; x 0.6&quot;</DefinitionListItem>
  <DefinitionListItem title="Warranty">2 years</DefinitionListItem>
  <DefinitionListItem title="SKU">TB-X1-2024</DefinitionListItem>
</DefinitionList>
---
blocks:
  - _component: building-blocks/core-elements/definition-list
    items:
      - title: Brand
        text: TechCorp
      - title: Model
        text: ProBook X1
      - title: Color
        text: Space Gray
      - title: Weight
        text: 2.8 lbs
      - title: Dimensions
        text: 13.3" x 9.2" x 0.6"
      - title: Warranty
        text: 2 years
      - title: SKU
        text: TB-X1-2024
    alignX: end
---