<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VMK UI Kit — Figma Attached File Match</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/fonts/phosphor-icons/src/css/icons.css">
<link rel="stylesheet" href="/css/kit.css">
<style>
html, body { padding: 0; margin: 0; background: #000000; }
#figma-attached-file {
width: 560px;
height: 2000px;
padding: 80px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
background: #000000;
}
#figma-attached-file .file-attachment,
#figma-attached-file .file-upload-preview-item {
flex: 0 0 auto;
width: 400px;
height: 400px;
border-radius: 40px;
}
</style>
</head>
<body>
<div id="figma-attached-file">
<figure class="file-attachment is-pdf">
<div class="file-attachment-header">
<span class="file-attachment-format">PDF</span>
<button type="button" class="file-attachment-remove" aria-label="Remove PDF"><i class="ph ph-x"></i></button>
</div>
<div class="file-attachment-visual"></div>
<figcaption>
<span class="file-attachment-name">Title of the document file version 2.pdf</span>
</figcaption>
</figure>
<figure class="file-attachment is-image is-placeholder">
<div class="file-attachment-header">
<span class="file-attachment-format">JPG</span>
<button type="button" class="file-attachment-remove" aria-label="Remove JPG"><i class="ph ph-x"></i></button>
</div>
<div class="file-attachment-visual"></div>
<figcaption>
<span class="file-attachment-name">image.jpg</span>
</figcaption>
</figure>
<figure class="file-attachment is-error">
<div class="file-attachment-header">
<span class="file-attachment-format">DOCX</span>
<button type="button" class="file-attachment-remove" aria-label="Remove DOCX"><i class="ph ph-x"></i></button>
</div>
<div class="file-attachment-visual">
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" viewBox="0 0 256 256">
<path d="M236.8 188.09 149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19 23.51 23.51 0 0 0 .02-23.72ZM120 80a8 8 0 0 1 16 0v80a8 8 0 0 1-16 0Zm8 128a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z"/>
</svg>
</div>
<figcaption>
<span class="file-attachment-name">Upload failed.docx</span>
</figcaption>
</figure>
<figure class="file-attachment is-retry">
<div class="file-attachment-header">
<span class="file-attachment-format">ZIP</span>
<button type="button" class="file-attachment-remove" aria-label="Remove ZIP"><i class="ph ph-x"></i></button>
</div>
<div class="file-attachment-visual">
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" viewBox="0 0 256 256">
<path d="M240 128a8 8 0 0 1-16 0 96 96 0 0 0-163.88-67.88l-19.3 17.88H42.65a8 8 0 0 1 0-16H74a8 8 0 0 1 8 8v31.35a8 8 0 0 1-16 0v-17.52l-17.88 19.3A112 112 0 0 1 240 128ZM209.67 201.55A96 96 0 0 1 32 128a8 8 0 0 1 16 0 80 80 0 0 0 145.45 47.55l17.88-19.3V176a8 8 0 0 1 16 0v31.35a8 8 0 0 1-8 8h-31.35a8 8 0 0 1 0-16h17.52Z"/>
</svg>
</div>
<figcaption>
<span class="file-attachment-name">Retry archive.zip</span>
</figcaption>
</figure>
</div>
</body>
</html>
