Ytor

Panel

Delarna är paddade, inte lådan.

En panel med rubrik, eyebrow och åtgärder.

Foten ligger på en nedsänkt yta och ärver panelens nedre radie.

För den enda panelen som svarar på en annan fråga än de andra.

Ingen skugga, en mörkare yta — något ligger i panelen, inte på den.

<Panel title="Budget" caption="Projekt">
  <Button slot="actions" size="sm" variant="ghost">…</Button>
  …
</Panel>

Flush

Felaktig sidfot i sökresultat	Pågår
Uppdatera Municipio till 3.4	Klart
Behörighet saknas för redaktör	Väntar

<Panel title="Senaste" flush>
  <table class="ws-table">…</table>
</Panel>

Två delar och en länk hit

Två ws-panel__body i samma panel skiljs av samma hårlinje som rubriken. Den panel en länk pekar på (#nycklar) får en ram, så att läsaren ser vilken sidan rullade till.

Två nycklar för läsning, en för skrivning.

En avstängd nyckel kan slås på igen.

<section class="ws-panel" id="nycklar">
  <header class="ws-panel__header">…</header>
  <div class="ws-panel__body">…</div>
  <div class="ws-panel__body">…</div>
</section>

Underrubrik

ws-subheading: en rubrik ett steg under panelens. Direkt i en panel utan marginal står den mellan delarna och börjar där kolumnen under den börjar. Elementet ger vikten, ws-muted den tysta raden.

Att göra och kommande

tis 13 okt	Möte	Leveransgenomgång
fre 16 okt	Uppgift	Skicka offert

Tidigare

Ingen historik än.

Kontakter

Anna Berg, Region Skåne

<Panel title="Historik" flush>
  <h3 class="ws-subheading">Att göra och kommande</h3>
  <table class="ws-table">…</table>
  <h3 class="ws-subheading">Tidigare</h3>
  <p class="ws-subheading ws-muted">Ingen historik än.</p>
</Panel>

<h3 class="ws-subheading">Kontakter</h3>

Kort

En panel som är en länk. Hela lådan är målet.

Region Skåne

Webbplats 2026

412 av 600 timmar, 12 öppna ärenden

Kommunal

Intranät

88 av 240 timmar, 3 öppna ärenden

Skatteverket

Förvaltning 2026

Löpande, 1 öppet ärende

<a class="ws-card" href="…">…</a>

Statblock

Siffran är det största i lådan. Grönt betyder bra, inte upp.

Fakturerbart72 %+4 p.e.mot 68 % i augusti

Rapporterat1 284 h−31 h

Öppna ärenden17+3

Avvikelser20oförändrat

<Stat label="Fakturerbart" value="72" unit="%" delta="+4 p.e." direction="up" />
<Stat label="Avvikelser" value="5" delta="+2" direction="up" goodDirection="down" />

Storlekar

Liten42 h

Normal42 h

Stor42 h

<Stat size="sm|md|lg" … />

Avatarer

Foto när det finns ett, initialer annars. Aldrig en silhuett.

<Avatar name="Eva-Maria Nilsson" />
<Avatar name="Johan de Geer" src="/team/johan.png" size="lg" />

Statvarianter

Ett värde som är ord, och ett block som ställer sig mot högerkanten.

StatusVäntar på kundsedan 12 september

Nedlagt412,5 hav 600 h

<div class="ws-stat ws-stat--text">…</div>
<div class="ws-stat ws-stat--end">…</div>

Tomt läge

Rubrik, en mening, en åtgärd.

Inga ärenden matchar filtret

Tre filter är aktiva. Det senaste — Väntar på kund — tog bort alla återstående träffar.

<EmptyState icon="Search" title="Inga ärenden matchar filtret">
  <Button slot="actions" variant="secondary">Rensa filtret</Button>
</EmptyState>

Inga ändringar matchar filtret.

<p class="ws-empty ws-empty--inline">
  <span class="ws-empty__title">Inga ändringar matchar filtret.</span>
</p>

Stort

--lg: en sida som bara är sitt läge — ett jobb som pågår, ett som misslyckades.

Rapporten skrivs

Det tar några minuter. Sidan uppdateras när den är klar.

<div class="ws-empty ws-empty--lg">
  <p class="ws-empty__title">Rapporten skrivs</p>
  <p class="ws-empty__body">Det tar några minuter. Sidan uppdateras när den är klar.</p>
</div>

Layoututilities

Åtta stycken, och det är hela listan. Varianterna är klasser, inte style.

ws-spread

ws-grid

auto-fit

--ws-col

ws-fill och ws-truncate — en rubrik som är alldeles för lång för lådan den ligger i och därför klipps med ellips istället för att tvinga hela panelen bredare än skärmenPågår

<div class="ws-stack">…</div>      en sak under en annan
<div class="ws-cluster">…</div>    saker bredvid, som radbryts
<div class="ws-spread">…</div>     två grupper, isärskjutna
<div class="ws-grid">…</div>       så många kolumner som får plats
<div class="ws-split">…</div>      sida och huvud, staplas när det är smalt
<span class="ws-spacer"></span>    skjuter resten till slutet
<span class="ws-fill">…</span>     tar plats över, får krympa
<span class="ws-truncate">…</span> en rad, klippt

Kolumnbredd och delning

Ett rutnäts minsta kolumn är en klass: ws-grid--sm 14 rem, --md 22, --lg 26, --xl 28. En delning är sida och huvud 1:3; ws-split--even två halvor, --3-2 huvudet först, --center tre spår där mitten står i mitten. --page på en split eller stack ger sidans eget avstånd mellan avsnitt.

ws-grid--sm

14 rem

och uppåt

ws-split--even

två halvor

ws-split--3-2, huvudet

sidan

vänster

ws-split--center

höger, med mer innehåll

<div class="ws-grid ws-grid--md">…</div>
<div class="ws-split ws-split--even">…</div>
<div class="ws-split ws-split--3-2">…</div>
<div class="ws-split ws-split--center">…</div>
<div class="ws-split ws-split--3-2 ws-split--page">…</div>
<ol class="ws-stack ws-stack--0">…</ol>

Cluster-modifierare

ws-cluster--nowrap håller en avatar och ett namn på en rad. ws-cluster--end ställer raden mot högerkanten, för åtgärderna i en tabells sista kolumn. En cluster utan innehåll tar ingen plats.

Göteborgs stad

<span class="ws-cluster ws-cluster--2 ws-cluster--nowrap">…</span>
<span class="ws-cluster ws-cluster--1 ws-cluster--end">…</span>

Panel

Budget

Med fot

Tonad

Nedsänkt

Senaste ärenden

API-nycklar