<!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: 70px;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: #000000;
}
#figma-attached-file .file-attachment,
#figma-attached-file .file-upload-preview-item {
flex: 1 1 0;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: auto;
border-radius: 40px;
}
</style>
</head>
<body>
<div id="figma-attached-file">
<figure class="file-attachment is-empty">
<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-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"><i class="ph ph-warning"></i></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"><i class="ph ph-arrows-clockwise"></i></div>
<figcaption>
<span class="file-attachment-name">Retry archive.zip</span>
</figcaption>
</figure>
</div>
</body>
</html>
