Webbplatsen kan inte läsas in korrekt

Se till att du använder en rekommenderad webbläsare. Är så redan fallet, försök besöka oss igen om en stund.

Rekommenderade webbläsare

Styleguide för pensionsmyndigheten.se

Components

Komponenter består av två olika varianer

  • Varianter av kombinerade element som vi ofta använder.
    Det går ofta att kombinera element hur som helst. Detta är bara exempel.

  • Är lite för komplexa för att kallas element. Men det ingen enskild del går at bryta ut till en egen komponent

Expandable panel

Main

Det du tjänar in till pension kallas pensionsrätt. Den sammanlagda pensionsrätten är 18,5 procent av din pensionsgrundande inkomst, varav 16 procent går till inkomstpensionen och 2,5 procent till premiepensionen. Pensionsgrundande inkomster är inkomster av arbete och ersättningar från socialförsäkringen och arbetslöshetsförsäkringen. Läs mer..

  • Från och med 8 juni kan du bara logga in med e-legitimation (BankID). Om du saknar e-legitimation, är utlandsbosatt, är god man/förvaltare eller har frågor kan du kontakta oss på Kundservice. Kontakta oss på Kundservice
  • Appen Byta fonder som finns för mobiltelefon och surfplattor görs om. Anledningen till det är att vi idag har heltäckande e-tjänster på webben för dig som ska byta fonder och vill söka och jämföra fonder oavsett om det är via mobil, surfplatta och dator. Logga in på Mina sidor

Ärende ID: 

2018-12-72

Vi har tagit emot din ansökan om ändring av allmän pension. Beslut fattas normalt månaden innan den månad du vill ändra pensionen från. När vi har fattat beslut kan du se det här. Du får även beslutet hemskickat.

Beslutstexten ska linjera i vänsterkant med texten i headern ("Ändring av allmän pension") och på desktop i högerkant med beloppets högerkant ("11 111 kr/mån").

Det du tjänar in till pension kallas pensionsrätt. Den sammanlagda pensionsrätten är 18,5 procent av din pensionsgrundande inkomst, varav 16 procent går till inkomstpensionen och 2,5 procent till premiepensionen. Pensionsgrundande inkomster är inkomster av arbete och ersättningar från socialförsäkringen och arbetslöshetsförsäkringen. Läs mer..

Code

Med exempel på händelsespårning

Det du tjänar in till pension kallas pensionsrätt. Den sammanlagda pensionsrätten är 18,5 procent av din pensionsgrundande inkomst, varav 16 procent går till inkomstpensionen och 2,5 procent till premiepensionen. Pensionsgrundande inkomster är inkomster av arbete och ersättningar från socialförsäkringen och arbetslöshetsförsäkringen. Läs mer..








  Expandable panel med lista i innehåll





  


    

      

        
      

      

        
    
          
  • Varje dag utvecklar och arbetar vi med innovativa tekniska lösningar för våra miljontals kunder runt om i landet.
            Hur jobbar vi?
          
    • 
          
  • ”Tillsammans med mina hjälpsamma kollegor får jag på ett effektivt sätt göra nytta för fler människor.” Ahmad, utvecklare
            Medarbetare berättar
          
    • 
        

      

    


  

  






  Exampel på expandable panel med ärende





  

    

      

      

        

          
Ärende ID: 

          
2018-12-72

        


        

          
Vi har tagit emot din ansökan om ändring av allmän pension. Beslut fattas normalt månaden innan den månad du vill ändra pensionen från. När vi har fattat beslut kan du se det här. Du får även beslutet hemskickat.

        

      

    

  

  






  Exempel på expandable panel med tredelad header med datum, rubrik och belopp





  

    

      
      

        

          
Beslutstexten ska linjera i vänsterkant med texten i headern ("Ändring av allmän pension") och på desktop i högerkant med beloppets högerkant ("11 111 kr/mån").

        

      

    

  

  



    

    

      
Info

      
Komponenten finns i två utseenden:


    
  
  • 
    Blå rubrik i medium med blå outline (exempel på användning: Overview och mina livssituationer)
  
    • 
  
  • 
    Blå rubrik normal med grå outline (exempel på användning: Mina pensionsförmåner och Mina ärenden)
  
    • 




 En expandable panel kan innehålla text eller bulletlist samt en länk och/eller en externlänk.
  
 

  Detta är en kombination av elementet panel och
  egenskapen expandable. Flera expandable panels kan radas upp.



    

  




    

  

  

    
