WovenUITemplates
Team settings template
A team settings panel with tabs, an invite form, a warning and a members list with role badges. The two columns stack below the lg breakpoint.
Preview
Buttons, fields and rows in this template are styled spans, so it renders as a picture of the interface. Use button, input and a elements where your page needs them.
HTML to copy
The markup of the preview, in WovenUI core utility classes. It needs only the prebuilt@wovenui/core/dist/wovenui.min.css, or your own build with $generate-utility-classes: true. No components package and no JavaScript.
HTML
<div class="flex col bg-surface text-regular text-sm text-start rounded-xl border-1 shadow-lg overflow-hidden">
<div class="flex x-center gap-3 px-5 pt-5">
<span class="grow min-w-0">
<span class="block text-lg font-semibold truncate">Team settings</span>
<span class="block text-muted truncate">Ardent Studio, 3 of 10 seats</span>
</span>
<span class="flex x-center gap-2 h-8 px-3 rounded-md border-1 hover:bg-hover cursor-pointer no-shrink">
<svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M62,106.6V40a6,6,0,0,0-12,0v66.6a30,30,0,0,0,0,58.8V216a6,6,0,0,0,12,0V165.4a30,30,0,0,0,0-58.8ZM56,154a18,18,0,1,1,18-18A18,18,0,0,1,56,154Zm78-95.4V40a6,6,0,0,0-12,0V58.6a30,30,0,0,0,0,58.8V216a6,6,0,0,0,12,0V117.4a30,30,0,0,0,0-58.8ZM128,106a18,18,0,1,1,18-18A18,18,0,0,1,128,106Zm102,62a30.05,30.05,0,0,0-24-29.4V40a6,6,0,0,0-12,0v98.6a30,30,0,0,0,0,58.8V216a6,6,0,0,0,12,0V197.4A30.05,30.05,0,0,0,230,168Zm-30,18a18,18,0,1,1,18-18A18,18,0,0,1,200,186Z" fill="currentColor"/></svg>
<span class="hide inline@sm">Preferences</span>
</span>
</div>
<div class="flex gap-4 px-5 mt-4 border-b-1">
<span class="py-2 border-b-2 cursor-pointer border-brand text-brand font-medium">Members</span>
<span class="py-2 border-b-2 cursor-pointer border-transparent text-muted hover:text-regular">Billing</span>
<span class="py-2 border-b-2 cursor-pointer border-transparent text-muted hover:text-regular">Security</span>
</div>
<div class="grid cols-12@lg">
<div class="col-span-5@lg flex col gap-4 p-5 border-b-1">
<span class="font-semibold">Invite a teammate</span>
<span class="flex col gap-1">
<span class="text-xs font-medium text-muted">Email</span>
<span class="flex x-center gap-2 h-10 px-3 rounded-md border-1 border-control bg-base hover:border-control-hover cursor-text">
<svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M227.33,91l-96-64a6,6,0,0,0-6.66,0l-96,64A6,6,0,0,0,26,96V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V96A6,6,0,0,0,227.33,91ZM100.18,152,38,195.9V107.65Zm12.27,6h31.1l62.29,44H50.16Zm43.37-6L218,107.65V195.9ZM128,39.21l85.43,57L143.53,146H112.47L42.57,96.17Z" fill="currentColor"/></svg>
<span class="text-muted truncate">[email protected]</span>
</span>
</span>
<span class="flex col gap-1">
<span class="text-xs font-medium text-muted">Role</span>
<span class="flex x-center gap-2 h-10 px-3 rounded-md border-1 border-control bg-base hover:border-control-hover cursor-text between">
<span>Editor</span>
<svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z" fill="currentColor"/></svg>
</span>
</span>
<label class="flex x-center gap-2 cursor-pointer">
<input type="checkbox" checked>
<span>Send a welcome email</span>
</label>
<span class="flex x-center gap-2 mt-1">
<span class="flex x-center gap-2 h-10 px-4 rounded-md bg-brand text-on-brand font-medium hover:shadow-md cursor-pointer">
<svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M225.88,30.12a13.83,13.83,0,0,0-13.7-3.58l-.11,0L20.14,84.77A14,14,0,0,0,18,110.85l85.56,41.64L145.12,238a13.87,13.87,0,0,0,12.61,8c.4,0,.81,0,1.21-.05a13.9,13.9,0,0,0,12.29-10.09l58.2-191.93,0-.11A13.83,13.83,0,0,0,225.88,30.12Zm-8,10.4L159.73,232.43l0,.11a2,2,0,0,1-3.76.26l-40.68-83.58,49-49a6,6,0,1,0-8.49-8.49l-49,49L23.15,100a2,2,0,0,1,.31-3.74l.11,0L215.48,38.08a1.94,1.94,0,0,1,1.92.52A2,2,0,0,1,217.92,40.52Z" fill="currentColor"/></svg>
Send invite
</span>
<span class="flex x-center h-10 px-4 rounded-md border-1 hover:bg-hover cursor-pointer">Cancel</span>
</span>
</div>
<div class="relative col-span-7@lg flex col gap-4 p-5 border-b-1">
<span class="hide block@lg absolute top-0 bottom-0 start-0 border-s-1" aria-hidden="true"></span>
<span class="flex x-start gap-3 p-3 rounded-lg border-1 border-warning bg-warning-subtle text-warning">
<svg class="no-shrink mt-1" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M122,136V80a6,6,0,0,1,12,0v56a6,6,0,0,1-12,0ZM230,91.55v72.9a13.92,13.92,0,0,1-4.1,9.9L174.35,225.9a13.92,13.92,0,0,1-9.9,4.1H91.55a13.92,13.92,0,0,1-9.9-4.1L30.1,174.35a13.92,13.92,0,0,1-4.1-9.9V91.55a13.92,13.92,0,0,1,4.1-9.9L81.65,30.1a13.92,13.92,0,0,1,9.9-4.1h72.9a13.92,13.92,0,0,1,9.9,4.1L225.9,81.65A13.92,13.92,0,0,1,230,91.55Zm-12,0a2,2,0,0,0-.59-1.42L165.87,38.59a2,2,0,0,0-1.42-.59H91.55a2,2,0,0,0-1.41.59L38.58,90.13A2,2,0,0,0,38,91.55v72.9a2,2,0,0,0,.59,1.42l51.54,51.54a2,2,0,0,0,1.42.59h72.9a2,2,0,0,0,1.41-.59l51.56-51.54a2,2,0,0,0,.58-1.42ZM128,162a10,10,0,1,0,10,10A10,10,0,0,0,128,162Z" fill="currentColor"/></svg>
<span class="grow min-w-0">
<span class="block font-medium"><bdi>One invitation expires on Friday.</bdi></span>
<span class="block"><bdi>Resend it to keep the seat reserved.</bdi></span>
</span>
</span>
<div class="flex col">
<span class="flex x-center gap-3 px-2 py-2 rounded-md hover:bg-hover cursor-pointer">
<span class="flex center x-center no-shrink w-8 h-8 rounded-full text-xs font-semibold bg-purple-subtle text-purple">ML</span>
<span class="grow min-w-0">
<span class="block font-medium truncate">Mara Lindqvist</span>
<span class="block text-xs text-muted truncate">[email protected]</span>
</span>
<span class="hide flex@sm x-center gap-2 no-shrink text-xs text-muted">
<span class="w-2 h-2 rounded-full bg-green"></span>
Active
</span>
<span class="pill px-2 text-xs no-shrink bg-brand-subtle text-brand">Owner</span>
</span>
<span class="flex x-center gap-3 px-2 py-2 rounded-md hover:bg-hover cursor-pointer">
<span class="flex center x-center no-shrink w-8 h-8 rounded-full text-xs font-semibold bg-blue-subtle text-blue">TF</span>
<span class="grow min-w-0">
<span class="block font-medium truncate">Tomás Ferreira</span>
<span class="block text-xs text-muted truncate">[email protected]</span>
</span>
<span class="hide flex@sm x-center gap-2 no-shrink text-xs text-muted">
<span class="w-2 h-2 rounded-full bg-green"></span>
Active
</span>
<span class="pill px-2 text-xs no-shrink bg-green-subtle text-green">Editor</span>
</span>
<span class="flex x-center gap-3 px-2 py-2 rounded-md hover:bg-hover cursor-pointer">
<span class="flex center x-center no-shrink w-8 h-8 rounded-full text-xs font-semibold bg-pink-subtle text-pink">PR</span>
<span class="grow min-w-0">
<span class="block font-medium truncate">Priya Raman</span>
<span class="block text-xs text-muted truncate">[email protected]</span>
</span>
<span class="hide flex@sm x-center gap-2 no-shrink text-xs text-muted">
<span class="w-2 h-2 rounded-full bg-yellow"></span>
Invited
</span>
<span class="pill px-2 text-xs no-shrink bg-alternate text-muted">Viewer</span>
</span>
</div>
</div>
</div>
<div class="flex wrap x-center gap-3 px-5 py-4 bg-alternate">
<span class="grow text-muted"><bdi>Changes apply to everyone in Ardent Studio.</bdi></span>
<span class="flex x-center gap-2 h-8 px-3 rounded-md text-danger hover:bg-danger-subtle cursor-pointer">
<svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M216,50H174V40a22,22,0,0,0-22-22H104A22,22,0,0,0,82,40V50H40a6,6,0,0,0,0,12H50V208a14,14,0,0,0,14,14H192a14,14,0,0,0,14-14V62h10a6,6,0,0,0,0-12ZM94,40a10,10,0,0,1,10-10h48a10,10,0,0,1,10,10V50H94ZM194,208a2,2,0,0,1-2,2H64a2,2,0,0,1-2-2V62H194ZM110,104v64a6,6,0,0,1-12,0V104a6,6,0,0,1,12,0Zm48,0v64a6,6,0,0,1-12,0V104a6,6,0,0,1,12,0Z" fill="currentColor"/></svg>
Remove team
</span>
</div>
</div>Tokens used
Every color comes from a theme token, so the template follows the light, dark and inverse themes with no extra CSS.
bg-surface,bg-alternate,bg-base- The panel, the footer bar and the fields.
border-control,border-control-hover- Field edges at rest and on hover, at 3:1 contrast.
brand,text-on-brand- The Send invite button and the current tab underline.
text-brand,brand-subtle- The current tab and the Owner badge.
warning,warning-subtle,text-warning- The expiring invitation alert.
danger-subtle,text-danger- Remove team, at rest and on hover.
bg-hover- Member rows and buttons on hover.