Skip to content
WovenUI LogoWovenUI

Templates

Mail client template

A mail client with a tool rail, folders and labels, an inbox and an open message. Panes give way below the xl, md and sm breakpoints.

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 overflow-hidden">
    <div class="flex x-center gap-3 px-4 py-2 bg-alternate border-b-1">
        <div class="flex x-center gap-2 px-3 py-1 rounded-md bg-surface border-1">
            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M217.9,110.1l-80-80a14,14,0,0,0-19.8,0l-80,80A13.92,13.92,0,0,0,34,120v96a6,6,0,0,0,6,6h64a6,6,0,0,0,6-6V158h36v58a6,6,0,0,0,6,6h64a6,6,0,0,0,6-6V120A13.92,13.92,0,0,0,217.9,110.1ZM210,210H158V152a6,6,0,0,0-6-6H104a6,6,0,0,0-6,6v58H46V120a2,2,0,0,1,.58-1.42l80-80a2,2,0,0,1,2.84,0l80,80A2,2,0,0,1,210,120Z" fill="currentColor"/></svg>
            <span>Inbox</span>
            <svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z" fill="currentColor"/></svg>
        </div>
        <span class="grow"></span>
        <div class="hide flex@md x-center gap-2 w-64 px-3 py-1 rounded-md bg-base border-1 text-muted">
            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M228.24,219.76l-51.38-51.38a86.15,86.15,0,1,0-8.48,8.48l51.38,51.38a6,6,0,0,0,8.48-8.48ZM38,112a74,74,0,1,1,74,74A74.09,74.09,0,0,1,38,112Z" fill="currentColor"/></svg>
            <span>Search mail</span>
        </div>
        <div class="flex x-center gap-3 text-muted">
            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M85.43,53.45a6,6,0,0,0-10.86,0l-64,136a6,6,0,1,0,10.86,5.11L38.63,158h82.74l17.2,36.55a6,6,0,1,0,10.86-5.11ZM44.28,146,80,70.09,115.72,146ZM200,98c-12.21,0-21.71,3.28-28.23,9.74a6,6,0,0,0,8.46,8.52c4.18-4.15,10.84-6.26,19.77-6.26,14.34,0,26,9.87,26,22v7.24A40.36,40.36,0,0,0,200,130c-20.95,0-38,15.25-38,34s17.05,34,38,34a40.36,40.36,0,0,0,26-9.24V192a6,6,0,0,0,12,0V132C238,113.25,221,98,200,98Zm0,88c-14.34,0-26-9.87-26-22s11.66-22,26-22,26,9.87,26,22S214.34,186,200,186Z" fill="currentColor"/></svg>
            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M122,40V16a6,6,0,0,1,12,0V40a6,6,0,0,1-12,0Zm68,88a62,62,0,1,1-62-62A62.07,62.07,0,0,1,190,128Zm-12,0a50,50,0,1,0-50,50A50.06,50.06,0,0,0,178,128ZM59.76,68.24a6,6,0,1,0,8.48-8.48l-16-16a6,6,0,0,0-8.48,8.48Zm0,119.52-16,16a6,6,0,1,0,8.48,8.48l16-16a6,6,0,1,0-8.48-8.48ZM192,70a6,6,0,0,0,4.24-1.76l16-16a6,6,0,0,0-8.48-8.48l-16,16A6,6,0,0,0,192,70Zm4.24,117.76a6,6,0,0,0-8.48,8.48l16,16a6,6,0,0,0,8.48-8.48ZM46,128a6,6,0,0,0-6-6H16a6,6,0,0,0,0,12H40A6,6,0,0,0,46,128Zm82,82a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V216A6,6,0,0,0,128,210Zm112-88H216a6,6,0,0,0,0,12h24a6,6,0,0,0,0-12Z" fill="currentColor"/></svg>
            <span class="flex x-center gap-1"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm89.8,96H173.89c-1.54-40.77-18.48-68.23-30.43-82.67A90.19,90.19,0,0,1,217.8,122ZM128,215.83a110,110,0,0,1-15.19-19.45A128.37,128.37,0,0,1,94.13,134h67.74a128.37,128.37,0,0,1-18.68,62.38A110,110,0,0,1,128,215.83ZM94.13,122a128.37,128.37,0,0,1,18.68-62.38A110,110,0,0,1,128,40.17a110,110,0,0,1,15.19,19.45A128.37,128.37,0,0,1,161.87,122Zm18.41-82.67c-12,14.44-28.89,41.9-30.43,82.67H38.2A90.19,90.19,0,0,1,112.54,39.33ZM38.2,134H82.11c1.54,40.77,18.48,68.23,30.43,82.67A90.19,90.19,0,0,1,38.2,134Zm105.26,82.67c11.95-14.44,28.89-41.9,30.43-82.67H217.8A90.19,90.19,0,0,1,143.46,216.67Z" fill="currentColor"/></svg>EN</span>
        </div>
    </div>
    <div class="flex x-stretch">
        <div class="hide flex@sm col between x-center no-shrink w-12 py-3 bg-alternate border-e-1">
            <div class="flex col x-center gap-1">
                <span class="flex center x-center w-8 h-8 mb-2 rounded-md bg-brand text-on-brand text-xs font-bold">AS</span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M165.92,224a6,6,0,0,1-6,6h-64a6,6,0,0,1,0-12h64A6,6,0,0,1,165.92,224ZM225.61,61.23a109.23,109.23,0,0,0-38.41-42.3,6,6,0,0,0-6.4,10.14A96,96,0,0,1,215,66.76a6,6,0,1,0,10.65-5.53ZM41,66.76A96,96,0,0,1,75.2,29.07a6,6,0,0,0-6.4-10.14,109.23,109.23,0,0,0-38.41,42.3A6,6,0,1,0,41,66.76Zm179,110.17A14,14,0,0,1,208,198H48a14,14,0,0,1-12.06-21C45.13,161.08,50,138.62,50,112a78,78,0,0,1,156,0C206,139,210.74,160.84,220.08,176.93Zm-10.37,6C199.29,165,194,141.14,194,112a66,66,0,0,0-132,0c0,29.16-5.29,53-15.71,71a2,2,0,0,0,0,2,1.9,1.9,0,0,0,1.7,1H208a1.9,1.9,0,0,0,1.7-1A2,2,0,0,0,209.71,183Z" fill="currentColor"/></svg></span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Zm-70-78a10,10,0,1,1-10-10A10,10,0,0,1,138,132Zm44,0a10,10,0,1,1-10-10A10,10,0,0,1,182,132ZM94,172a10,10,0,1,1-10-10A10,10,0,0,1,94,172Zm44,0a10,10,0,1,1-10-10A10,10,0,0,1,138,172Zm44,0a10,10,0,1,1-10-10A10,10,0,0,1,182,172Z" fill="currentColor"/></svg></span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M230,208a6,6,0,0,1-6,6H32a6,6,0,0,1-6-6V48a6,6,0,0,1,12,0V161.52l53.76-53.76a6,6,0,0,1,8.48,0L128,135.51,185.52,78H160a6,6,0,0,1,0-12h40a6,6,0,0,1,6,6v40a6,6,0,0,1-12,0V86.48l-61.76,61.76a6,6,0,0,1-8.48,0L96,120.49l-58,58V202H224A6,6,0,0,1,230,208Z" fill="currentColor"/></svg></span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M222,48V208a14,14,0,0,1-14,14H136a6,6,0,0,1,0-12h72a2,2,0,0,0,2-2V48a2,2,0,0,0-2-2H48a2,2,0,0,0-2,2v96a6,6,0,0,1-12,0V48A14,14,0,0,1,48,34H208A14,14,0,0,1,222,48ZM115.76,155.76,64,207.51,44.24,187.76a6,6,0,0,0-8.48,8.48l24,24a6,6,0,0,0,8.48,0l56-56a6,6,0,0,0-8.48-8.48Z" fill="currentColor"/></svg></span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M222.72,67.91l-88-48.18a13.9,13.9,0,0,0-13.44,0l-88,48.18A14,14,0,0,0,26,80.18v95.64a14,14,0,0,0,7.28,12.27l88,48.18a13.92,13.92,0,0,0,13.44,0l88-48.18A14,14,0,0,0,230,175.82V80.18A14,14,0,0,0,222.72,67.91ZM127,30.25a2,2,0,0,1,1.92,0L212.51,76,178.57,94.57,94.05,48.31ZM122,223,39,177.57a2,2,0,0,1-1-1.75V86.66l84,46ZM43.49,76,81.56,55.15l84.51,46.26L128,122.24ZM218,175.82a2,2,0,0,1-1,1.75h0L134,223V132.64l36-19.71V152a6,6,0,0,0,12,0V106.37l36-19.71Z" fill="currentColor"/></svg></span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M230,88v16a6,6,0,0,1-12,0V88a2,2,0,0,0-2-2H130.67a14,14,0,0,1-8.4-2.8L94.53,62.4a2,2,0,0,0-1.2-.4H40a2,2,0,0,0-2,2V200a2,2,0,0,0,2,2h72a6,6,0,0,1,0,12H40a14,14,0,0,1-14-14V64A14,14,0,0,1,40,50H93.33a14,14,0,0,1,8.4,2.8l27.74,20.8a2,2,0,0,0,1.2.4H216A14,14,0,0,1,230,88Zm0,80v40a6,6,0,0,1-6,6H152a6,6,0,0,1-6-6V168a6,6,0,0,1,6-6h10v-6a26,26,0,0,1,52,0v6h10A6,6,0,0,1,230,168Zm-56-6h28v-6a14,14,0,0,0-28,0Zm44,12H158v28h60Z" fill="currentColor"/></svg></span>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M208,34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34Zm2,174a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V48a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2Zm-36-80a6,6,0,0,1-6,6H134v34a6,6,0,0,1-12,0V134H88a6,6,0,0,1,0-12h34V88a6,6,0,0,1,12,0v34h34A6,6,0,0,1,174,128Z" fill="currentColor"/></svg></span>
            </div>
            <div class="flex col x-center gap-1">
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><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>
                <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-raised hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M138,180a10,10,0,1,1-10-10A10,10,0,0,1,138,180ZM128,74c-21,0-38,15.25-38,34v4a6,6,0,0,0,12,0v-4c0-12.13,11.66-22,26-22s26,9.87,26,22-11.66,22-26,22a6,6,0,0,0-6,6v8a6,6,0,0,0,12,0v-2.42c18.11-2.58,32-16.66,32-33.58C166,89.25,149,74,128,74Zm102,54A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z" fill="currentColor"/></svg></span>
                <span class="relative mt-2">
                    <span class="flex center x-center w-8 h-8 rounded-full bg-purple-subtle text-purple text-xs font-semibold">ML</span>
                    <span class="absolute bottom-0 end-0 w-2 h-2 rounded-full bg-danger"></span>
                </span>
            </div>
        </div>
        <div class="flex col grow min-w-0">
            <div class="flex x-center gap-3 px-4 py-3 border-b-1">
                <svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M227.25,64.8l-5.92-3.41a22,22,0,0,0,0-10.78l5.92-3.41a6,6,0,0,0-6-10.4l-5.93,3.43A22,22,0,0,0,206,34.84V28a6,6,0,0,0-12,0v6.84a22,22,0,0,0-9.32,5.39l-5.93-3.43a6,6,0,0,0-6,10.4l5.92,3.41a22,22,0,0,0,0,10.78l-5.92,3.41a6,6,0,0,0,6,10.4l5.93-3.43A22,22,0,0,0,194,77.16V84a6,6,0,0,0,12,0V77.16a22,22,0,0,0,9.32-5.39l5.93,3.43a6,6,0,0,0,6-10.4ZM200,66a10,10,0,1,1,10-10A10,10,0,0,1,200,66Zm21.68,40.08a6,6,0,0,0-4.92,6.91A91.76,91.76,0,0,1,218,128a89.65,89.65,0,0,1-24.49,61.64,77.53,77.53,0,0,0-40-31.38,46,46,0,1,0-51,0,77.53,77.53,0,0,0-40,31.38A89.95,89.95,0,0,1,128,38a91.66,91.66,0,0,1,15,1.24,6,6,0,1,0,2-11.83,102,102,0,1,0,50,177.44c.65,1.36,1.68,0,2.34-2.11A102,102,0,0,0,228.59,111,6,6,0,0,0,221.68,106.08ZM94,120a34,34,0,1,1,34,34A34,34,0,0,1,94,120ZM71.44,198a66,66,0,0,1,113.12,0,89.8,89.8,0,0,1-113.12,0Z" fill="currentColor"/></svg>
                <span class="font-semibold truncate">Ardent Studio</span>
                <span class="hide block@md text-muted truncate">Shared inbox</span>
                <span class="grow"></span>
                <div class="flex x-center no-shrink">
                    <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M82,64a6,6,0,0,1,6-6H216a6,6,0,0,1,0,12H88A6,6,0,0,1,82,64Zm134,58H88a6,6,0,0,0,0,12H216a6,6,0,0,0,0-12Zm0,64H88a6,6,0,0,0,0,12H216a6,6,0,0,0,0-12ZM44,54A10,10,0,1,0,54,64,10,10,0,0,0,44,54Zm0,128a10,10,0,1,0,10,10A10,10,0,0,0,44,182Zm0-64a10,10,0,1,0,10,10A10,10,0,0,0,44,118Z" fill="currentColor"/></svg></span>
                    <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M104,42H56A14,14,0,0,0,42,56v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V56A14,14,0,0,0,104,42Zm2,62a2,2,0,0,1-2,2H56a2,2,0,0,1-2-2V56a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Zm94-62H152a14,14,0,0,0-14,14v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V56A14,14,0,0,0,200,42Zm2,62a2,2,0,0,1-2,2H152a2,2,0,0,1-2-2V56a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Zm-98,34H56a14,14,0,0,0-14,14v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V152A14,14,0,0,0,104,138Zm2,62a2,2,0,0,1-2,2H56a2,2,0,0,1-2-2V152a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Zm94-62H152a14,14,0,0,0-14,14v48a14,14,0,0,0,14,14h48a14,14,0,0,0,14-14V152A14,14,0,0,0,200,138Zm2,62a2,2,0,0,1-2,2H152a2,2,0,0,1-2-2V152a2,2,0,0,1,2-2h48a2,2,0,0,1,2,2Z" fill="currentColor"/></svg></span>
                    <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M42,128a6,6,0,0,1,6-6h72a6,6,0,0,1,0,12H48A6,6,0,0,1,42,128Zm6-58h56a6,6,0,0,0,0-12H48a6,6,0,0,0,0,12ZM184,186H48a6,6,0,0,0,0,12H184a6,6,0,0,0,0-12ZM228.24,83.76l-40-40a6,6,0,0,0-8.48,0l-40,40a6,6,0,0,0,8.48,8.48L178,62.49V144a6,6,0,0,0,12,0V62.49l29.76,29.75a6,6,0,0,0,8.48-8.48Z" fill="currentColor"/></svg></span>
                    <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M178,80a6,6,0,0,1,6-6h32a6,6,0,0,1,0,12H184A6,6,0,0,1,178,80ZM40,86H146v18a6,6,0,0,0,12,0V56a6,6,0,0,0-12,0V74H40a6,6,0,0,0,0,12Zm176,84H120a6,6,0,0,0,0,12h96a6,6,0,0,0,0-12ZM88,146a6,6,0,0,0-6,6v18H40a6,6,0,0,0,0,12H82v18a6,6,0,0,0,12,0V152A6,6,0,0,0,88,146Z" fill="currentColor"/></svg></span>
                </div>
            </div>
            <div class="flex x-stretch grow min-w-0">
                <div class="hide flex@md col gap-4 no-shrink w-48 p-3 border-e-1 text-sm">
                    <div class="flex x-center gap-2 px-2 pt-1 text-muted">
                        <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M216,58H174V48a22,22,0,0,0-22-22H104A22,22,0,0,0,82,48V58H40A14,14,0,0,0,26,72V200a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V72A14,14,0,0,0,216,58ZM94,48a10,10,0,0,1,10-10h48a10,10,0,0,1,10,10V58H94ZM40,70H216a2,2,0,0,1,2,2v74H38V72A2,2,0,0,1,40,70ZM216,202H40a2,2,0,0,1-2-2V158H218v42A2,2,0,0,1,216,202Z" fill="currentColor"/></svg>
                        <span class="grow truncate" dir="auto">[email protected]</span>
                        <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M216,74H130L101.73,52.8a14,14,0,0,0-8.4-2.8H40A14,14,0,0,0,26,64V200a14,14,0,0,0,14,14H216.89A13.12,13.12,0,0,0,230,200.89V88A14,14,0,0,0,216,74Zm2,126.89a1.11,1.11,0,0,1-1.11,1.11H40a2,2,0,0,1-2-2V64a2,2,0,0,1,2-2H93.33a2,2,0,0,1,1.2.4L124.4,84.8A6,6,0,0,0,128,86h88a2,2,0,0,1,2,2ZM158,144a6,6,0,0,1-6,6H134v18a6,6,0,0,1-12,0V150H104a6,6,0,0,1,0-12h18V120a6,6,0,0,1,12,0v18h18A6,6,0,0,1,158,144Z" fill="currentColor"/></svg>
                    </div>
                    <span class="flex x-center gap-2 px-3 py-2 rounded-md bg-brand text-on-brand font-medium">
                        <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M228.24,59.76l-32-32a6,6,0,0,0-8.48,0l-96,96A6,6,0,0,0,90,128v32a6,6,0,0,0,6,6h32a6,6,0,0,0,4.24-1.76l96-96A6,6,0,0,0,228.24,59.76ZM125.51,154H102V130.49l66-66L191.51,88ZM200,79.51,176.49,56,192,40.49,215.51,64ZM222,128v80a14,14,0,0,1-14,14H48a14,14,0,0,1-14-14V48A14,14,0,0,1,48,34h80a6,6,0,0,1,0,12H48a2,2,0,0,0-2,2V208a2,2,0,0,0,2,2H208a2,2,0,0,0,2-2V128a6,6,0,0,1,12,0Z" fill="currentColor"/></svg>
                        Compose
                    </span>
                    <div class="flex col gap-1">
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer bg-selected text-brand font-semibold">
                            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M208,34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H208a2,2,0,0,1,2,2V154H179.31a13.94,13.94,0,0,0-9.9,4.1L150.1,177.41a2,2,0,0,1-1.41.59H107.31a2,2,0,0,1-1.41-.58L86.59,158.1a13.94,13.94,0,0,0-9.9-4.1H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V166H76.69a2,2,0,0,1,1.41.58L97.41,185.9a13.94,13.94,0,0,0,9.9,4.1h41.38a13.94,13.94,0,0,0,9.9-4.1l19.31-19.31a2,2,0,0,1,1.41-.59H210v42A2,2,0,0,1,208,210Z" fill="currentColor"/></svg>
                            <span class="grow">Inbox</span>
                            <span class="pill px-2 text-xs bg-brand text-on-brand">3</span>
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer text-regular">
                            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M237.28,97.87A14.18,14.18,0,0,0,224.76,88l-60.25-4.87-23.22-56.2a14.37,14.37,0,0,0-26.58,0L91.49,83.11,31.24,88a14.18,14.18,0,0,0-12.52,9.89A14.43,14.43,0,0,0,23,113.32L69,152.93l-14,59.25a14.4,14.4,0,0,0,5.59,15,14.1,14.1,0,0,0,15.91.6L128,196.12l51.58,31.71a14.1,14.1,0,0,0,15.91-.6,14.4,14.4,0,0,0,5.59-15l-14-59.25L233,113.32A14.43,14.43,0,0,0,237.28,97.87Zm-12.14,6.37-48.69,42a6,6,0,0,0-1.92,5.92l14.88,62.79a2.35,2.35,0,0,1-.95,2.57,2.24,2.24,0,0,1-2.6.1L131.14,184a6,6,0,0,0-6.28,0L70.14,217.61a2.24,2.24,0,0,1-2.6-.1,2.35,2.35,0,0,1-1-2.57l14.88-62.79a6,6,0,0,0-1.92-5.92l-48.69-42a2.37,2.37,0,0,1-.73-2.65,2.28,2.28,0,0,1,2.07-1.65l63.92-5.16a6,6,0,0,0,5.06-3.69l24.63-59.6a2.35,2.35,0,0,1,4.38,0l24.63,59.6a6,6,0,0,0,5.06,3.69l63.92,5.16a2.28,2.28,0,0,1,2.07,1.65A2.37,2.37,0,0,1,225.14,104.24Z" fill="currentColor"/></svg>
                            <span class="grow">Starred</span>
                            <span class="pill px-2 text-xs text-muted">4</span>
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer text-regular">
                            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Zm62-90a6,6,0,0,1-6,6H128a6,6,0,0,1-6-6V72a6,6,0,0,1,12,0v50h50A6,6,0,0,1,190,128Z" fill="currentColor"/></svg>
                            <span class="grow">Snoozed</span>
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer text-regular">
                            <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>
                            <span class="grow">Sent</span>
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer text-regular">
                            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M78,224a6,6,0,0,1-6,6H56a14,14,0,0,1-14-14V184a6,6,0,0,1,12,0v32a2,2,0,0,0,2,2H72A6,6,0,0,1,78,224ZM214,88v48a6,6,0,0,1-12,0V94H152a6,6,0,0,1-6-6V38H120a6,6,0,0,1,0-12h32a6,6,0,0,1,4.24,1.76l56,56A6,6,0,0,1,214,88Zm-56-6h35.51L158,46.49ZM80,26H56A14,14,0,0,0,42,40V64a6,6,0,0,0,12,0V40a2,2,0,0,1,2-2H80a6,6,0,0,0,0-12ZM208,170a6,6,0,0,0-6,6v40a2,2,0,0,1-2,2h-8a6,6,0,0,0,0,12h8a14,14,0,0,0,14-14V176A6,6,0,0,0,208,170ZM48,150a6,6,0,0,0,6-6V104a6,6,0,0,0-12,0v40A6,6,0,0,0,48,150Zm104,68H112a6,6,0,0,0,0,12h40a6,6,0,0,0,0-12Z" fill="currentColor"/></svg>
                            <span class="grow">Drafts</span>
                            <span class="pill px-2 text-xs text-muted">2</span>
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer text-regular">
                            <svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M224,50H32A14,14,0,0,0,18,64V88a14,14,0,0,0,14,14h2v90a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V102h2a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM210,192a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V102H210ZM226,88a2,2,0,0,1-2,2H32a2,2,0,0,1-2-2V64a2,2,0,0,1,2-2H224a2,2,0,0,1,2,2ZM98,136a6,6,0,0,1,6-6h48a6,6,0,0,1,0,12H104A6,6,0,0,1,98,136Z" fill="currentColor"/></svg>
                            <span class="grow">Archive</span>
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer text-regular">
                            <svg class="no-shrink" 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">Spam</span>
                            <span class="pill px-2 text-xs text-muted">7</span>
                        </span>
                    </div>
                    <div class="flex col gap-1">
                        <span class="px-2 text-xs font-semibold text-muted">Labels</span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer">
                            <span class="w-2 h-2 rounded-full bg-blue"></span>
                            Planning
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer">
                            <span class="w-2 h-2 rounded-full bg-green"></span>
                            Billing
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer">
                            <span class="w-2 h-2 rounded-full bg-purple"></span>
                            Design
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer">
                            <span class="w-2 h-2 rounded-full bg-yellow"></span>
                            Review
                        </span>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md hover:bg-hover cursor-pointer">
                            <span class="w-2 h-2 rounded-full bg-pink"></span>
                            Hiring
                        </span>
                    </div>
                </div>
                <div class="flex col grow min-w-0">
                    <div class="flex x-center gap-3 px-4 py-2 border-b-1">
                        <input type="checkbox" aria-label="Select all">
                        <span class="font-semibold">Inbox</span>
                        <span class="hide block@sm text-xs text-muted" dir="auto">3 unread of 10</span>
                        <span class="grow"></span>
                        <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M224,50H32A14,14,0,0,0,18,64V88a14,14,0,0,0,14,14h2v90a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V102h2a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM210,192a2,2,0,0,1-2,2H48a2,2,0,0,1-2-2V102H210ZM226,88a2,2,0,0,1-2,2H32a2,2,0,0,1-2-2V64a2,2,0,0,1,2-2H224a2,2,0,0,1,2,2ZM98,136a6,6,0,0,1,6-6h48a6,6,0,0,1,0,12H104A6,6,0,0,1,98,136Z" fill="currentColor"/></svg></span>
                        <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" 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>
                        <span class="flex x-center gap-2 px-2 py-1 rounded-md bg-danger text-on-danger text-xs">
                            <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>
                            Delete
                        </span>
                    </div>
                    <div>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink bg-brand"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate font-semibold" dir="auto">Mara Lindqvist</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-semibold">Q4 roadmap review moved to Thursday</span>
                              <span class="hide inline@md text-muted">Pushing it to 14:00 so finance can join. Agenda is unchanged.</span>
                            </span>
                          </span>
                          <span class="hide flex@lg pill px-2 text-xs bg-blue-subtle text-blue">Planning</span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">09:42</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink bg-brand"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate font-semibold" dir="auto">Halden Freight</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-semibold">Invoice INV-20417 is ready</span>
                              <span class="hide inline@md text-muted">Total due AED 12,480.00 by 31 October. PDF attached.</span>
                            </span>
                          </span>
                          <svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M208.25,123.76a6,6,0,0,1,0,8.49l-82.06,82a54,54,0,0,1-76.36-76.39L149.1,37.14a38,38,0,1,1,53.77,53.72L103.59,191.54a22,22,0,1,1-31.15-31.09l83.28-84.67a6,6,0,0,1,8.56,8.42L81,168.91a10,10,0,1,0,14.11,14.18L194.35,82.4a26,26,0,1,0-36.74-36.8L58.33,146.28a42,42,0,1,0,59.37,59.44l82.06-82A6,6,0,0,1,208.25,123.76Z" fill="currentColor"/></svg>
                          <span class="hide flex@lg pill px-2 text-xs bg-green-subtle text-green">Billing</span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">09:15</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink bg-brand"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate font-semibold" dir="auto">Tomás Ferreira</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-semibold">Re: Token names for the dark theme</span>
                              <span class="hide inline@md text-muted">I would keep bg-raised for menus and use bg-alternate for the sidebar.</span>
                            </span>
                          </span>
                          <span class="hide flex@lg pill px-2 text-xs bg-purple-subtle text-purple">Design</span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">08:57</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Priya Raman</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">Accessibility audit: three issues left</span>
                              <span class="hide inline@md text-muted">Focus ring on the date picker, two contrast fixes in the footer.</span>
                            </span>
                          </span>
                          <span class="hide flex@lg pill px-2 text-xs bg-yellow-subtle text-yellow">Review</span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Yesterday</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Kestrel Analytics</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">Your export has finished</span>
                              <span class="hide inline@md text-muted">1,284 rows exported to customers-october.csv.</span>
                            </span>
                          </span>
                          <svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M208.25,123.76a6,6,0,0,1,0,8.49l-82.06,82a54,54,0,0,1-76.36-76.39L149.1,37.14a38,38,0,1,1,53.77,53.72L103.59,191.54a22,22,0,1,1-31.15-31.09l83.28-84.67a6,6,0,0,1,8.56,8.42L81,168.91a10,10,0,1,0,14.11,14.18L194.35,82.4a26,26,0,1,0-36.74-36.8L58.33,146.28a42,42,0,1,0,59.37,59.44l82.06-82A6,6,0,0,1,208.25,123.76Z" fill="currentColor"/></svg>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Yesterday</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Jonah Weiss</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">Offsite: hotel shortlist</span>
                              <span class="hide inline@md text-muted">Two options near the old harbor, both with a meeting room for 20.</span>
                            </span>
                          </span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Mon</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Amara Okafor</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">Contract countersigned</span>
                              <span class="hide inline@md text-muted">Signed copy attached. Kickoff can stay on the 3rd.</span>
                            </span>
                          </span>
                          <svg class="no-shrink text-muted" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M208.25,123.76a6,6,0,0,1,0,8.49l-82.06,82a54,54,0,0,1-76.36-76.39L149.1,37.14a38,38,0,1,1,53.77,53.72L103.59,191.54a22,22,0,1,1-31.15-31.09l83.28-84.67a6,6,0,0,1,8.56,8.42L81,168.91a10,10,0,1,0,14.11,14.18L194.35,82.4a26,26,0,1,0-36.74-36.8L58.33,146.28a42,42,0,1,0,59.37,59.44l82.06-82A6,6,0,0,1,208.25,123.76Z" fill="currentColor"/></svg>
                          <span class="hide flex@lg pill px-2 text-xs bg-pink-subtle text-pink">Hiring</span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Mon</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Fernbrook Payroll</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">October payslips are available</span>
                              <span class="hide inline@md text-muted">14 payslips published. Bank transfers go out on the 28th.</span>
                            </span>
                          </span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Sun</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Elif Demir</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">Sprint 42 retro notes</span>
                              <span class="hide inline@md text-muted">Went well: release checklist. To change: fewer late scope changes.</span>
                            </span>
                          </span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Sat</time>
                        </label>
                        <label class="group flex x-center gap-3 px-4 py-3 border-b-1 hover:bg-hover cursor-pointer">
                          <input type="checkbox">
                          <span class="w-2 h-2 rounded-full no-shrink"></span>
                          <span class="flex col row@sm gap-3@sm grow min-w-0">
                            <span class="w-24@sm w-32@md no-shrink truncate text-muted" dir="auto">Oskar Brandt</span>
                            <span class="grow min-w-0 truncate@sm" dir="auto">
                              <span class="font-medium">Can we ship RTL in this release?</span>
                              <span class="hide inline@md text-muted">The Arabic copy is approved, only the date formats are left.</span>
                            </span>
                          </span>
                          <span class="hide flex@lg pill px-2 text-xs bg-blue-subtle text-blue">Planning</span>
                          <time class="w-16@md no-shrink text-end text-xs text-muted">Fri</time>
                        </label>
                    </div>
                </div>
                <div class="hide flex@xl col gap-4 no-shrink w-64 p-6 border-s-1">
                    <div class="flex x-start gap-3">
                        <span class="grow text-lg font-semibold leading-snug" dir="auto">Q4 roadmap review moved to Thursday</span>
                        <span class="pill px-2 text-xs bg-blue-subtle text-blue">Planning</span>
                    </div>
                    <div class="flex x-center gap-3">
                        <span class="flex center x-center no-shrink w-8 h-8 rounded-full bg-purple-subtle text-purple text-xs font-semibold">ML</span>
                        <span class="grow min-w-0" dir="auto">
                            <span class="block font-medium">Mara Lindqvist</span>
                            <span class="block text-xs text-muted truncate">To: Product team</span>
                        </span>
                        <span class="text-xs text-muted">Today, 09:42</span>
                    </div>
                    <div class="flex col gap-3 leading-relaxed" dir="auto">
                        <p class="m-0">Hi all,</p>
                        <p class="m-0">Finance can only join after lunch on Thursday, so the Q4 roadmap review moves to 14:00. The agenda is unchanged: release scope, the theming work and hiring for the platform team.</p>
                        <p class="m-0">Please add open questions to the planning doc by Wednesday.</p>
                        <p class="m-0">Mara</p>
                    </div>
                    <div class="flex x-center gap-2 mt-2">
                        <span class="flex x-center gap-2 px-3 py-1 rounded-md border-1"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M230,200a6,6,0,0,1-12,0,90.1,90.1,0,0,0-90-90H46.49l37.75,37.76a6,6,0,1,1-8.48,8.48l-48-48a6,6,0,0,1,0-8.48l48-48a6,6,0,0,1,8.48,8.48L46.49,98H128A102.12,102.12,0,0,1,230,200Z" fill="currentColor"/></svg>Reply</span>
                        <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M138,128a10,10,0,1,1-10-10A10,10,0,0,1,138,128ZM60,118a10,10,0,1,0,10,10A10,10,0,0,0,60,118Zm136,0a10,10,0,1,0,10,10A10,10,0,0,0,196,118Z" fill="currentColor"/></svg></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="hide flex@md col x-center gap-1 no-shrink p-1 border-s-1">
            <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M165.92,224a6,6,0,0,1-6,6h-64a6,6,0,0,1,0-12h64A6,6,0,0,1,165.92,224ZM225.61,61.23a109.23,109.23,0,0,0-38.41-42.3,6,6,0,0,0-6.4,10.14A96,96,0,0,1,215,66.76a6,6,0,1,0,10.65-5.53ZM41,66.76A96,96,0,0,1,75.2,29.07a6,6,0,0,0-6.4-10.14,109.23,109.23,0,0,0-38.41,42.3A6,6,0,1,0,41,66.76Zm179,110.17A14,14,0,0,1,208,198H48a14,14,0,0,1-12.06-21C45.13,161.08,50,138.62,50,112a78,78,0,0,1,156,0C206,139,210.74,160.84,220.08,176.93Zm-10.37,6C199.29,165,194,141.14,194,112a66,66,0,0,0-132,0c0,29.16-5.29,53-15.71,71a2,2,0,0,0,0,2,1.9,1.9,0,0,0,1.7,1H208a1.9,1.9,0,0,0,1.7-1A2,2,0,0,0,209.71,183Z" fill="currentColor"/></svg></span>
            <span class="flex center x-center w-8 h-8 rounded-md text-muted hover:bg-hover hover:text-regular cursor-pointer"><svg class="no-shrink" viewBox="0 0 256 256" width="1em" height="1em" aria-hidden="true"><path d="M232,50H160a38,38,0,0,0-32,17.55A38,38,0,0,0,96,50H24a6,6,0,0,0-6,6V200a6,6,0,0,0,6,6H96a26,26,0,0,1,26,26,6,6,0,0,0,12,0,26,26,0,0,1,26-26h72a6,6,0,0,0,6-6V56A6,6,0,0,0,232,50ZM96,194H30V62H96a26,26,0,0,1,26,26V204.31A37.86,37.86,0,0,0,96,194Zm130,0H160a37.87,37.87,0,0,0-26,10.32V88a26,26,0,0,1,26-26h66ZM160,90h40a6,6,0,0,1,0,12H160a6,6,0,0,1,0-12Zm46,38a6,6,0,0,1-6,6H160a6,6,0,0,1,0-12h40A6,6,0,0,1,206,128Zm0,32a6,6,0,0,1-6,6H160a6,6,0,0,1,0-12h40A6,6,0,0,1,206,160Z" fill="currentColor"/></svg></span>
        </div>
    </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 window, the top bar and rail, and the search field.
text-regular, text-muted
Senders and subjects, and previews, counts and times.
border-regular
Pane edges and inbox rows.
bg-selected, text-brand
The current folder.
brand, text-on-brand
Compose, the account badge, the unread count and the unread dot.
danger, text-on-danger
The Delete button and the notification dot.
blue-subtle, text-blue
Label badges; each label uses the subtle background and text token of its hue.
bg-hover, bg-raised
Row and button hover. The rail sits on bg-alternate, which matches bg-hover in light, so its hover lifts to bg-raised.
All patternsRead about tokens