Skip to content
HyperUI

No results found.

Back to application components

Details Lists

Responsive details list components for displaying structured data with striped rows, borders, and dark mode support for web applications and dashboards.

4/4 Dark Mode Updated: N/ANo commit information available.

Base

markmead

<div class="flow-root">
  <dl class="-my-3 divide-y divide-gray-200 text-sm">
    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Title</dt>

      <dd class="text-gray-700 sm:col-span-2">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Name</dt>

      <dd class="text-gray-700 sm:col-span-2">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Base (Dark)

markmead

<div class="flow-root">
  <dl class="-my-3 divide-y divide-gray-200 text-sm dark:divide-gray-700">
    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Title</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Name</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Striped

markmead

<div class="flow-root">
  <dl class="-my-3 divide-y divide-gray-200 text-sm *:even:bg-gray-50">
    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Title</dt>

      <dd class="text-gray-700 sm:col-span-2">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Name</dt>

      <dd class="text-gray-700 sm:col-span-2">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Striped (Dark)

markmead

<div class="flow-root">
  <dl
    class="-my-3 divide-y divide-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800"
  >
    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Title</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Name</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Bordered

markmead

<div class="flow-root">
  <dl class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm">
    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Title</dt>

      <dd class="text-gray-700 sm:col-span-2">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Name</dt>

      <dd class="text-gray-700 sm:col-span-2">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Bordered (Dark)

markmead

<div class="flow-root">
  <dl
    class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm dark:divide-gray-700 dark:border-gray-800"
  >
    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Title</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Name</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Striped and bordered

markmead

<div class="flow-root">
  <dl
    class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm *:even:bg-gray-50"
  >
    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Title</dt>

      <dd class="text-gray-700 sm:col-span-2">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Name</dt>

      <dd class="text-gray-700 sm:col-span-2">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Striped and bordered (Dark)

markmead

<div class="flow-root">
  <dl
    class="-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:border-gray-800 dark:*:even:bg-gray-800"
  >
    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Title</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Mr</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Name</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">John Frusciante</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Occupation</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">Guitarist</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Salary</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">$1,000,000+</dd>
    </div>

    <div class="grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4">
      <dt class="font-medium text-gray-900 dark:text-white">Bio</dt>

      <dd class="text-gray-700 sm:col-span-2 dark:text-gray-200">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis debitis explicabo
        doloremque impedit nesciunt dolorem facere, dolor quasi veritatis quia fugit aperiam
        aspernatur neque molestiae labore aliquam soluta architecto?
      </dd>
    </div>
  </dl>
</div>

Related components

View all application components