Share Document
A share card lets users grant others access to a document without leaving their work. The usual shape is a copyable link up top and a people list below, where each person carries an access level select like view, comment, or edit. Document editors, design tools, and file managers reach for this pattern whenever collaboration happens per file.
<div class="card">
<div class="card-header">
<h3 class="card-title">Share Document</h3>
<p class="card-description">
Invite others to view or edit this document and work together seamlessly.
</p>
</div>
<div class="card-content flex flex-col gap-6">
<div class="flex gap-2">
<input
class="input flex-1"
type="text"
readonly=""
aria-label="Document link"
value="https://example.com/doc/abc123"
/><button class="btn btn-outline btn-icon" aria-label="Copy link">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-copy"
aria-hidden="true"
>
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
></path>
</svg>
</button>
</div>
<div class="separator"></div>
<span class="text-sm font-medium">People with access</span>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Leila Navarro"
/><span class="avatar-fallback">LN</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Leila Navarro</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select class="select h-8 w-22" aria-label="Permission for Leila Navarro">
<option value="write">Write</option>
<option value="read">Read</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Theo Marchetti"
/><span class="avatar-fallback">TM</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Theo Marchetti</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Theo Marchetti"
>
<option value="read">Read</option>
<option value="write">Write</option>
</select>
</div>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="avatar avatar-lg"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt="Maya Santoso"
/><span class="avatar-fallback">MS</span></span
>
<div class="text-sm">
<p class="font-medium text-foreground">Camille Laurent</p>
<p class="text-muted-foreground">[email protected]</p>
</div>
</div>
<select
class="select h-8 w-22"
aria-label="Permission for Camille Laurent"
>
<option value="read">Read</option>
<option value="write">Write</option>
</select>
</div>
</div>
</div>Browse more card examples.