Card List

<div class="d-f fd-c g-4 max-w-md">
  <div class="d-f ai-c g-4 p-4 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <path
          d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <polyline
          points="152 32 152 88 208 88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="96"
          y1="136"
          x2="160"
          y2="136"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="96"
          y1="168"
          x2="160"
          y2="168"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <div class="f-1">
      <h4 class="ff-s fs-sm fw-600 tc-slate mb-1">2024-roadmap.txt</h4>
      <p class="fs-xs tc-slate-6 m-0">12 KB</p>
    </div>
  </div>
  <div class="d-f ai-c g-4 p-4 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <polygon
          points="152 224 104 152 76.36 193.46 60 168 24 224 152 224"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <polyline
          points="152 32 152 88 208 88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M192,224h8a8,8,0,0,0,8-8V88L152,32H56a8,8,0,0,0-8,8v88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <div class="f-1">
      <h4 class="ff-s fs-sm fw-600 tc-slate mb-1">beach-sunset.jpg</h4>
      <p class="fs-xs tc-slate-6 m-0">2.1 MB</p>
    </div>
  </div>
  <div class="d-f ai-c g-4 p-4 b-1 bc-silver-4 rad-0">
    <div class="d-f ai-c jc-c d-10 rad-9 bg-silver-1 tc-slate">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-6 h-6"
        viewBox="0 0 256 256"
        aria-hidden="true"
      >
        <rect width="256" height="256" fill="none" />
        <polyline
          points="148 208 120 208 120 152"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M48,112V40a8,8,0,0,1,8-8h96l56,56v24"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <polyline
          points="152 32 152 88 208 88"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="48"
          y1="152"
          x2="88"
          y2="208"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="88"
          y1="152"
          x2="48"
          y2="208"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <path
          d="M203.9,153.6s-29.43-7.78-31.8,11,38.43,10.12,35.78,30.72c-2.47,19.16-31.78,11-31.78,11"
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </div>
    <div class="f-1">
      <h4 class="ff-s fs-sm fw-600 tc-slate mb-1">monthly-report.xlsx</h4>
      <p class="fs-xs tc-slate-6 m-0">45 KB</p>
    </div>
  </div>
</div>

<div class="d-f fd-c g-4 max-w-md">
  <div class="d-f ai-c g-4 p-4 b-1 bc-silver-4 rad-0">
    <div class="d-10 rad-9 o-h">
      <img src="/img/people/phoenix-baker.jpg" alt="Avatar" class="w-full h-full of-c" />
    </div>
    <div class="f-1">
      <h4 class="ff-s fs-sm fw-600 tc-slate mb-1">Phoenix Baker</h4>
      <p class="fs-xs tc-slate-6 m-0">Engineering Manager</p>
    </div>
    <button class="px-3 py-1 rad-0 fs-xs fw-600 bg-white tc-slate b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Edit</button>
  </div>
  <div class="d-f ai-c g-4 p-4 b-1 bc-silver-4 rad-0">
    <div class="d-10 rad-9 o-h">
      <img src="/img/people/kelly-williams.jpg" alt="Avatar" class="w-full h-full of-c" />
    </div>
    <div class="f-1">
      <h4 class="ff-s fs-sm fw-600 tc-slate mb-1">Kelly Williams</h4>
      <p class="fs-xs tc-slate-6 m-0">Frontend Developer</p>
    </div>
    <button class="px-3 py-1 rad-0 fs-xs fw-600 bg-white tc-slate b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Edit</button>
  </div>
</div>