P Playground Design System Templates ← Til oversikt
Fase 3 · Templates

Copy-paste startere for nye plugins

Hver template er minst mulig HTML som korrekt importerer designsystemet og bruker etablerte mønstre. Forke en plugin? Start fra én av disse, ikke fra blank fil.

Template 01

Skeleton — minimal HTML-side

Bare designsystemet importert. Container, header, og en tom main. Bruk når du vil bygge noe helt eget med tokens og base-styling.

~ 30 linjer
scenarios/<ditt-scenario>.html
<!doctype html>
<html lang="nb">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Min plugin — <org></title>
<link rel="stylesheet" href="../playground-design-system/tokens.css" />
<link rel="stylesheet" href="../playground-design-system/base.css" />
<link rel="stylesheet" href="../playground-design-system/components.css" />
<link rel="stylesheet" href="../playground-design-system/components-tier2.css" />
<link rel="stylesheet" href="../playground-design-system/print.css" />
<link rel="stylesheet" href="../playground-design-system/fonts.css" />
</head>
<body>
<header class="app-header">
  <a href="index.html" class="app-header__brand">
    <span class="app-header__brand-mark">P</span>
    <span>Min plugin</span>
  </a>
  <span class="app-header__breadcrumb">/ <org></span>
</header>
<main class="container container--wide" style="padding: var(--space-8) 0;">
  <h1>Tittel</h1>
  <p class="text-secondary">Innhold her.</p>
</main>
</body>
</html>
Template 02

Intake-wizard

Fire-stegs onboarding. Sticky stepper, valideringsgate framover, localStorage-persistens. Brukes for ROS-intake, OKR-onboarding, security-clean.

scenarios/ros-lier-kommune.html (skjerm 1)

→ Se ros-lier-kommune.html#intake for full implementasjon med skjema-felt og validering.

Template 03

Single-report

Én rapport, fire seksjoner: header med metadata + verdict-pill, hovedinnhold, sidefelt, signatur. Bygd for projector-bruk og PDF-eksport.

scenarios/security-direktorat.html
Eyebrow · scope

Rapporttittel

Eier Person Dato 02. mai
WARN Manuell gjennomgang

Sammendrag

Hovedinnhold går her — typisk 2-4 avsnitt med mellomtitler.

Template 04

Findings-review

Posture-grid + filter-bar + finding-kort + tiltaksplan. Strukturen i Scenario C i konsentrert form.

scenarios/security-direktorat.html
Alvorlighet
PROJEKT-123 · F-001

Funn-tittel

RULE01 Høy

Kort beskrivelse av funnet. Full struktur med kildekontekst, anbefaling og side-felt finnes i Scenario C.

Template 05

Live-writer

To-pane: editor med inline highlights til venstre, kritikk-stack til høyre. Score-strip øverst. Fire view-modi: skriv / sammenlign / kohort / endelig.

scenarios/okr-baerum.html
Editor

Innhold med inline highlight som lenker til kritikk-kortet til høyre.

Kritikk-tittel

Kort forklaring og forslag til omskriving.

Template 06 · Print

A4-rapport · offentlig dokument

Skraverings-mønstre i stedet for farge for B/W-utskrift. Header med kommune-logo-slot og signaturfelt. Importer print.css og legg innhold i en .a4-wrapper for skjerm-preview.

📄 Slik ser dokumentet ut på A4. Cmd/Ctrl + P for ekte print-preview.
Lier kommune · IT-styring
Risiko- og sårbarhetsanalyse · M365 Copilot
ROS-2026-LIER-COPILOT-01 · 02. mai 2026 · Eier: Eli Bjerke

Sammendrag

M365 Copilot foreslås innført for 1 850 ansatte. Analysen identifiserte 49 trusler, hvorav 4 ligger i kritisk sone og 12 i høy sone før mitigerende tiltak. Anbefalingen er GO med fire betingelser beskrevet i kap. 6.

Risiko-matrise (5×5)

SoneMønsterAntall trusler
Lav (1–4)21
Moderat (5–8)12
Høy (9–12)12
Kritisk (15–20)3
Ekstrem (25)1

Anbefaling

GO med fire betingelser: (1) DLP-policy aktivert i tenant før utrulling. (2) Sensitivity Labels innført i alle arkivsystem. (3) Schrems II-vurdering ferdigstilt for cross-tenant. (4) Innbygger-tilfredshetsmåling baseline T1.

Eli Bjerke · IT-sikkerhetsleder · dato
Kommunaldirektør · dato
Datakontrakter

JSON-skjemaer

Tre skjemaer som lar plugins utveksle data uten gjetting. Validér med vanilig ajv eller VS Codes innebygde schema-validator.

Schema finding.schema.json Ett funn fra en skanning. severity, source, evidence, recommendation, status. llm-security · config-audit · ms-ai-review · ultraplan-review Schema okr-set.schema.json Objective + 1–6 nøkkelresultater. baseline/target/stretch, period, score, critiques. OKR live-writer Schema ros-threat.schema.json NS 5814-justert trussel. inherent + residual, controls (M-001…), regulatory_refs. ms-ai-architect

Bruk i HTML/JS: fetch('/shared/playground-design-system/schemas/finding.schema.json').then(r => r.json())