Introduction

SCB designsystem finns för att underlätta skapandet av enhetliga, tillgängliga och användbara webbapplikationer.

Genom att använda SCB designsystem kan du snabbt och enkelt skapa en applikation som har en enhetlig design och användarupplevelse. Designsystemet innehåller en samling av färdiga komponenter, typografi, färger och designprinciper som är utvecklade för att uppfylla SCB:s krav på tillgänglighet, användbarhet och enhetlighet.

Getting Started

Installera designsystemet i ditt projekt genom att köra npm install scb-material.

Designsystemet bygger till stor del på Material Web Components och de fall där komponenterna finns som Material Web Components finns länkar till dokumentation som kan behövas för mer avancerad användning.

Exempel på användning:

Inkludera alltid scb-material-styles.css där du tänkt använda en komponent från designsystemet.

Om komponenten är en temad material design web component så importerar du den komponent du vill använda från @material.

Om det är en scb-komponent importerar du den komponent du vill använda från scb-material.

   import { ScbCard } from 'scb-material';
   import { MdFilledButton } from '@material/web/all';
   import 'scb-material/scb-material-styles.css';

Och sen i din html:

    <scb-card heading="Rubrik för kort" subheading="Underrubrik för kort" padded="">
        <img slot="media-type" loading="lazy" src="https://www.scb.se/globalassets/b/bolanerantor-1-febr.webp" alt="Villor">
    </scb-card>
    <md-filled-button>Sök</md-filled-button>

Om du inte kan/vill köra import kan du använda css-filen och en bundlad js-fil istället. Den bundlade filen är dock väldigt stor, så använd det upplägget endast i undantagsfall. Du kör npm install scb-material och flyttar därefter filen scb-material.bundle.js och scb-material-styles.css till lämlig plats i din solution. Du använder filerna som du normalt sett använder js-/css-filer.

Glöm inte att titta på scbdesignsystemtest.scb.intra för att se vilka komponenter som finns och hur de används.