Read more

    

      
Main

      

  

    

      

      
    


    
  


  

    

      

      
    


    
  



    

    

      
Code

      

  Med exempel på flera rubriker





  

    


      

        
        
      


      
    

  


  






  Med exempel innehållande lista





  

    

      

        

        
      


      
    

  


  



    

    

      
Info

      
    

  




    

  

  

    
Tooltip


    

      
Main

      
Detta är exempel på hur Tooltip ser ut och fungerar



  
Detta är en h2:a med stor tooltip-storlek

  
  


  

  
  
  

  
  

  
Detta är en text 
  
  


  

  

    Infotooltipen kan också innehålla inline-renderat html-innehåll
      
  
  

    
  

  

  

    
Hjälptexter kan ibland vara väldigt långa och då finns möjligheten att med javascript trigga ankarlänkar.

    
    
    
    
    
    
  
  

  



    

    

      
Code

      
Exempel på html-kod för Tooltip



  När en presentationstjänst som anger ps-styleguide som en dependency i package.json byggs så kommer ett antal hbs-filer för olika komponenter
  (bl.a. Tooltip) att genereras under resources/templates/styleguide. Komponenten konfigureras sedan mha olika attribut (inga är obligatoriska
  men text är väl trevligt att ange). Vill man ha en rubrik så får man lägga in och styla denna som html i text-attributet:



    
  
  • label Den text som anges här dyker upp som en label till höger om "?"-ikonen
    • 
  
  • text Den text som anges här dyker upp som text i popup-fönstret (kan även innhålla html som sträng)
    • 
  
  • tooltipId Den text som anges här kommer sättas som id på komponenten
    • 
  
  • uiDataId Den text som anges här kommer att sättas (följt av "-info") som "data-ui-test"-attribut
    • 
  
  • large-icon Anges som true eller false för att avgöra om ikonen ska bli större eller ej
    • 




  
  






  
  






  
  






  
  



    

  




    

  

  

    
Switch


    

      
Main

      
Detta är exempel på hur en switch ser ut och fungerar.





    

    

      
Code

      

  

    
  

  



    

  




    

      
Tabs

      

  

    
  
    

      
Översikt
Översikt
    

    

      
Värdeutveckling
Värde
    

    

      
Avgift
Avgift
    

    

      
Risk
Risk
    

  



    


    

  

  

    
MsgDialog


    

      
Main

      
Detta är exempel på hur MsgDialog ser ut och fungerar



  Avbryt
  Ta bort viktig data
  
  
  


    

    

      
Code

      
Exempel på html-kod för MsgDialog



  Det finns flera sätt att skapa en MsgDialog:




  För "avbryt"-knappar kan man använda css-klassen s_js-cancel-button




  
  





  För "ta bort"-knappar kan man använda css-klassen s_js-delete-button




  
  





  För andra användningsområden så får man själv initiera sin dialog genom att anropa new MsgDialog med valda parametrar:



    
  
  • $button Ett html-element att koppla funktionen till
    • 
  
  • action En callback-funktion som anropas när man klickar på ok-knappen
    • 
  
  • condition Ett villkor som kontrolleras innan det dialogen visas
    • 
  
  • text Den text som visas i dialogen
    • 
  
  • cancelText Den text som visas på avbryt-knappen. om cancelText är null så visas inte någon knapp.
    • 
  
  • okText Den text som visas på ok-knappen
    • 
  
  • isDestructive (default false) Om true så byts ordningen på ok-knappen och avbryt-knappen.
    • 
  
  • header (default null) Den text som visas som rubrik i dialogen. Om header är null så visas ingen rubrik.
    • 




  
  





  
  



    

  




    

    

  

  

    
Recommendations

    

      
Main

      
Detta är statisk HTML, enbart exempel på utseende.




  
Hitta direkt

  


    

    

      
Code

      
    

    

      
Info