Vklass V2 — Designkomponenter

Statisk kitchen sink för Vklass V2. Använd som referens när nya V2-vyer byggs. Klassnamnen kommer direkt från V2-frontend (VklassFrontEnd/scss/styles), färger/spacing från _variables.scss + _colors-palette.scss.

Tokens
Typografi
Knappar
Formulär
Kort
Meddelandelådor
Notifieringar
Call-to-action
Badges & counters
Tabbar
Tabeller

Designtokens

Från _variables.scss + _colors-palette.scss + _colors.scss. Speglas i themes/vklassv2.css som CSS-variabler (--v2-*).

$clHard — #26418f $clMedium — #4e6ed0 $clSuperSoft — #dbe1f5 $clGreen — #3e8442 $clYellow — #b36200 $clRed — #eb0017 $grayLightest — #fafafa $grayLighter — #f0f0f0 $graySmooth — #e0e0e0 $grayLight — #c8c8c8 $grayGraphics — #949494 $gray — #767676 $grayDark — #595959 $grayDarker — #4a4a4a

Spacing: $gap = 13px, $gapDouble = 26px. Toolbar: $toolbarHeight = 65px. Drawer: $permanentDrawerWidth = 294px. Innehåll: $contentContainerMaxWidth = 1562px. Font: Roboto, html-bas 14px (typografi rem-baserad).

Typografi

Roboto. Standardstorlek 14px på html, allt annat i rem.

Rubrik 1 — Sidans huvudrubrik

Rubrik 2 — Sektion

Rubrik 3 — Underrubrik

Brödtext — kursiv, fet, länk till annan vy, kod.

Hjälptext / metadata (0.857rem)

Knappar (`.mdc-button`)

Text, outlined, raised, discrete, stretch och FAB.

Formulärfält (`.vk-field`, `.vk-textfield`, `.mdc-select`)

Förnamn Visas i lärarvyn när elever öppnar planeringen. E-post Ange en giltig e-postadress. Klass Beskrivning

Skicka påminnelse Lås redigering Synlig för elever Endast personal Notifiera vårdnadshavare

Kort (`.vk-card`)

Eleverna jobbar med kapitel 3 och lämnar in laborationen senast fredag.

3 frånvarande, 0 sena, 22 närvarande.

Meddelandelådor (`.vk-message-box`)

Du tittar på preliminära omdömen — slutgiltiga publiceras 14 juni.

Planeringen är sparad och delad med vårdnadshavare.

Två elever saknar koppling till provet. Visa lista.

Importen misslyckades. Kontakta administratör.

Outlined-variant — används när bakgrunden redan är färgad.

Notifieringar (`.vk-notification`)

Hej! Jag undrar om läxhjälpen i tisdags …

Lucas är frånvarande i Matematik 9A.

Call-to-action & box-link

Slutför terminsbedömningar 7 elever kvar i 9A · Inlämning senast 14 juni

Veckans uppgift

Naturkunskap · Inlämning fre

9A · 23 elever

Badges, counters, chips

Aktiv Klar Påminnelse Försenad Inaktiv slim

Meddelanden Uppgifter Notis

Standard Primary Godkänd Påminnelse Avvisad

Tabbar (`.mdc-tab-bar`)

Aktiv tab markeras med --active och färgad underrad.

Tabeller

.vk-grid-table är V2-standardvarianten — använd ej <table> där flex/grid behövs.

Elev

Klass

Senast

Status

Anna Johansson

2026-05-10

Godkänd

Felix Lindberg

2026-05-09

Påminnelse

Lucas Berg

—

Saknas

Standardtabell (`.vk-content-table`)

Kurs	Lärare	Elever	Snittbetyg
Matematik 9A	Kerstin Berg	23	B
Engelska 9A	Olle Nilsson	22	C
Naturkunskap 9A	Anna Lind	23	B+

Källa för komponentklasser: VklassFrontEnd/scss/styles/{mdc,vk}/*.scss · Tokens: _variables.scss, _colors-palette.scss, _colors.scss.

Vklass V2 — Designkomponenter

Designtokens

Typografi

Rubrik 1 — Sidans huvudrubrik

Rubrik 2 — Sektion

Rubrik 3 — Underrubrik

Knappar (`.mdc-button`)

Formulärfält (`.vk-field`, `.vk-textfield`, `.mdc-select`)

Kort (`.vk-card`)

Veckans planering

Närvaro klar

Meddelandelådor (`.vk-message-box`)

Notifieringar (`.vk-notification`)

Nytt meddelande från Anna Johansson

Frånvaro registrerad

Call-to-action & box-link

Badges, counters, chips

Tabbar (`.mdc-tab-bar`)

Tabeller

Standardtabell (`.vk-content-table`)

Designtokens

Typografi

Rubrik 1 — Sidans huvudrubrik

Rubrik 2 — Sektion

Rubrik 3 — Underrubrik

Knappar (.mdc-button)

Formulärfält (.vk-field, .vk-textfield, .mdc-select)

Kort (.vk-card)

Veckans planering

Närvaro klar

Meddelandelådor (.vk-message-box)

Notifieringar (.vk-notification)

Call-to-action & box-link

Badges, counters, chips

Tabbar (.mdc-tab-bar)

Tabeller

Standardtabell (.vk-content-table)

Knappar (`.mdc-button`)

Formulärfält (`.vk-field`, `.vk-textfield`, `.mdc-select`)

Kort (`.vk-card`)

Meddelandelådor (`.vk-message-box`)

Notifieringar (`.vk-notification`)

Tabbar (`.mdc-tab-bar`)

Standardtabell (`.vk-content-table`)