Web Components for Digi Designsystem
Arbetsförmedlingens designsystem finns för att utvecklare, designers och produktledare tillsammans ska kunna skapa bättre tjänster för den svenska arbetsmarknaden.
Utvecklas som öppen källkod tillsammans med andra myndigheter, utbildningsanordnare och kommersiella aktörer.
Stöd för React, Angular, Web Components och Figma.
Installera designsystemet genom att köra en av följande rader
``shReact
npm install @designsystem-se/af-react @designsystem-se/af
Lägg till följande rader i projektets globala css-fil
`css
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css';
@import '@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css';
`Det var allt! 🚀
Exempel
$3
`jsx
// App.tsx
import { DigiButton } from '@designsystem-se/af-react';
import { ButtonVariation } from '@designsystem-se/af';export function App() {
const handleClick = () => console.log('👋 Hallå Världen');
return (
Hälsa
);
}
`$3
`ts
// app.component.ts
import { Component } from '@angular/core';
import { DigiArbetsformedlingenAngularModule } from '@designsystem-se/af-angular';
import { ButtonVariation } from '@designsystem-se/af';@Component({
selector: 'app-root',
standalone: true,
imports: [DigiArbetsformedlingenAngularModule],
templateUrl: './app.component.html'
})
export class AppComponent {
buttonVariation = ButtonVariation.PRIMARY;
handleClick() {
console.log('👋 Hallå Världen');
}
}
``html
>Hälsa>
`$3
`html
rel="stylesheet"
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.css" />
rel="stylesheet"
href="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/fonts/src/fonts.css" />
type="module"
src="node_modules/@designsystem-se/af/dist/digi-arbetsformedlingen/digi-arbetsformedlingen.esm.js">
Hälsa
``Är du nyfiken på att hjälpa till med att bygga ett av sveriges mest tillgängliga och flexibla designsystem? Say no more. ✨
Vi behöver hjälp med allt ifrån kod, design, tillgänglighetsarbete, copywriting och marknadsföring.
- Läs Contribution Guidelines
- Kolla igenom issue tracker. 💡 Nybörjartips, filtrera efter "Mindre uppgift"
⚠️ Observera: Dela inte känslig information eller personuppgifter. Allting i GitLab är tillgängligt för alla besökare. Vid övriga ärenden var god använd kontaktuppgifter som finns tillgängliga på dokumentationswebben.
- Har du upptäckt ett problem med designsystemet? Skapa issue 🐛
- Tycker du att något saknas i designsystemet? Skicka in önskemål 🎁
- Har du fastnat på något som inte känns helt rätt eller är oklart? Ställ fråga 🙋
Designsystemet är välbeprövat i myndighetsvärlden sen flera år tillbaka. Komponenterna visas flera miljoner gånger per månad till olika användare.
---
Team Designsystem @ Arbetsförmedlingen 2025