@use '../config/config'; // Use (need) only if this is a standalone file.
@use 'sprucecss/scss/spruce' as *;

.file-list {
  @include generate-variables($form-control, $include: ('border-width', 'border-radius'));
  display: flex;
  flex-direction: column;
  gap: spacer('s');

  &__items {
    @include clear-list;
    border: config('border-width', $form-control) solid color('border', 'form');
    border-radius: config('border-radius', $form-control);
    padding: spacer('xs');

    > li + li {
      border-block-start: config('border-width', $form-control) solid color('border');
      margin-block-start: spacer('xs');
      padding-block-start: spacer('xs');
    }
  }
}

.file-list-item {
  align-items: center;
  display: flex;
  gap: spacer('s');
  justify-content: space-between;

  &__icon {
    align-items: center;
    aspect-ratio: 1;
    background-color: color('background', 'media');
    border-radius: config('border-radius-sm', $display);
    display: flex;
    inline-size: 2.5rem;
    justify-content: center;

    svg {
      --size: 1rem;
      block-size: var(--size);
      color: color('icon', 'media');
      inline-size: var(--size);
    }
  }

  &__column {
    align-items: center;
    display: flex;
    gap: spacer('s');
  }

  &__thumbnail {
    aspect-ratio: 1;
    border-radius: config('border-radius-sm', $display);
    inline-size: 2.5rem;
  }

  &__name {
    @include text-ellipsis(1);
    max-inline-size: 10ch;

    @include breakpoint('xs') {
      max-inline-size: 25ch;
    }
  }

  &__actions {
    align-items: center;
    display: flex;
    gap: spacer('xxs');
  }
}

<div class="form-group">
    <span class="form-label">Gallery</span>
    <div class="file-list">
        <button class="btn btn--primary btn--lg btn--block">Choose file(s)</button>
        <ul class="file-list__items">
            <li class="file-list-item">
                <div class="file-list-item__column">
                    <img class="file-list-item__thumbnail" src="https://picsum.photos/80/80" alt="" />
                    <span class="file-list-item__name" id="list-item-1">pic1234.jpg</span>
                </div>
                <div class="file-list-item__actions">
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-1" aria-label="Move one up" disabled="disabled">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <polyline points='18 15 12 9 6 15'></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-1" aria-label="Move one down">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <polyline points='6 9 12 15 18 9'></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--delete btn--sm btn--icon" aria-describedby="list-item-1" aria-label="Remove">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <line x1='18' y1='6' x2='6' y2='18'></line>
                            <line x1='6' y1='6' x2='18' y2='18'></line>
                        </svg>
                    </button>
                </div>
            </li>
            <li class="file-list-item">
                <div class="file-list-item__column">
                    <span class="file-list-item__icon">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='icon'>
                            <path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'></path>
                            <polyline points='14 2 14 8 20 8'></polyline>
                            <line x1='16' y1='13' x2='8' y2='13'></line>
                            <line x1='16' y1='17' x2='8' y2='17'></line>
                            <polyline points='10 9 9 9 8 9'></polyline>
                        </svg>
                    </span>
                    <span class="file-list-item__name" id="list-item-2">document5678.pdf</span>
                </div>
                <div class="file-list-item__actions">
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-2" aria-label="Move one up">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <polyline points='18 15 12 9 6 15'></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-2" aria-label="Move one down">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <polyline points='6 9 12 15 18 9'></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--delete btn--sm btn--icon" aria-describedby="list-item-2" aria-label="Remove">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <line x1='18' y1='6' x2='6' y2='18'></line>
                            <line x1='6' y1='6' x2='18' y2='18'></line>
                        </svg>
                    </button>
                </div>
            </li>
            <li class="file-list-item">
                <div class="file-list-item__column">
                    <img class="file-list-item__thumbnail" src="https://picsum.photos/81/81" alt="" />
                    <span class="file-list-item__name" id="list-item-3">image5678.png</span>
                </div>
                <div class="file-list-item__actions">
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-3" aria-label="Move one up">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <polyline points='18 15 12 9 6 15'></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--light btn--sm btn--icon" aria-describedby="list-item-3" aria-label="Move one down" disabled="disabled">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <polyline points='6 9 12 15 18 9'></polyline>
                        </svg>
                    </button>
                    <button class="btn btn--delete btn--sm btn--icon" aria-describedby="list-item-3" aria-label="Remove">
                        <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='btn__icon'>
                            <line x1='18' y1='6' x2='6' y2='18'></line>
                            <line x1='6' y1='6' x2='18' y2='18'></line>
                        </svg>
                    </button>
                </div>
            </li>
        </ul>
    </div>
</div>

File List

Technical Details

A multi-item media list is ideal for an admin interface (gallery) or anywhere where you need multiple attachment options.

Dependencies

For this component there are some extra variables at the config page like you see it below.

$colors: (
  'media': (
    'background': hsl(262deg 71% 98%),
    'dropzone-background': hsl(214deg 98% 49% / 75%),
    'dropzone-border': hsl(214deg 98% 40%),
    'icon': hsl(262deg 71% 49%),
  ),
),