Real world examples
Realistic compositions built with Varde utilities and components.
Modal
Create token
Enter a unique name for your token to differentiate it from other tokens and then select the scope.
Some content contained within the modal.
Show editor
<div
class="surface-base w-max-7 b-all b-fait br-xl shadow-mid p-s stack-v gap-s of-clip"
>
<div class="v-typeset">
<h4 class="fw-bold fs-xs tt-uppercase">Create token</h4>
<p>
Enter a unique name for your token to differentiate it from other tokens
and then select the scope.
</p>
<p>Some content contained within the modal.</p>
</div>
<div class="-mx-s -mb-s px-s py-2xs b-t bc-subtle surface-tinted stack-h">
<button class="v-button mr-auto" data-variant="outlined" data-size="small">
Cancel
</button>
<button class="v-button px-l" data-variant="filled" data-size="small">
Submit
</button>
</div>
</div>Banner
This project was rolled back by @jberglund
This project was rolled back by @jberglund
This project was rolled back by @jberglund
This project was rolled back by @jberglund
Show editor
<div class="stack-v gap-s w-max-7">
<color-mode palette="green">
<div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
<div class="stack-h gap-xs justify-center">
<p class="ink-subtle fs-s">
This project was rolled back by
<a class="v-link" href="#">@jberglund</a>
</p>
<button class="v-button" data-variant="plain" data-size="small">
Undo rollback
</button>
</div>
</div>
</color-mode>
<color-mode palette="yellow">
<div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
<div class="stack-h gap-xs justify-center">
<p class="ink-subtle fs-s">
This project was rolled back by
<a class="v-link" href="#">@jberglund</a>
</p>
<button class="v-button" data-variant="plain" data-size="small">
Undo rollback
</button>
</div>
</div>
</color-mode>
<color-mode palette="coral">
<div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
<div class="stack-h gap-xs justify-center">
<p class="ink-subtle fs-s">
This project was rolled back by
<a class="v-link" href="#">@jberglund</a>
</p>
<button class="v-button" data-variant="plain" data-size="small">
Undo rollback
</button>
</div>
</div>
</color-mode>
<color-mode palette="blue">
<div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
<div class="stack-h gap-xs justify-center">
<p class="ink-subtle fs-s">
This project was rolled back by
<a class="v-link" href="#">@jberglund</a>
</p>
<button class="v-button" data-variant="plain" data-size="small">
Undo rollback
</button>
</div>
</div>
</color-mode>
</div>Tabs
Using several .v-button, you can use different variants to toggle which one looks active. This would require JS, because you'd need to toggle from data-variant="outlined to data-variant="filled
Show editor
<button
role="tab"
class="v-button br-pill"
data-size="small"
data-variant="outlined"
>
Not active
</button>
<button
role="tab"
class="v-button br-pill"
data-size="small"
data-variant="outlined"
>
Not active
</button>
<button
role="tab"
aria-selected="true"
class="v-button br-pill"
data-size="small"
data-variant="filled"
>
Active
</button>Or, we might do <color-mode> to inverted and the button from data-variant="plain to data-variant="tinted:
Show editor
<div class="stack-h of-clip br-pill b-all" style="width: max-content;">
<color-mode class="">
<div class="v-button br-none" data-size="small" data-variant="plain">
Not selected
</div>
</color-mode>
<color-mode inverted>
<div class="v-button br-none" data-size="small" data-variant="tinted">
Selected
</div>
</color-mode>
<color-mode class="">
<div class="v-button br-none" data-size="small" data-variant="plain">
Not selected
</div>
</color-mode>
</div>Without buttons, only color-mode:
Show editor
<color-mode
class="stack-h br-pill of-clip b-all mt-xl"
style="width: max-content;"
>
<color-mode class="surface-dyed b-r bc-subtle b-none:last-child d-block ">
<a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s"
>Not selected</a
>
</color-mode>
<color-mode
inverted
class="surface-dyed b-r bc-subtle b-none:last-child d-block "
>
<a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s">
Selected</a
>
</color-mode>
<color-mode class="surface-dyed b-r bc-subtle b-none:last-child d-block ">
<a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s"
>Not selected</a
>
</color-mode>
<color-mode class="surface-dyed b-r bc-subtle b-none:last-child d-block ">
<a href="#" class="d-block py-2xs px-s bg-wash:hover fw-medium fs-s"
>Not selected</a
>
</color-mode>
</color-mode>Badges
Show editor
<div class="stack-h gap-xs surface-base p-m">
<color-mode
palette="blue"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
Blue
</color-mode>
<color-mode
inverted
palette="blue"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
Inverted Blue
</color-mode>
<color-mode
palette="yellow"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
yellow
</color-mode>
<color-mode
inverted
palette="yellow"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
Inverted yellow
</color-mode>
<color-mode
palette="coral"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
coral
</color-mode>
<color-mode
inverted
palette="coral"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
Inverted coral
</color-mode>
<color-mode
palette="green"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
green
</color-mode>
<color-mode
inverted
palette="green"
class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
>
Inverted green
</color-mode>
</div>Bemanning
Konsulenter
96
■ uke 35
24.08 - 28.08
uke 35
24.08 - 28.08
uke 35
24.08 - 28.08
uke 35
24.08 - 28.08
Jacob Berglund
12 års erfaring
7.5
30.0
37.5
37.5
7.5
7.5
15.0
Jacob Berglund
12 års erfaring
7.5
30.0
37.5
37.5
7.5
7.5
30.0
Filter
Avdeling
Rå-år / Antall år erfaring
Antall år erfaring
Kompetanse
Faggruppe
Show editor
<div class="stack-h gap-m mb-l">
<div class=" mr-auto">
<button
class="v-button"
data-size="small"
data-variant="outlined"
popovertarget="filter-drawer"
>
Filter
</button>
</div>
<div class="ml-auto stack-h gap-3xs">
<select data-size="small" class="v-select mr-s">
<option>4 uker</option>
<option>12 uker</option>
<option>26 uker</option>
</select>
<button class="v-button" data-size="small" data-variant="outlined">
Nåværende uke
</button>
<button
class="v-button aspect-square p-0"
data-size="small"
data-variant="outlined"
>
<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"
>
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
</button>
<button
class="v-button aspect-square p-0"
data-size="small"
data-variant="outlined"
>
<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"
>
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
</div>
</div>
<div
class="d-grid surface-base gap-3xs of-scroll"
style="grid-template-columns: 250px repeat(4, 100px);"
>
<div class="row grid-subgrid grid-all-columns pb-s" style="">
<div class="head-column stack-h gap-2xs ">
Konsulenter
<color-mode
palette="orange"
class="d-inline-block px-2xs surface-dyed br-pill fs-xs"
>96</color-mode
>
</div>
<div
class="grid-subgrid"
style="
grid-auto-flow: column;
grid-column: 2 / -1;
"
>
<div class="column ta-right px-3xs fs-xs stack-v">
<div class="fw-medium">■ uke 35</div>
<div class="ink-subtle">24.08 - 28.08</div>
</div>
<div class="column ta-right px-3xs fs-xs stack-v">
<div class="fw-medium">uke 35</div>
<div class="ink-subtle">24.08 - 28.08</div>
</div>
<div class="column ta-right px-3xs fs-xs stack-v">
<div class="fw-medium">uke 35</div>
<div class="ink-subtle">24.08 - 28.08</div>
</div>
<div class="column ta-right px-3xs fs-xs stack-v">
<div class="fw-medium">uke 35</div>
<div class="ink-subtle">24.08 - 28.08</div>
</div>
</div>
</div>
<div class="row grid-subgrid grid-all-columns" style="">
<div class="head-column stack-h gap-xs">
<div
style="height: 2lh; width: 2lh;"
class="surface-dyed aspect-square br-s w-max-2"
></div>
<div class="name pr-2xs">
<p class="fs-s fw-medium">Jacob Berglund</p>
<p class="fs-xs ink-subtle">12 års erfaring</p>
</div>
</div>
<div
class="grid-subgrid"
style="
grid-auto-flow: column;
grid-column: 2 / -1;
"
>
<div
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<color-mode
palette="blue"
class="ml-auto p-4xs pr-3xs surface-dyed fs-xs br-s b-all bc-subtle stack-h nowrap gap-4xs"
>
<div class="v-icon" style="font-size: 8px;" data-v-icon="plus"></div>
<div class="lh-tight">7.5</div>
</color-mode>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">30.0</div>
</div>
<div
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">37.5</div>
</div>
<div
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">37.5</div>
</div>
<color-mode
palette="coral"
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<div class="stack-h justify-end gap-3xs">
<color-mode
palette="purple"
class=" p-4xs pr-3xs surface-dyed fs-xs br-s b-all bc-subtle stack-h nowrap gap-4xs"
>
<div
class="v-icon"
style="font-size: 8px;"
data-v-icon="plus"
></div>
<div class="lh-tight ink-subtle">7.5</div>
</color-mode>
<color-mode
palette="yellow"
class=" p-4xs pr-3xs surface-dyed fs-xs br-s b-all bc-subtle stack-h nowrap gap-4xs"
>
<div
class="v-icon"
style="font-size: 8px;"
data-v-icon="plus"
></div>
<div class="lh-tight ink-subtle">7.5</div>
</color-mode>
</div>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">15.0</div>
</color-mode>
</div>
</div>
<div class="row grid-subgrid grid-all-columns" style="">
<div class="head-column stack-h gap-xs">
<div
style="height: 2lh; width: 2lh;"
class="surface-dyed aspect-square br-s w-max-2"
></div>
<div class="name pr-2xs">
<p class="fs-s fw-medium">Jacob Berglund</p>
<p class="fs-xs ink-subtle">12 års erfaring</p>
</div>
</div>
<div
class="grid-subgrid"
style="
grid-auto-flow: column;
grid-column: 2 / -1;
"
>
<div
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<color-mode
palette="blue"
class="ml-auto p-4xs pr-3xs surface-dyed fs-xs br-s b-all bc-subtle stack-h nowrap gap-4xs"
>
<div class="v-icon" style="font-size: 8px;" data-v-icon="plus"></div>
<div class="lh-tight">7.5</div>
</color-mode>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">30.0</div>
</div>
<div
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">37.5</div>
</div>
<div
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">37.5</div>
</div>
<color-mode
palette="yellow"
class="column p-3xs px-2xs surface-tinted stack-v justify-end br-s gap-2xs"
>
<div class="stack-h justify-end gap-3xs">
<color-mode
palette="purple"
class=" p-4xs pr-3xs surface-dyed fs-xs br-s b-all bc-subtle stack-h nowrap gap-4xs"
>
<div
class="v-icon"
style="font-size: 8px;"
data-v-icon="plus"
></div>
<div class="lh-tight ink-subtle">7.5</div>
</color-mode>
<color-mode
palette="yellow"
class=" p-4xs pr-3xs surface-dyed fs-xs br-s b-all bc-subtle stack-h nowrap gap-4xs"
>
<div
class="v-icon"
style="font-size: 8px;"
data-v-icon="plus"
></div>
<div class="lh-tight ink-subtle">7.5</div>
</color-mode>
</div>
<div class="ml-auto ta-right fs-l lh-tight ink-subtle ">30.0</div>
</color-mode>
</div>
</div>
</div>
<div
id="filter-drawer"
class="v-popover"
popover="auto"
data-type="drawer"
data-position="left"
style="width: 420px;"
>
<div
class="stack-v nowrap gap-s p-m surface-tinted of-scroll shadow-high m-s"
style="
min-height: 100svh;
max-height: 100svh;
"
>
<!-- Header -->
<div
class="pos-sticky top-0 shadow-mid br-m surface-dyed justify-between -mx-xs p-2xs px-xs stack-h"
>
<h1 class="fs-l fw-bold ink-prominent">Filter</h1>
<button
class="v-button"
data-variant="plain"
data-size="small"
aria-label="Lukk"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="19" y1="12" x2="5" y2="12"></line>
<polyline points="12 19 5 12 12 5"></polyline>
</svg>
</button>
</div>
<!-- Søk -->
<div class="stack-v gap-2xs my-l">
<label class="v-form-label" for="consultantSearch">Søk etter navn</label>
<input
class="v-input"
type="text"
id="consultantSearch"
data-size="large"
/>
</div>
<!-- Status -->
<div class="b-all bc-subtle surface-base br-l gap-2xs px-xs py-2xs stack-v">
<div class="stack-v gap-2xs">
<div class="stack-h gap-2xs">
<label for="Ledig-tid" class="fs-s fw-medium flex-1">Ledig tid</label>
<input
class="v-checkbox fs-s "
data-size="large"
type="checkbox"
id="Ledig-tid"
/>
</div>
</div>
</div>
<!-- Avdeling -->
<div class="stack-v gap-2xs p-xs surface-base b-all bc-subtle br-l">
<p class="v-form-label">Avdeling</p>
<div class="stack-v gap-2xs">
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Bergen" />
<label for="Bergen" class="fs-s stack-h flex-1 ">
<span class="mr-auto">Bergen</span>
<span class="ink-subtle">30</span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Oslo" />
<label for="Oslo" class="fs-s stack-h flex-1 ">
<span class="mr-auto">Oslo</span>
<span class="ink-subtle">30</span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Trondheim" />
<label for="Trondheim" class="fs-s stack-h flex-1 ">
<span class="mr-auto">Trondheim</span>
<span class="ink-subtle">30</span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Stavanger" />
<label for="Stavanger" class="fs-s stack-h flex-1 ">
<span class="mr-auto">Stavanger</span>
<span class="ink-subtle">30</span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Norge" />
<label for="Norge" class="fs-s stack-h flex-1 ">
<span class="mr-auto">Norge</span>
<span class="ink-subtle">30</span>
</label>
</div>
</div>
</div>
<!-- Rå-år -->
<div class="stack-v gap-2xs p-xs surface-base b-all bc-subtle br-l">
<p class="v-form-label">Rå-år / Antall år erfaring</p>
<div class="stack-v gap-2xs">
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m"
>
<input class="v-checkbox fs-s" type="checkbox" id="0-2-Kilimanjaro" />
<label for="0-2-Kilimanjaro" class="fs-s stack-h gap-xs flex-1">
<span class="mr-auto">Kilimanjaro</span>
<span class="ink-subtle">0-2</span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m"
>
<input class="v-checkbox fs-s" type="checkbox" id="3-4-Mont-Blanc" />
<label for="3-4-Mont-Blanc" class="fs-s stack-h gap-xs flex-1">
<span class="mr-auto">Mont Blanc</span>
<span class="ink-subtle">3-4 </span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m"
>
<input class="v-checkbox fs-s" type="checkbox" id="5-7-Denali" />
<label for="5-7-Denali" class="fs-s stack-h gap-xs flex-1">
<span class="mr-auto">Denali</span>
<span class="ink-subtle">5-7 </span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m"
>
<input
class="v-checkbox fs-s"
type="checkbox"
id="8-11-Cerro-Torre"
/>
<label for="8-11-Cerro-Torre" class="fs-s stack-h gap-xs flex-1">
<span class="mr-auto"> Cerro Torre</span>
<span class="ink-subtle">8-11</span>
</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m"
>
<input class="v-checkbox fs-s" type="checkbox" id="12+-K2" />
<label for="12+-K2" class="fs-s stack-h gap-xs flex-1">
<span class="mr-auto">K2</span>
<span class="ink-subtle">12+ </span>
</label>
</div>
</div>
<div class="stack-v gap-3xs mt-s">
<div
class="stack-h gap-3xs flex-1 b-all br-m bc-subtle py-3xs pl-2xs pr-3xs"
>
<label class="fs-xs fw-medium p-3xs" for="yearsExperienceFrom"
>Fra</label
>
<input
class="v-input w-max-2 ml-auto ta-right"
type="number"
data-size="small"
id="yearsExperienceFrom"
/>
</div>
<div
class="stack-h gap-3xs flex-1 b-all br-m bc-subtle py-3xs pl-2xs pr-3xs"
>
<label class="fs-xs fw-medium p-3xs" for="yearsExperienceTo"
>Til</label
>
<input
class="v-input w-max-2 ml-auto ta-right"
type="number"
data-size="small"
id="yearsExperienceTo"
/>
</div>
</div>
</div>
<!-- Antall år erfaring -->
<div class="stack-v gap-2xs p-xs surface-base b-all bc-subtle br-l">
<p class="v-form-label">Antall år erfaring</p>
</div>
<!-- Kompetanse -->
<div class="stack-v gap-2xs p-xs surface-base b-all bc-subtle br-l">
<p class="v-form-label">Kompetanse</p>
<div class="stack-v gap-2xs">
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Ledelse" />
<label for="Ledelse" class="fs-s">Ledelse</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Design" />
<label for="Design" class="fs-s">Design</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Utvikling" />
<label for="Utvikling" class="fs-s">Utvikling</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input
class="v-checkbox fs-s"
type="checkbox"
id="Prosjekt--og-produktledelse"
/>
<label for="Prosjekt--og-produktledelse" class="fs-s"
>Prosjekt- og produktledelse</label
>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Strategi" />
<label for="Strategi" class="fs-s">Strategi</label>
</div>
</div>
</div>
<!-- Faggruppe -->
<div class="stack-v gap-2xs p-xs surface-base b-all bc-subtle br-l">
<details>
<summary class="stack-h gap-xs">
<h3 class="v-form-label">Faggruppe</h3>
<div class="v-button ml-auto" data-variant="tinted" data-size="small">
Vis
</div>
</summary>
<div class="stack-v gap-2xs py-s">
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id=".NET" />
<label for=".NET" class="fs-s">.NET</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Frontend" />
<label for="Frontend" class="fs-s">Frontend</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="JVM" />
<label for="JVM" class="fs-s">JVM</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Plattform" />
<label for="Plattform" class="fs-s">Plattform</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="PPP-ledelse" />
<label for="PPP-ledelse" class="fs-s">PPP-ledelse</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="Salg" />
<label for="Salg" class="fs-s">Salg</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input
class="v-checkbox fs-s"
type="checkbox"
id="Tjenestedesign"
/>
<label for="Tjenestedesign" class="fs-s">Tjenestedesign</label>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input
class="v-checkbox fs-s"
type="checkbox"
id="Strategisk-design"
/>
<label for="Strategisk-design" class="fs-s"
>Strategisk design</label
>
</div>
<div
class="stack-h gap-2xs py-3xs pr-2xs -mr-2xs pl-3xs -ml-3xs -my-3xs bg-wash:hover br-m "
>
<input class="v-checkbox fs-s" type="checkbox" id="UX-design" />
<label for="UX-design" class="fs-s">UX-design</label>
</div>
</div>
</details>
</div>
</div>
</div>Choicebox
Inspiration: https://vercel.com/geist/choicebox
This is where JS would come in hand to switch between palette="blue|grey" when the radio is selected.
Show editor
<div class="stack-h gap-s">
<color-mode palette="blue" class="d-block flex-1 br-m surface-dyed">
<label
class="stack-h gap-m p-xs bg-wash:hover bc-prominent b-all br-inherit"
>
<div class="mr-auto">
<h5 class="ink-subtle fw-medium fs-m">Pro trial</h5>
<p class="ink-subtle">Free for two weeks</p>
</div>
<input type="radio" class="v-radio" name="trial" checked />
</label>
</color-mode>
<color-mode
palette="grey"
class="d-block flex-1 b-all bc-prominent br-m surface-dyed "
>
<label class="stack-h gap-m p-xs bg-wash:hover">
<div class="mr-auto">
<h5 class="ink-subtle fw-medium fs-m">Pro trial</h5>
<p class="ink-subtle">Free for two weeks</p>
</div>
<input type="radio" class="v-radio" name="trial" />
</label>
</color-mode>
</div>Split buttons
Not sure if it is possible, but here we go! https://vercel.com/geist/split-button
Edit: turns out it's somewhat possible. We're using two buttons in a stack-h nowrap, when using a
Show editor
<div class="stack-h nowrap">
<button class="v-button br-tr-none br-br-none px-l">Save</button>
<div class="bg-currentcolor self-stretch"></div>
<button
class="aspect-square br-bl-none br-tl-none v-button p-0"
popovertarget="split-button-popover"
>
<svg
viewBox="0 0 16 16"
height="16"
width="16"
data-slot="geist-icon"
style="color: currentcolor;"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="m14.06 5.5-.53.53-4.82 4.82a1 1 0 0 1-1.42 0L2.47 6.03l-.53-.53L3 4.44l.53.53L8 9.44l4.47-4.47.53-.53z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div class="stack-h nowrap">
<button data-variant="tinted" class="v-button br-tr-none br-br-none px-l">
Save
</button>
<div class="bg-currentcolor self-stretch"></div>
<button
data-variant="tinted"
class="aspect-square br-bl-none br-tl-none v-button p-0"
popovertarget="split-button-popover"
>
<svg
viewBox="0 0 16 16"
height="16"
width="16"
data-slot="geist-icon"
style="color: currentcolor;"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="m14.06 5.5-.53.53-4.82 4.82a1 1 0 0 1-1.42 0L2.47 6.03l-.53-.53L3 4.44l.53.53L8 9.44l4.47-4.47.53-.53z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div class="stack-h nowrap">
<button data-variant="outlined" class="v-button br-tr-none br-br-none px-l">
Save
</button>
<div class="bg-currentcolor self-stretch"></div>
<button
data-variant="outlined"
class="aspect-square br-bl-none br-tl-none v-button p-0"
popovertarget="split-button-popover"
>
<svg
viewBox="0 0 16 16"
height="16"
width="16"
data-slot="geist-icon"
style="color: currentcolor;"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="m14.06 5.5-.53.53-4.82 4.82a1 1 0 0 1-1.42 0L2.47 6.03l-.53-.53L3 4.44l.53.53L8 9.44l4.47-4.47.53-.53z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
<div
id="split-button-popover"
class="v-popover"
popover="auto"
data-type="tooltip"
data-position="bottom"
>
<div
class="p-3xs b-all surface-base stack-v br-l w-max-4 fs-s m-2xs"
stagger-items="from-above"
>
<div class="p-3xs bg-wash:hover br-m stack-v gap-3xs" href="#">
<h4>Save</h4>
<p class="ink-subtle">Save charges</p>
</div>
<div class="p-3xs bg-wash:hover br-m stack-v gap-3xs" href="#">
<h4>Save + Redeploy</h4>
<p class="ink-subtle">
Save changes and create a new production deployment
</p>
</div>
</div>
</div>Nice popovers
This one leverages a popover, a details list, and a form
Get started with Varde
It's really simple – anyone could do it!
Not yet ready to implement?
Get started and try Varde by following these steps
- Link to
- Run prompt
??? - Profit
For more details see Varde docs
Show editor
<button type="button" class="v-button" popovertarget="demo-default">
Open popover
</button>
<div
id="demo-default"
class="v-popover w-full"
data-backdrop
popover="auto"
style="max-width: 68rem;"
>
<div
class="d-block p-l stack-v surface-tinted br-xl shadow-high"
stagger-items="soft"
>
<div class="stack-h gap-m items-start">
<div class="w-max-4">
<h1 class="lh-tight">Get started with Varde</h1>
<p class="ink-subtle mt-xs">It's really simple – anyone could do it!</p>
</div>
<div class="shadow-mid flex-1 surface-base br-l of-clip">
<div class="px-l-xl py-m b-b bc-subtle stack-v">
<label class="fw-medium mb-3xs">Where is your endpoint?</label>
<input
value="https://varde.variant.dev/api"
type="text"
class="v-input"
/>
</div>
<div class="px-l-xl py-m b-b bc-subtle stack-v">
<label class="fw-medium mb-3xs">Your repo</label>
<input
value="https://varde.variant.dev/api"
type="text"
class="v-input"
/>
</div>
<color-mode
palette="periwinkle"
class="d-block px-l-xl py-m surface-dyed"
>
<details>
<summary class="fw-medium stack-h">
<p class="mr-auto">Not yet ready to implement?</p>
<div
type="button"
data-variant="tinted"
data-size="small"
class="v-button"
>
Tell me more
</div>
</summary>
<div class="v-typeset py-s">
<p class="fw-medium">
Get started and try Varde by following these steps
</p>
<ol>
<li>Link to</li>
<li>Run prompt <code>???</code></li>
<li>Profit</li>
</ol>
<p>
For more details see
<a href="https://varde.variant.dev/docs">Varde docs</a>
</p>
</div>
</details>
</color-mode>
</div>
</div>
<div class="stack-h mt-l">
<button
type="button"
class="v-button mr-auto"
data-variant="tinted"
popovertargetaction="hide"
popovertarget="demo-default"
>
Cancel
</button>
<button type="button" class="v-button">Go, go, go!</button>
</div>
</div>
</div>Chips
This one utilizes an escape hatch
Show editor
<div class="stack-h gap-xs">
<button
type="button"
class="v-button br-pill"
data-size="small"
data-variant="outlined"
>
Trondheim
</button>
<button
type="button"
class="v-button br-pill"
data-size="small"
data-variant="outlined"
>
Oslo
</button>
<color-mode inverted>
<button
type="button"
class="v-button br-pill"
data-size="small"
data-variant="tinted"
>
Bergen
</button>
</color-mode>
<button
type="button"
class="v-button br-pill"
data-size="small"
data-variant="outlined"
>
Stavanger
</button>
</div>Time slots
Velkommen til
Variantdag
Kaffe med noko attåt
aka. selskapsstatus
Fagaktiviteter
Utvikling → k8 workshop
Design → k8 workshop
PPP → Dele erfaringer fra oppdrag
Lunsj
Velkommen til åpen Variantdag
Tilit og KI
KI og design
Lorem something something
KI i Kunnskapssektor
Lorem something something
Produktstrategi og, skulle du tro, KI!
Lorem something something
Quiz!
Lorem something something
Åpen Bariant
Show editor
<color-mode
palette="periwinkle"
class="d-block surface-tinted p-xl -m-s br-inherit of-clip"
>
<color-mode
inverted
class="surface-dyed d-block br-l mb-xl mt-2xl pb-2xs pt-xs px-s"
>
<p class="lh-tight">Velkommen til</p>
<h1 class="fs-4xl fw-bold">Variantdag</h1>
</color-mode>
<div
class="d-grid gap-column-xl gap-row-m"
style="grid-template-columns: max-content 1fr;"
stagger-reveal
>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">08:00 – 08:15</time>
<div>
<h3>Kaffe med noko attåt</h3>
<p>aka. selskapsstatus</p>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">08:30 – 10:15</time>
<div class="stack-v">
<h3>Fagaktiviteter</h3>
<p>Utvikling → k8 workshop</p>
<p>Design → k8 workshop</p>
<p>PPP → Dele erfaringer fra oppdrag</p>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">10:15 – 11:30</time>
<div>
<h3>Lunsj</h3>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">11:30 – 11:45</time>
<div>
<h3>Velkommen til åpen Variantdag</h3>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">12:15 – 13:00</time>
<div>
<h3>Tilit og KI</h3>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">15:00 – 15:30</time>
<div>
<h3>KI og design</h3>
<p>Lorem something something</p>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">15:30 – 16:00</time>
<div>
<h3>KI i Kunnskapssektor</h3>
<p>Lorem something something</p>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">16:00 – 17:00</time>
<div>
<h3>Produktstrategi og, skulle du tro, KI!</h3>
<p>Lorem something something</p>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">17:00</time>
<div>
<h3>Quiz!</h3>
<p>Lorem something something</p>
</div>
</div>
<div class="grid-subgrid grid-all-columns">
<time class="pt-3xs">18:00</time>
<div>
<h3>Åpen Bariant</h3>
</div>
</div>
</div>
</color-mode>KPI
Finansiell status
Variants KPIs denne vs forrige måned.
MRR
3.2%
350K
OpEx
12.8%
211K
CapEx
8.8%
94K
GPM
1.2%
44.6%
NPM
0.0%
9.1%
EBITDA
4.1%
443K
Show editor
<div class="surface-base br-m py-m px-xl">
<div class="stack-h items-start mb-l ">
<div class="mr-auto">
<h3 class="fs-2xl">Finansiell status</h3>
<p class="fs-s ink-subtle">Variants KPIs denne vs forrige måned.</p>
</div>
<div class="stack-h gap-2xs">
<button
class="v-button aspect-square px-3xs"
data-variant="plain"
data-size="small"
>
<svg
width="20"
height="20"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 13C12.5523 13 13 12.5523 13 12V3C13 2.44771 12.5523 2 12 2H3C2.44771 2 2 2.44771 2 3V6.5C2 6.77614 2.22386 7 2.5 7C2.77614 7 3 6.77614 3 6.5V3H12V12H8.5C8.22386 12 8 12.2239 8 12.5C8 12.7761 8.22386 13 8.5 13H12ZM9 6.5C9 6.5001 9 6.50021 9 6.50031V6.50035V9.5C9 9.77614 8.77614 10 8.5 10C8.22386 10 8 9.77614 8 9.5V7.70711L2.85355 12.8536C2.65829 13.0488 2.34171 13.0488 2.14645 12.8536C1.95118 12.6583 1.95118 12.3417 2.14645 12.1464L7.29289 7H5.5C5.22386 7 5 6.77614 5 6.5C5 6.22386 5.22386 6 5.5 6H8.5C8.56779 6 8.63244 6.01349 8.69139 6.03794C8.74949 6.06198 8.80398 6.09744 8.85143 6.14433C8.94251 6.23434 8.9992 6.35909 8.99999 6.49708L8.99999 6.49738"
fill="currentColor"
></path>
</svg>
</button>
<button
class="v-button aspect-square px-3xs"
data-variant="plain"
data-size="small"
>
<svg
width="20"
height="20"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.3285 1.13607C10.1332 0.940809 9.81662 0.940808 9.62136 1.13607C9.42609 1.33133 9.42609 1.64792 9.62136 1.84318L10.2744 2.49619L5.42563 6.13274L4.31805 5.02516C4.12279 4.8299 3.80621 4.8299 3.61095 5.02516C3.41569 5.22042 3.41569 5.537 3.61095 5.73226L5.02516 7.14648L6.08582 8.20714L2.81545 11.4775C2.62019 11.6728 2.62019 11.9894 2.81545 12.1846C3.01072 12.3799 3.3273 12.3799 3.52256 12.1846L6.79293 8.91425L7.85359 9.97491L9.2678 11.3891C9.46306 11.5844 9.77965 11.5844 9.97491 11.3891C10.1702 11.1939 10.1702 10.8773 9.97491 10.682L8.86733 9.57443L12.5039 4.7257L13.1569 5.37871C13.3522 5.57397 13.6687 5.57397 13.864 5.37871C14.0593 5.18345 14.0593 4.86687 13.864 4.6716L12.8033 3.61094L11.3891 2.19673L10.3285 1.13607ZM6.13992 6.84702L10.9887 3.21047L11.7896 4.01142L8.15305 8.86015L6.13992 6.84702Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
<div
class="d-grid gap-s"
stagger-reveal
style="grid-template-columns: repeat(3, 1fr)"
>
<!-- MRR -->
<color-mode palette="green" class="d-block">
<div class="stack-h items-center gap-2xs mb-2xs">
<span class="fs-s ink-subtle">MRR</span>
<color-mode palette="green">
<span
class="surface-dyed ink-prominent stack-h gap-3xs px-xs py-4xs br-pill fs-xs fw-medium"
>
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="-ml-3xs"
>
<path
d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
3.2%
</span>
</color-mode>
</div>
<div class="fs-3xl fw-bold mb-2xs ink-subtleefault">350K</div>
</color-mode>
<!-- OpEx -->
<color-mode palette="coral" class="d-block">
<div class="stack-h items-center gap-2xs mb-2xs">
<span class="fs-s ink-subtle">OpEx</span>
<color-mode palette="coral">
<span
class="surface-dyed ink-prominent stack-h gap-3xs px-xs py-4xs br-pill fs-xs fw-medium"
>
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="-ml-3xs"
>
<path
d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
12.8%
</span>
</color-mode>
</div>
<div class="fs-3xl fw-bold mb-2xs ink-subtleefault">211K</div>
</color-mode>
<!-- CapEx -->
<color-mode palette="green" class="d-block">
<div class="stack-h items-center gap-2xs mb-2xs">
<span class="fs-s ink-subtle">CapEx</span>
<color-mode palette="green">
<span
class="surface-dyed ink-prominent stack-h gap-3xs px-xs py-4xs br-pill fs-xs fw-medium"
>
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="-ml-3xs"
>
<path
d="M7.5 2C7.77614 2 8 2.22386 8 2.5L8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.75979 12.9473 7.63261 13 7.5 13C7.36739 13 7.24021 12.9473 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 2.5C7 2.22386 7.22386 2 7.5 2Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
8.8%
</span>
</color-mode>
</div>
<div class="fs-3xl fw-bold mb-2xs ink-subtleefault">94K</div>
</color-mode>
<!-- GPM -->
<color-mode palette="coral" class="d-block">
<div class="stack-h items-center gap-2xs mb-2xs">
<span class="fs-s ink-subtle">GPM</span>
<color-mode palette="coral">
<span
class="surface-dyed ink-prominent stack-h gap-3xs px-xs py-4xs br-pill fs-xs fw-medium"
>
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="-ml-3xs"
>
<path
d="M7.5 2C7.77614 2 8 2.22386 8 2.5L8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.75979 12.9473 7.63261 13 7.5 13C7.36739 13 7.24021 12.9473 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 2.5C7 2.22386 7.22386 2 7.5 2Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
1.2%
</span>
</color-mode>
</div>
<div class="fs-3xl fw-bold mb-2xs ink-subtleefault">44.6%</div>
</color-mode>
<!-- NPM -->
<color-mode palette="green" class="d-block">
<div class="stack-h items-center gap-2xs mb-2xs">
<span class="fs-s ink-subtle">NPM</span>
<span
class="surface-tinted ink-subtle px-2xs py-4xs br-pill fs-xs fw-medium"
>0.0%</span
>
</div>
<div class="fs-3xl fw-bold mb-2xs ink-subtleefault">9.1%</div>
</color-mode>
<!-- EBITDA -->
<color-mode palette="green" class="d-block">
<div class="stack-h items-center gap-2xs mb-2xs">
<span class="fs-s ink-subtle">EBITDA</span>
<color-mode palette="green">
<span
class="surface-dyed ink-prominent stack-h gap-3xs px-xs py-4xs br-pill fs-xs fw-medium"
>
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="-ml-3xs"
>
<path
d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
4.1%
</span>
</color-mode>
<div class="fs-3xl fw-bold mb-2xs ink-default">443K</div>
</div>
</color-mode>
</div>
</div>A table
Show editor
<div class="surface-base br-m w-max-7 mx-auto my-xl p-m">
<div class="stack-h items-center justify-between mb-s">
<h3 class="fs-l">Orders</h3>
<button class="v-button" data-variant="plain" data-size="small">
<svg
width="12"
height="12"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
<span class="fs-s">May 2023</span>
</button>
</div>
<div class="stack-v gap-xs mb-s">
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-s ink-subtle">Order no.</span>
<span class="fs-s ink-subtle">Payment</span>
<span class="fs-s ink-subtle">Fulfillment</span>
<span class="fs-s ink-subtle ta-right">Amount</span>
</div>
<hr />
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-m"><a href="#" class="v-link fs-s">#1005</a></span>
<div>
<color-mode palette="green">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Paid</span
>
</color-mode>
</div>
<div>
<color-mode palette="orange">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Delivering</span
>
</color-mode>
</div>
<span class="fs-s ta-right">154.60</span>
</div>
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-m"><a href="#" class="v-link fs-s">#1004</a></span>
<div>
<color-mode palette="green">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Paid</span
>
</color-mode>
</div>
<div>
<color-mode palette="orange">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Unfulfilled</span
>
</color-mode>
</div>
<span class="fs-s ta-right">93.49</span>
</div>
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-m"><a href="#" class="v-link fs-s">#1003</a></span>
<div>
<color-mode palette="grey">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Refunded</span
>
</color-mode>
</div>
<div>
<color-mode palette="coral">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Cancelled</span
>
</color-mode>
</div>
<span class="fs-s ta-right">39.00</span>
</div>
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-m"><a href="#" class="v-link fs-s">#1002</a></span>
<div>
<color-mode palette="orange">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Unpaid</span
>
</color-mode>
</div>
<div>
<color-mode palette="orange">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Unfulfilled</span
>
</color-mode>
</div>
<span class="fs-s ta-right">438.90</span>
</div>
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-m"><a href="#" class="v-link fs-s">#1001</a></span>
<div>
<color-mode palette="green">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Paid</span
>
</color-mode>
</div>
<div>
<color-mode palette="green">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Fulfilled</span
>
</color-mode>
</div>
<span class="fs-s ta-right">532.64</span>
</div>
<div
class="d-grid bg-wash:hover items-center"
style="grid-template-columns: repeat(4, 1fr)"
>
<span class="fs-m"><a href="#" class="v-link fs-s">#1000</a></span>
<div>
<color-mode palette="green">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Paid</span
>
</color-mode>
</div>
<div>
<color-mode palette="green">
<span
class="surface-tinted ink-subtle px-2xs py-3xs br-pill fs-xs fw-medium"
>Fulfilled</span
>
</color-mode>
</div>
<span class="fs-s ta-right">625.03</span>
</div>
</div>
<div class="stack-v justify-end mt-l">
<button class="v-button mx-s px-xl" data-variant="tinted" data-size="small">
Show more
</button>
</div>
</div>