Välkommen, Anna Andersson

Din personliga startsida

Min översikt

Här hittar du dina kurser, uppgifter, schema och all viktig information om dina studier.

info
Elev: Anna Andersson, klass 7A, Proximaskolan

Min studieöversikt

Snabb översikt över dina studier och kommande aktiviteter.

assignment
3
Kommande uppgifter
check_circle
5
Inlämnade
event
2
Schemalagda aktiviteter
trending_up
94%
Närvaro

Mina verktyg

Snabb åtkomst till dina viktigaste funktioner.

date_range
Mitt schema
Se ditt veckoschema, kommande lektioner och aktiviteter. Planera din studievecka.
event Idag: 4 lektioner
event_upcoming Nästa: Matematik
Visa mitt schema arrow_forward
assignment
Mina uppgifter
Se alla dina uppgifter och prov. Lämna in uppgifter och följ upp dina resultat.
schedule 3 att göra
check_circle 5 inlämnade
Se mina uppgifter arrow_forward
grading
Mina betyg
Se dina betyg och omdömen i alla ämnen. Följ din kunskapsutveckling.
school 8 ämnen
trending_up Snitt: B+
Se mina betyg arrow_forward
history_edu
Min elevlogg
Skriv reflektioner och se återkoppling från dina lärare. Dokumentera din utveckling.
edit 12 inlägg
comment 8 från lärare
Öppna elevlogg arrow_forward
person_pin_circle
Min närvaro
Se din närvarostatistik och anmäl frånvaro. Ansök om ledighet.
trending_up 94% närvaro
event_busy 3 dagar frånvaro
Se min närvaro arrow_forward
mail
Meddelanden
Kommunicera med dina lärare och läs viktiga meddelanden från skolan.
mark_email_unread 2 olästa
send 8 skickade
Öppna meddelanden arrow_forward
group_work
Mina grupper
Se dina klasser, kurser och samarbetsgrupper. Delta i gruppaktiviteter.
people 6 grupper
school Klass: 7A
Visa mina grupper arrow_forward
extension
Planeringar
Se dina lärares planeringar och teman. Förstå vad ni ska arbeta med framöver.
folder 4 aktuella
event Denna vecka: 2
Se planeringar arrow_forward

Meddelanden & Aviseringar

check_circle
Genomfört! Dina ändringar har sparats.
warning
Varning! Granska din inmatning innan du fortsätter.
error
Fel! Något gick fel. Försök igen.
info
Information: Nya funktioner är tillgängliga i senaste uppdateringen.

VK-Message-Box (Athena)

Element för att visa återkoppling till användare enligt Athena design system.

Standard varianter

Genomfört! Ändringar har sparats framgångsrikt.
Fel: Ett fel uppstod vid sparandet. Försök igen.
Varning! Denna åtgärd kan inte ångras.
Information: Systemet kommer att stängas för underhåll kl. 22:00.
Positivt: 23 av 25 elever har lämnat in uppgiften i tid.
Negativt: 5 elever har inte lämnat in uppgiften ännu.
Väntar: Din begäran behandlas och kommer att granskas inom 24 timmar.
Delvis: 12 av 18 frågor har besvarats korrekt.
Standard: Detta är ett neutralt meddelande utan specifik status.

Outlined variant

Success outlined: Med kantlinje istället för bakgrundsfärg.
Warning outlined: Uppmärksamma viktiga detaljer.

Med ikon

check_circle
Med ikon: Betyg har registrerats för alla elever i klassen.
error
Fel med ikon: Uppkopplingen till servern misslyckades.
info
Information: Du kan använda kortkommando Ctrl+S för att spara snabbt.

VK-State-Box (Athena)

Färgkodade statusindikator-rutor för att visa tillstånd.

Standard state boxes

G
Godkänd
F
Ej godkänd
-
Väntar
12/18
Delvis klar
i
Info
✓
Klar
!
Varning

Med alert-indikator

N
Närvarande
F
Frånvarande
S
Sen

Placeholder och tom status

-
Ej ifyllt
-

Med expanderbar popout

A
Betyg

Note: Popout visas när data-vk-popout-expanded="true" eller aria-expanded="true"

Knappar

Standard Button Types

Button Variants (Athena)

Buttons with Icons

Formulärelement & Dropdowns

Demonstration av alla dropdown-typer enligt Vklass design system.

