<div style="display:grid;gap:12px;max-width:560px">
<.attachment name="october-invoices.pdf" description="PDF · 2.4 MB" href="#">
<:actions><a class="ui-btn" data-variant="ghost" data-size="icon-sm" href="#" aria-label="Download october-invoices.pdf"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/></svg></a><button class="ui-btn" data-variant="ghost" data-size="icon-sm" aria-label="Remove october-invoices.pdf"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></:actions>
</.attachment>
<.attachment name="customer-list.csv" description="Uploading · 64%" state="uploading">
<:actions><button class="ui-btn" data-variant="ghost" data-size="icon-sm" aria-label="Cancel uploading customer-list.csv"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></:actions>
</.attachment>
<.attachment name="recording.mov" description="Too large: 312 MB, the limit is 100 MB" state="error">
<:actions><button class="ui-btn" data-variant="ghost" data-size="icon-sm" aria-label="Remove recording.mov"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></:actions>
</.attachment>
<div class="ui-attachment-group">
<.attachment name="offsite-1.jpg" description="1.1 MB" orientation="vertical" image="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%238aa4c8%27/%3E%3C/svg%3E" />
<.attachment name="offsite-2.jpg" description="980 KB" orientation="vertical" image="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27%3E%3Crect width=%27100%25%27 height=%27100%25%27 fill=%27%236d7f5c%27/%3E%3C/svg%3E" />
<.attachment name="brief.docx" description="48 KB" orientation="vertical" size="sm" />
</div>
</div>