Documentation Playground
Skip to content
Docs

Data List

Displays metadata as a list of key-value pairs.
Status
Authorized
ID
u_2J89JSA4GJ
Name
Vlad Moroz
Email
vlad@workos.com
Company
WorkOS 
<.data_list>
  <.data_list_item align="center">
    <:label>Status</:label>
    <:value>
      <.badge color="jade" variant="soft" radius="full">Authorized</.badge>
    </:value>
  </.data_list_item>
  <.data_list_item>
    <:label>ID</:label>
    <:value>
      <.code variant="ghost">u_2J89JSA4GJ</.code>
    </:value>
  </.data_list_item>
  <.data_list_item>
    <:label>Name</:label>
    <:value>Vlad Moroz</:value>
  </.data_list_item>
  <.data_list_item>
    <:label>Email</:label>
    <:value><.es_link href="mailto:vlad@workos.com">vlad@workos.com</.es_link></:value>
  </.data_list_item>
  <.data_list_item>
    <:label>Company</:label>
    <:value><.es_link href="https://workos.com" target="_blank">WorkOS</.es_link></:value>
  </.data_list_item>
</.data_list>

API Reference

This component is based on the dl element and supports common margin props. Label and value are :label and :value slots on data_list_item/1 — there are no separate Label or Value components.

Root

Contains all the parts of the data list.

Prop Type Default Description
class string nil
m any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mb any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
ml any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mr any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mt any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
mx any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
my any — Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
orientation string "horizontal"
size string "2"
style string nil
trim string —
class
Type string Default nil
m Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mb Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
ml Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mr Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mt Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
mx Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
my Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type any Default —
orientation
Type string Default "horizontal"
size
Type string Default "2"
style
Type string Default nil
trim
Type string Default —

Item

Wraps a key-value pair.

Prop Type Default Description
align string "baseline"
class string nil
style string nil
align
Type string Default "baseline"
class
Type string Default nil
style
Type string Default nil

Examples

Orientation

Use the orientation prop to change the way the data list is laid out.

Name
Vlad Moroz
Email
vlad@workos.com
Company
WorkOS 
<.data_list orientation="vertical">
  <.data_list_item>
    <:label>Name</:label>
    <:value>Vlad Moroz</:value>
  </.data_list_item>
  <.data_list_item>
    <:label>Email</:label>
    <:value><.es_link href="mailto:vlad@workos.com">vlad@workos.com</.es_link></:value>
  </.data_list_item>
  <.data_list_item>
    <:label>Company</:label>
    <:value><.es_link href="https://workos.com" target="_blank">WorkOS</.es_link></:value>
  </.data_list_item>
</.data_list>

Size

Use the size prop to change the size of the data list.

Name
Vlad Moroz
Email
vlad@workos.com
Name
Vlad Moroz
Email
vlad@workos.com
Name
Vlad Moroz
Email
vlad@workos.com 
<.flex direction="column" gap="6">
  <.data_list size="1">
    <.data_list_item>
      <:label>Name</:label>
      <:value>Vlad Moroz</:value>
    </.data_list_item>
    <.data_list_item>
      <:label>Email</:label>
      <:value><.es_link href="mailto:vlad@workos.com">vlad@workos.com</.es_link></:value>
    </.data_list_item>
  </.data_list>
  <.data_list size="2">
    <.data_list_item>
      <:label>Name</:label>
      <:value>Vlad Moroz</:value>
    </.data_list_item>
    <.data_list_item>
      <:label>Email</:label>
      <:value><.es_link href="mailto:vlad@workos.com">vlad@workos.com</.es_link></:value>
    </.data_list_item>
  </.data_list>
  <.data_list size="3">
    <.data_list_item>
      <:label>Name</:label>
      <:value>Vlad Moroz</:value>
    </.data_list_item>
    <.data_list_item>
      <:label>Email</:label>
      <:value><.es_link href="mailto:vlad@workos.com">vlad@workos.com</.es_link></:value>
    </.data_list_item>
  </.data_list>
</.flex>
← Context Menu Dialog →