--- Välj ---
Grundskola
Anpassad grundskola
Specialskola
Sameskola
AP
Arbetspass (Ap)
check
BL
Bild (BL)
check
BL
Bild (BL_GSS)
check
BL
Bild (BL_SPEC)
check
SV
Svenska (SV)
7B/SV_SV
check
GE
Geografi (GE)
GE-25-1-7B
check
ST
Projektarbete (STUD)
check
GE
Geografi (GE)
GE-45-2024
check
GE
Geografi (GE) – GE-25-1-7B
ST
Projektarbete (STUD)
check
check
check

Kort

Elevutveckling

Spåra elevprestationer och milstolpar

Övervaka individuell elevutveckling över alla ämnen och uppgifter.

På rätt spår

Uppgiftsstatus

Aktuella färdigställandegrader för uppgifter

Visa och hantera alla väntande och genomförda uppgifter.

Pågående

Klassanalys

Omfattande prestandamått för klassen

Analysera klassprestationstrender och identifiera områden för förbättring.

Behöver uppmärksamhet

Mina uppgifter

Kommande uppgifter och prov
Uppgift Ämne Förfaller Status Åtgärd
Novell Svenska 21 november Ej inlämnad
Ännu viktigare prov Engelska 19 november Kommande
Samla julföremål Svenska 27 november Inlämnad

Mina resultat - Matematik

Dina resultat på matematikuppgifter.

Uppgiftsresultat

Mina resultat - Matematik
Uppgift Datum Resultat Omdöme
Multiplikation 5 november A Utmärkt arbete!
Geometri 12 november B Bra förståelse
Procent 18 november A Mycket bra!

Min närvaro - Vecka 45

Din närvaro denna vecka.

Min närvaroöversikt - Vecka 45
Dag Status Lektioner
Måndag N 5 av 5
Tisdag N 5 av 5
Onsdag N 5 av 5
Torsdag N 5 av 5
Fredag N 5 av 5

Total närvaro: 100% denna vecka

Mina kurser

Mina aktiva kurser
Kurs Lärare Närvaro
Matematik 7 Thomas Nilsson 94%
Engelska 7 Eva Johansson 100%
Svenska 7 Kerstin Berg 96%

Mina uppgiftsresultat

Senaste inlämnade uppgifter
Status Uppgift Inlämnad Betyg
check_circle Matematikuppgift 1 2024-11-10 A
schedule Novell Ej inlämnad -
check_circle Samla julföremål 2024-11-15 B

Studentvy: Denna sida visar endast din egen information. Du kan inte se andra elevers resultat eller närvaro.

Laddningstillstånd

Laddar data...

Framstegsindikatorer

Närvarodiagram - Tom Status

Donut chart widget som visar närvarostatistik i tomt tillstånd.

Närvaro

0 närvaroregistreringar (0 tim. 0 min.)
Närvaro: (0 tim. 0 min.)
Giltig frånvaro: (0 tim. 0 min.)
Ogiltig frånvaro: (0 tim. 0 min.)

Varav avvikelsetid: Giltig 0 tim. 0 min., Ogiltig 0 tim. 0 min.

Närvaroöversikt med Kalender

Komplett närvarowidget med donut chart och månadskalender.

FY
Fysik (Fy)
90 %
29 närvaroregistreringar (38 tim. 40 min.) — 5 kommentarer
Närvaro: 90 % (34 tim. 40 min.)
Giltig frånvaro: 10 % (4 tim. 0 min.)
Ogiltig frånvaro: 0 % (0 tim. 0 min.)

Augusti 2017

15N
15N
22N
29N
29N
29G

September 2017

5N
5N
12N
12N
19N
19N
26G
26N

Oktober 2017

3N
10N
10N
17N
17G
24N
24N
31N
31N

November 2017

7N
7N
14N
21N
21N
28N
28N

Varav avvikelsetid: Giltig 7 tim. 12 min., Ogiltig 0 tim. 0 min.

Nivå och Publicering i Tabeller

Tabellkolumner med kunskapsnivåikoner och publiceringsstatus.

Bedömningsöversikt
NIVÅ arrow_drop_up
PUBLICERAT arrow_drop_down
priority_high
F-varning
check
Godtagbara kunskaper
Fredag 4 nov, 25 kl 14.39
check
Godtagbara kunskaper

Mina betyg

Översikt över dina betyg i alla ämnen.

Mina betyg i alla ämnen
Ämne Bild Biologi Engelska Fysik Geografi Historia HKK Idrott Kemi Matematik Musik Religion Samhällsk. Slöjd
Mina betyg C B A C D C B A C A E C C D

Genomsnitt: B+ | Klass: 7A | Årskurs: 7

Min närvarostatistik

