Details Lists

Ported from HyperUI’s Details Lists — see Attribution.

Base

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class DetailsList1Example extends StatelessWidget {
  const DetailsList1Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flow-root',
        child: Style(
          '-my-3 divide-y divide-gray-200 text-sm dark:divide-gray-700',
          children: const [
            Style(
              'grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Title'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Mr'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Name'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('John Frusciante'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Occupation'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Guitarist'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Salary'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(r'$1,000,000+'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Bio'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(
                    '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?',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

<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>

Striped

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class DetailsList2Example extends StatelessWidget {
  const DetailsList2Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flow-root',
        child: Style(
          '-my-3 divide-y divide-gray-200 text-sm *:even:bg-gray-50 dark:divide-gray-700 dark:*:even:bg-gray-800',
          children: const [
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Title'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Mr'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Name'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('John Frusciante'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Occupation'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Guitarist'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Salary'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(r'$1,000,000+'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Bio'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(
                    '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?',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

<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>

Bordered

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class DetailsList3Example extends StatelessWidget {
  const DetailsList3Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flow-root',
        child: Style(
          '-my-3 divide-y divide-gray-200 rounded border border-gray-200 text-sm dark:divide-gray-700 dark:border-gray-800',
          children: const [
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Title'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Mr'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Name'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('John Frusciante'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Occupation'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Guitarist'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Salary'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(r'$1,000,000+'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Bio'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(
                    '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?',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

<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>

Striped and bordered

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class DetailsList4Example extends StatelessWidget {
  const DetailsList4Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-3xl p-6',
      child: Style(
        'flow-root',
        child: Style(
          '-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',
          children: const [
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Title'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Mr'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Name'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('John Frusciante'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Occupation'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text('Guitarist'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Salary'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(r'$1,000,000+'),
                ),
              ],
            ),
            Style(
              'grid grid-cols-1 gap-1 p-3 sm:grid-cols-3 sm:gap-4',
              children: [
                Style(
                  'font-medium text-gray-900 dark:text-white',
                  child: Text('Bio'),
                ),
                Style(
                  'text-gray-700 sm:col-span-2 dark:text-gray-200',
                  child: Text(
                    '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?',
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

<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>