Din närvaroutveckling under läsåret.

Min närvaro per månad

12% 10% 8% 6% 4% 2% 0% Aug Sep Oct Nov
Ogiltig frånvaro
Giltig frånvaro
Total frånvaro
Snitt org F
1/2

Min närvaro per kurs

EN
100%
SV
96%
MA
94%
IDH
100%
HI
95%
Ogiltig frånvaro
Giltig frånvaro

Ikonsystem

Ikonstorlekar

star Liten ikon (18px) star Standard ikon (24px) star Stor ikon (32px) apps App-ikon (48px)

Ikonmärken without profile picture (Athena Badge Sizes)

NC
NC
NC
NC
NC

Ikonmärken with profile picture (Athena Badge Sizes)

Profile
Profile
Profile
Profile
Profile

Dialoger & Modaler

Expanderbara Paneler

Denna panel innehåller detaljerad elevinformation inklusive betyg, närvaro och kontaktuppgifter.

Betyg: A
Närvaro: 95%
Status: Aktiv

Kurslärplan, uppgifter och information om framstegsspårning.

Kursgenomförande: 85%

Komplett lista över inlämnade uppgifter och deras betyg.

Matematikuppgift - A NO-projekt - B+ Historieuppsats - Väntande

Verktygsklasser & Layout (Athena)

Flexbox Layout-exempel

Fast objekt

Flexibelt objekt (växer för att fylla utrymme)

Flex-objekt 1
Flex-objekt 2
Flex-objekt 3
Flex-objekt 4

Comprehensive Flexbox Examples (All Athena Modifiers)

Direction Modifiers

vk-flex--dir-column - Column direction

Item 1
Item 2
Item 3

Alignment Modifiers

vk-flex--v-align-center - Vertically center items

Short
Tall item
Short

vk-flex--v-align-end - Align items to bottom

Item 1
Tall item
Item 3

vk-flex--h-align-center - Horizontally center items

Centered
Items

vk-flex--space-between - Space items evenly

Left
Center
Right

Gap Modifiers

vk-flex--gap - Standard gap (13px)

1
2
3
4

vk-flex--gap-double - Double gap (26px)

1
2
3

Item Modifiers

vk-flex__item--fixed and vk-flex__item--flexible

Fixed width
Grows to fill space
Fixed width

Spacing-exempel (Athena Spacing System)

Element med liten bottenmarginal (26px - Athena $gapDouble)
Element med medium toppmarginal (39px - Athena $gap * 3)
Element med medium utfyllnad (39px - Athena $gap * 3)

VK-Sidebar-Layout (Athena)

Responsiv sidebar-layout där sidebar placeras på sidan för större skärmar och staplas för mindre skärmar.

Basic Sidebar Layout

Header Section

Main Content Area

Detta är huvudinnehållsområdet. På större skärmar visas detta till vänster om sidofältet.

På mindre skärmar staplas innehållet vertikalt.

Sidebar

  • • Sidebar item 1
  • • Sidebar item 2
  • • Sidebar item 3

Sidebar Layout with Context

Header with Context

Main Content

Huvudinnehåll med context-sektion aktiverad.

Context Info

Ytterligare kontextuell information.

Sidebar

Sidofält med navigation eller verktyg.

VK-Columns-Container (Athena)

Renderar barnelement i flera kolumner baserat på skärmstorlek: 1 på mobil, 2 på surfplatta, 3 på stor desktop.

Column Item 1

Första kolumnobjektet.

Column Item 2

Andra kolumnobjektet.

Column Item 3

Tredje kolumnobjektet.

Column Item 4

Fjärde kolumnobjektet.

Column Item 5

Femte kolumnobjektet.

Column Item 6

Sjätte kolumnobjektet.

VK-Masonry (Athena)

CSS-baserad masonry-layout: 1 kolumn på mobil, 2 på surfplatta, 3 på desktop.

Masonry Item 1

Kort innehåll.

Masonry Item 2

Längre innehåll med mer text för att visa hur masonry-layouten anpassar sig till olika höjder. Detta kort har betydligt mer innehåll än de andra.

Masonry Item 3

Medium text.

Masonry Item 4

Kort innehåll igen.

Masonry Item 5

Detta är ett masonry-kort med varierande höjd. Layouten justeras automatiskt baserat på innehållets storlek.

Masonry Item 6

Sista objektet.

VK-Field (Athena)

Formulärfält-container enligt Athena design system.

Elevens fullständiga namn enligt folkbokföring.

Proximaskolan

Detta fält är endast för visning (vk-display).

VK-Hidden-Scroll (Athena)

Scrollbart område med dold scrollbar för cleaner UI.

Scrollbart innehåll

Detta är en scrollbar som är dold på overlay scrollbar-system (Mac, iOS, Android).

Scrollbaren visas fortfarande på Windows och andra system med permanent scrollbar.

Lägg till mer innehåll för att se scrollning...

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Duis aute irure dolor in reprehenderit in voluptate velit.

Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

VK-Icon-Badge-Indentation (Athena)

Auto-indenterar element som följer ett icon-badge.

Anna Andersson

Anna Andersson

Detta text-element är auto-indenterat baserat på badge-storleken.

VK-Text-On-Phone (Athena)

Helper där __text sub-element endast visas på mobil.

📱 Denna text visas endast på mobilenheter (max-width: 599px)

Typografi

Rubrik 1 - Huvudsidestitel

Rubrik 2 - Sektionstitel

Rubrik 3 - Undersektion stitel

Detta är ett vanligt stycke med normal text. Det demonstrerar standardtypsnittsstyling och radhöjd som används i hela applikationen. Texten ska vara lätt att läsa och välplacerad.

Detta är liten text som används för bildtexter, fotnoter och sekundär information.

Detta är versaltext som används för menyalternativ och etiketter

Detta är en länk i ett stycke för att visa länkstyling.

Athena Utility Classes

Width Utilities

width-25-percent
width-75-percent
width-100-percent
width-100 (100px)
width-150 (150px)
width-300 (300px)

Border Utilities

border-top-gray-lighter
border-bottom-gray-lighter
border-bottom-gray-light
border-left-gray-dark
boxed - border + padding
boxed--slim - slimmer padding
bordered - simple gray border

Display & Positioning Utilities

block - display: block
inline-block 1 inline-block 2
pos-rel (parent)
Position relative container

Opacity & Visibility Utilities

opaque-50 - 50% opacity
Normal transparent (0 opacity, takes space) Normal

Other Utilities

overflow-hidden - very long text that would normally overflow the container but is cut off
arrow_forward flip-h
user-select-none - try to select this text
cursor-pointer - hover over this

List Utilities

  • list-style-reset - no bullets
  • Second item
  • Third item
  • list-spacing - gap between items
  • Second item with spacing
  • Third item with spacing

Athena Color Utilities

Text Color Classes (vk-cl-*)

vk-cl-positive
vk-cl-negative
vk-cl-warning
vk-cl-info
vk-cl-pending
vk-cl-success
vk-cl-error
vk-cl-hard

Background Color Classes (vk-bg-*)

vk-bg-positive
vk-bg-negative
vk-bg-warning
vk-bg-info
vk-bg-pending
vk-bg-success

Grayscale Color Classes

vk-bg-white
vk-bg-gray-light
vk-bg-gray
vk-bg-gray-dark
vk-bg-gray-darker

Module Color Classes

Uppgifter
Dokumentation
Planeringar
Anteckningar
Lärresurser
Personliga filer

Entity Color Classes

Person
Kurs
Kursgrupp
Klass
Skola
Samarbete
Plan

Messenger Role Colors

Rektor
Personal
Elev
Vårdnadshavare

Athena Accessibility Classes

Screen Reader Classes

The button contains hidden text "Screen reader only text:" for screen readers

Focus Outline Utilities

Visibility Classes (responsive breakpoints)

hidden-phone - Hidden on mobile (max-width: 599px)
visible-phone - Only visible on mobile
hidden-desktop - Hidden on desktop (min-width: 1280px)
visible-desktop - Only visible on desktop

Athena Print Classes

Klasser för utskriftsoptimering. Testa med utskriftsförhandsgranskning (Ctrl+P / Cmd+P).

Print Visibility

visible-print - Endast synlig vid utskrift
hidden-print - Dold vid utskrift (syns endast på skärm)
margin-collapse-print - Marginaler tas bort vid utskrift

Expansion Panel Print Behavior

vk-expansion-panel--expand-in-print: Innehåll alltid inkluderat vid utskrift, även när stängt.

hide-closed-expansion-panels-in-print: Wrapper för att dölja stängda paneler vid utskrift.

Ikon med Notifieringsräknare

Demonstration av hur man visar räknare på ikoner för att indikera antal olästa meddelanden, aviseringar etc.

Användning: Notifieringsräknaren visar antal olästa/väntande objekt på en ikon. Den röda cirkeln med vit text är tydligt synlig och följer WCAG-kontrastkrav.

Animationer & Effekter

star