02 / Grund02 / Foundation

FärgerColor

Tio auktoriserade färger. Sam Red används sparsamt för primära handlingar. Sam Dark bär texten. Brunskalan ger en lugn, trygg ton—perfekt för kort, ramar och sekundär information.Ten authorised colours. Sam Red is used sparingly for primary actions. Sam Dark carries the text. The brown scale provides a calm, trustworthy tone—perfect for cards, borders and secondary information.

Primary · Action

Sam Red#FF6D59

--sam-red

Primary · Surface

Sam White#FFFFFF

--sam-white

Primary · Text

Sam Dark#313131

--sam-dark

Secondary

Brown Dark#4F4341

--sam-brown-dark

Secondary

Brown Medium#80706E

--sam-brown-medium

Surface

Brown Light#F2ECEB

--sam-brown-light

Neutral

Sam Medium#848484

--sam-medium

Neutral

Sam Light#E9E9E9

--sam-light

Success

Confirmation#2FCD6F

--sam-confirmation

Error

Sam Error#D65454

--sam-error

Do

Hyr tryggt med Samtrygg

Din månadshyra är försäkrad från dag ett.

Sam Red endast för primär call-to-action. Body text i Sam Dark på Sam White för maximal läsbarhet.

Don’t

Hyr tryggt med Samtrygg

Din månadshyra är försäkrad från dag ett.

Överanvänd inte Sam Red som bakgrund. Använd aldrig Sam Error som icke-fel-knapp—det urvattnar signalen.

03 / Grund03 / Foundation

TypografiTypography

Nuckle är vårt primära typsnitt. Bold för rubriker, Regular för brödtext, Light för småtext. Helvetica reserveras för miljöer där Nuckle inte är tillgängligt (e-post, dokument).

Display 1

Trygga hem.

Nuckle Bold · 72 / 72 · -3%

Display 2

Trygga hyresvärdar.

Nuckle Bold · 48 / 50 · -2.5%

Heading 1

Börja hyra ut på några minuter

Nuckle Bold · 36 / 41 · -2%

Heading 2

Sök bland tusentals bostäder

Nuckle Bold · 28 / 34 · -1.5%

Heading 3

Tvåa på Södermalm, 55 m²

Nuckle Bold · 20 / 25

Body

Samtrygg är Sveriges första tjänst som tryggar andrahandsuthyrning för både hyresgäst och hyresvärd. Vi garanterar hyran och hjälper till hela vägen.

Nuckle Regular · 16 / 24

Body · Small

Avgiften är 6,5% för hyresvärden. Inga dolda kostnader. Uppsägning när du vill.

Nuckle Regular · 14 / 21

Caption

Senast uppdaterad 18 april 2026 · Lägenhet · 45 m² · 2 rum

Nuckle Light · 12 / 17

Stack

font-family: "Nuckle", "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;

04 / Grund04 / Foundation

Grid & AvståndGrid & Spacing

8 px är vår grundenhet. Allt från knappar till sektioner består av multiplar av 8. Layout följer ett 12-kolumnsgrid på desktop, som kollapsar till färre kolumner på mindre skärmar.

12 columns · 16px gutterdesktop ≥ 1024px

Spacing scale

s-14 px · 0.25rem

s-28 px · 0.5rem

s-316 px · 1rem

s-424 px · 1.5rem

s-532 px · 2rem

s-648 px · 3rem

s-764 px · 4rem

s-896 px · 6rem

Breakpoints

Mobile
1 column · generous margins ≤ 600 px

Tablet
4–6 column layout 600–1024 px

Desktop
full 12-column grid ≥ 1024 px

Touch targets

Minimum 44 × 44 px

for all interactive elements on touch devices

05 / Grund05 / Foundation

IkonografiIconography

Ikoner är uppbyggda på ett 32×32 px grid med 2 px outline, och använder endast Sam Dark eller Sam White. Minsta storlek är 16 px, största rekommenderade 64 px.

home

search

heart

user

calendar

bag

shield

card

location

key

mail

info

06 / Komponenter06 / Components

KnapparButtons

Pillformade knappar i tre hierarkier: primär (Sam Red, reserveras för huvudhandling per sektion), sekundär (Sam Dark outline) och ghost. Storlekar S / M / L. Alla tillstånd måste implementeras.

Primary · Sam Red

Secondary · Outline

Ghost · Tertiary

Inverse · on Sam Dark

With icon

Destructive

Auth · BankID + Social

Modifiers · full / link / loading

Ghost-inverse · on dark

07 / Komponenter07 / Components

FormulärInputs & Controls

Varje input har label, hint och felmeddelande. Focus ringar med Sam Dark + 12% transparens. Fel markeras tydligt med Sam Error plus text—aldrig bara färg.

Text · Default, Focus, Error

E-postadress Vi skickar aldrig spam.

Stad

Personnummer Fyll i 12 siffror · ÅÅÅÅMMDD-XXXX

E-postadress (BEM error) Ange en giltig e-postadress (t.ex. anna@exempel.se)

Live validation — Samtrygg.forms

Built-in validators: required, email, phone, pnr, pnrStrict, minLength, maxLength, match. Live on-blur validation + scroll-to-first-error vid submit. Devs lägger till custom-validators via Samtrygg.forms.validators.myRule = (val) => …

JS API

// Validera form på submit
Samtrygg.forms.validate(formEl, [
  { id: 'email',    rules: ['required', 'email'] },
  { id: 'phone',    rules: ['phone'] },
  { id: 'civicNo',  rules: ['required', 'pnrStrict'] },
  { id: 'pwd',      rules: ['required', { minLength: 8 }] },
  { id: 'pwd2',     rules: ['required', { match: 'pwd' }],
    message: 'Lösenorden matchar inte.' }
]);

// Live on-blur (markerar fält medan användaren skriver)
Samtrygg.forms.attachLive(formEl, rules);

// Manuella state-helpers
Samtrygg.forms.setError(fieldEl, 'Ogiltigt värde');
Samtrygg.forms.setSuccess(fieldEl);
Samtrygg.forms.setLoading(fieldEl);   // async-validering
Samtrygg.forms.clearField(fieldEl);

// Custom validator — devs lägger till per behov
Samtrygg.forms.validators.creditScore = function (val) {
  return /^[0-9]{3}$/.test(val.trim());
};

With adornments

Sök bostad

Månadshyra

kr/mån

Inklusive el och wifi om tillgängligt.

Beskrivning

Selection

Jag godkänner användarvillkoren Skicka nya bostäder via e-post

Möblerad Delvis möblerad Omöblerad

Tillåt husdjur Rökning tillåten

Badges & chips

Möblerad Verifierad Avvisad Ny Husdjur OK

Canonical · BEM .field__input from _input.css

Levande exempel av BEM-strukturen. Pages med lokala .input-regler eller inline padding/border ska migreras till denna form. Live examples of the BEM structure. Pages using local .input rules or inline padding/border should migrate to this form.

E-postadress Vi skickar aldrig spam.

Stad

Personnummer * Fyll i 12 siffror · ÅÅÅÅMMDD-XXXX

Telefon Godkänt format.

08 / Komponenter08 / Components

Kort & ListningarCards & Listings

Kort följer 12-kolumns-grid och har tre varianter: statisk (information), klickbar (leder någon annanstans) och hover (visar åtgärder). Bostadsannonser använder klickbar-variant med tydligt fokustillstånd.Cards follow the 12-column grid and have three variants: static (information), clickable (leads somewhere else) and hover (shows actions). Rental listings use the clickable variant with a clear focus state.

12 500 kr /mån

Tvåa på Södermalm

2 rum·55 m²·Möblerad

MA Maria · 4 månader

Verifierad

8 900 kr /mån

Studio i Majorna, Göteborg

1 rum·28 m²·Omöblerad

JL Jonas · 6 månader

Husdjur OK

Information

Hyran är garanterad

Samtrygg överför hyran till hyresvärden varje månad—även om hyresgästen skulle hamna i betalningssvårigheter.

States: default · hover · focus

default

Default

border · shadow none

hover

Hover

-2 px lift · shadow-3

focus

Focus

3 px ring · Sam Red @ 40%

Canonical · BEM .card from _card.css

Levande exempel av canonical-klasserna — använd dessa när du portar sidor från legacy .listing/lokala .card-rebuilds. Live examples of canonical classes — use these when porting pages from legacy .listing or page-local .card rebuilds.

Base information card. No hover state. Used for content blocks where the whole card is not clickable.

Whole card is clickable. Lifts -2px on hover with shadow-2. Wrap entire card in <a>.

Tighter padding, smaller radius. For dense product surfaces.

Warm tinted background — for highlight sections and sub-promotional content.

Dark background. Used in CTA bands and hero cards for emphasis.

Canonical · BEM .listing-card

Canonical-versionen av bostadskortet. Pages som använder legacy .listing migreras till denna BEM-struktur. Canonical version of the rental listing card. Pages using legacy .listing will be migrated to this BEM structure.

Ny

12 500 kr /mån

Tvåa på Södermalm

2 rum · 55 m² · Möblerad

Stockholm

8 900 kr /mån

Studio i Majorna

1 rum · 28 m² · Omöblerad

3 rum · 78 m² · Omöblerad

Malmö

07 / Komponenter07 / Components

SidkromPage Chrome

Topnotice, header och footer. Kopieras verbatim till varje sida så språkväljare, logotyp och navigation beter sig identiskt överallt. Handoff-baren läggs överst på designreview-sidor bara.

Topnotice

Mörk rand över headern. Kampanj eller systemmeddelande till vänster, undertext till höger. Höjd 37px, background: var(--sam-dark). Språkväljaren bor enbart i headern (menyn) — aldrig här.

Nyhet Hyresgarantin omfattar nu upp till 12 månader

Sveriges tryggaste marknadsplats

Header

Sticky på alla publika sidor. 80px hög, vit bakgrund, 1px grå underkant. Wordmark (26-28px) till vänster, primärnavigation centrerad, språkväljare + Logga in + Skapa konto till höger. Aktiv nav-länk får --sam-brown-light bakgrund.

SV EN

Logga in Skapa konto

Canonical · `.topband`

Live-version via data-include="topband" — partial i assets/_shared-topband.html renderas av _includes.js. Live version via data-include="topband" — partial in assets/_shared-topband.html rendered by _includes.js.

Canonical · `.site-nav`

BEM-strukturen för publik nav-header. Använd denna när du portar sidor från legacy .nav-rebuild. BEM structure for public nav header. Use this when porting pages from legacy .nav rebuild.

Footer

5-kolumner — speglar canonical assets/_shared-footer.html: brand-col + Hyresgäst + Hyresvärd + Samtrygg + Hjälp. Mörk bakgrund (--sam-dark), wordmark inverterad. Bottom-rad har org.nummer + juridiska länkar.

Live preview nedan: rendrar via data-include="footer" så denna alltid speglar production-footern. Ändra copy i assets/_shared-footer.html — den propagerar hit och till alla sidor.

05 / Komponenter05 / Components

NavigationNavigation

Sidebar, tabs, breadcrumbs, pagination och stepper. Används för intern navigering inom ett flöde.Sidebar, tabs, breadcrumbs, pagination and stepper. Used for internal navigation within a flow.

Sidebar (Dashboard)

Hem · Översikt

Välkommen tillbaka, Linda

Du har 12 nya ansökningar att granska.

Huvudinnehåll placeras här.

Tabs

Innehåll för vald flik visas här.

Breadcrumbs

Pagination

…

Visar 13-24 av 504 bostäder

Stepper (flerstegsflöde)

✓

Bostadsinfo
Klar
2

Bilder
Pågår
3

Pris & period
Ej påbörjad
4

Granska
Ej påbörjad

06 / Komponenter06 / Components

TabellerTables

Datatabeller för Dashboard — ansökningar, annonser, transaktioner. Sorterbar, med expanderbara rader.Data tables for Dashboard — applications, listings, transactions. Sortable, with expandable rows.

Datatabell

2 valda

Sökande ↕	Bostad	Inkomst	Status	Inkom ↓
MA Maria Andersson 32 år · Stockholm	Lgh Södermalm	42 000 kr	● Granskad	För 2 tim sen
EJ Erik Johansson 28 år · Uppsala	Lgh Södermalm	38 500 kr	● Väntar	För 5 tim sen
AN Anna Nilsson 41 år · Stockholm	Villa Älvsjö	68 000 kr	● Avböjd	Igår

Visar 1-3 av 12

Tabellrad — states

Default	Anna Nilsson	42 000 kr	Normal rad
Hover	Anna Nilsson	42 000 kr	Vid musmarkör
Selected	Anna Nilsson	42 000 kr	Vald/markerad
Disabled	Anna Nilsson	42 000 kr	Arkiverad/inaktiv

07 / Komponenter07 / Components

ModalerModals & Drawers

Modal, confirm dialog, drawer (sida-panel) och bottom sheet. Alltid en primär och en sekundär knapp.Modal, confirm dialog, drawer (side panel) and bottom sheet. Always one primary and one secondary button.

Live demo — `Samtrygg.modal`

Real, accessible modal. ESC closes, backdrop click closes, Tab/Shift+Tab traps focus inside, return-focus to trigger on close, body scroll-locked. Wire via data-modal-open="id" on a trigger and data-modal-close on close-buttons inside the dialog. No JS needed in your page.

Markup pattern

<button data-modal-open="myModal">Open</button>

<div class="modal" id="myModal" hidden role="dialog"
     aria-modal="true" aria-labelledby="myModal-title">
  <div class="modal__panel">
    <header class="modal__header">
      <h3 id="myModal-title" class="modal__title">Title</h3>
      <button class="modal__close" data-modal-close aria-label="Stäng">×</button>
    </header>
    <div class="modal__body">…</div>
    <footer class="modal__footer">
      <button class="btn btn--ghost" data-modal-close>Avbryt</button>
      <button class="btn btn--primary">Bekräfta</button>
    </footer>
  </div>
</div>

Nya varianter (lade till 2026-05-05) — fullscreen / bottom-sheet / form / BankID

Per Torsgatan-call 2026-05-05: Samtrygg.modal är nu fully-fledged och täcker alla modal-varianter inklusive BankID-skin. Ingen separat Samtrygg.bankid krävs (den lever kvar som deprecated under övergångsperioden).

JS API

// Open befintligt element
Samtrygg.modal.open('myModal', { dismissible: true, onClose: fn });

// Confirm — bygger dynamisk dialog, ingen markup behövs
Samtrygg.modal.confirm({
  title:        'Är du säker?',
  message:      'Detta kan inte ångras.',
  confirmLabel: 'Ta bort',
  cancelLabel:  'Avbryt',
  destructive:  true,           // röd primary-knapp
  onConfirm:    function () {},
  onCancel:     function () {}
});

// BankID — bygger dynamisk dialog med QR + dots-animation
Samtrygg.modal.bankid({
  title:      'Öppna BankID-appen',
  sub:        'Skanna QR-koden eller öppna BankID på den här enheten.',
  status:     'Väntar på identifiering…',
  onCancel:   function () {},
  onComplete: function () {}
});

// Stäng
Samtrygg.modal.close();        // top of stack
Samtrygg.modal.close('myId');  // specific
Samtrygg.modal.closeAll();

Modal — bokningsdialog (visual reference)

Boka visning

Lgh 2 rok · Södermalm · 16 950 kr/mån

Välj datum Välj tid

Meddelande till hyresvärden (frivilligt)

Confirm dialog — destruktiv handling

Avsluta hyresavtalet?

Hyresgästen kommer att meddelas och måste flytta ut senast 31 juli 2026. Detta kan inte ångras.

Drawer — filter

Filter

Hyra/mån

Antal rum

Möblerad Husdjur tillåtna Balkong

Bottom sheet — mobil

Sortera

Mest relevanta Lägst hyra Högst hyra Nyast först

Canonical · BEM `.modal` + `.modal-backdrop`

Statisk preview av canonical-modalen + backdrop. I produktion togglas synligheten av Samtrygg.modal med aria-hidden + scroll-lås på <body>. Static preview of the canonical modal + backdrop. In production Samtrygg.modal toggles visibility via aria-hidden + body scroll-lock.

08 / Komponenter08 / Components

Tomma tillståndEmpty states & Skeletons

Tomma listor ska kännas varma, inte gåtfulla. Alltid: ikon/illustration, rubrik, kort förklaring, primär CTA. Skeleton = samma layout som färdigt innehåll.Empty lists should feel warm, not mysterious. Always: icon/illustration, heading, brief explanation, primary CTA. Skeleton = same layout as finished content.

Inga bostäder matchar

Prova att utöka sökområdet eller ta bort några filter för att se fler alternativ.

Inga meddelanden än

När hyresvärdar svarar på dina förfrågningar hamnar konversationerna här.

Du har inga annonser

Publicera din första annons på 5 minuter — vi hjälper dig med texten.

Något gick fel

Vi kunde inte ladda dina ansökningar. Kontrollera anslutningen och försök igen.

Skeleton — listing card

Skeleton — tabellrader

State-host: tre tillstånd i samma blockState-host: three states in one block

Vyer som hämtar data deklarerar alla tre tillstånd inline. _states.js visar rätt utifrån ?state=loading|empty|loaded och injicerar en switch nere i högra hörnet för QA. Lägg till stylesheet _empty-state.css + script _states.js.Data-driven views declare all three states inline. _states.js shows the right one based on ?state=loading|empty|loaded and injects a bottom-right switcher for QA. Include the _empty-state.css stylesheet plus _states.js.

<div data-state-host>
  <div data-state="loaded">…verkligt innehåll…</div>
  <div data-state="loading">…skeleton-block…</div>
  <div data-state="empty">
    <div class="empty-state empty-state--compact">…</div>
  </div>
</div>

Live demos: Messages · Payments · Agreements · MyListings · InterestedTenants · LandlordViewings

Skeleton-CSS-klasser: .skel (basskimmer), .skel-text/-title/-thumb/-avatar/-btn/-badge, kompositmönster .skel-card, .skel-listing, .skel-thread, .skel-rows, .skel-stat.Skeleton CSS classes: .skel (base shimmer), .skel-text/-title/-thumb/-avatar/-btn/-badge, composite patterns .skel-card, .skel-listing, .skel-thread, .skel-rows, .skel-stat.

09 / Komponenter09 / Components

AutentiseringAuth & BankID

BankID-kort i tre states: QR-ruta, väntar på signering, klar. Används vid inloggning, signering av avtal, verifiering och kontoskapande.BankID card in three states: QR code, awaiting signature, complete. Used for login, contract signing, verification and account creation.

BankID

Skanna QR-koden

Öppna BankID-appen på din mobil.

Koden uppdateras automatiskt

BankID

Väntar på signering

Signera i BankID-appen på din mobil.

Signering klar

Anna Nilsson · 891212-xxxx

Signerad 14:23 · 12 april 2026

Pinkod-input (6 siffror)

Ange koden vi skickade till 070-***23 45

Verifieringsbadges

BankID-verifierad ID-kontrollerad Inkomst verifierad Telefon verifierad ⏳ Väntar på verifiering

10 / Komponenter10 / Components

KalenderCalendar & Dates

Månadskalender med range-selektion, tid-slot-grid, och kompakt date-input. Range: start och slut får --sam-red, mellanliggande dagar --sam-brown-light.

Maj 2026

M

T

O

T

F

L

S

Från12 majTill19 maj

Tillgängliga tider

Tisdag 12 maj 2026

Vald tid: Tisdag 12 maj · 11:30 (30 min)

Date-input (kompakt)

Inflyttning Utflyttning Hyresperiod

11 / Komponenter11 / Components

KartaMap & Location

Kartkomponenter för sökresultat och annonssidor. Pin-stil, kluster, infobox, zoom-kontroller.Map components for search results and listing pages. Pin style, clusters, infobox, zoom controls.

Kartvy — split med resultatlista

48 bostäder i vyn

Södermalm

Lgh 2 rok · 54 m²

12 mån · Möblerad

16 950 kr/mån

Vasastan

Lgh 3 rok · 72 m²

6 mån · Omöblerad

19 500 kr/mån

Östermalm

Lgh 4 rok · 98 m²

12 mån · Möblerad

28 400 kr/mån

Sök när jag flyttar kartan

16 950 kr

19 500 kr

28 400 kr

12

4

Södermalm · 2 rok

Bondegatan 52

54 m² · 12 mån16 950 kr/mån

Pin-varianter

12 400 kr

Default

16 950 kr

Aktiv/vald

18 000 kr

Visad/sedd

12

Kluster

Din plats

12 / Komponenter12 / Components

ToastsToasts

Kortvariga meddelanden nere till höger. 5 sek auto-dismiss, stackas uppåt, max 3 synliga.Short-lived notifications in the bottom right. 5s auto-dismiss, stacks upward, max 3 visible.

Ansökan skickad

Hyresvärden svarar inom 48 timmar.

i

Ny visning bokad

Tisdag 12 maj · 11:30

!

Osparad ändring

Klicka på Spara för att behålla.

Ansökan avböjd

Du kan ångra inom 10 sekunder.

Canonical · BEM .toast from _toast.css

Live-instans av canonical-toast. JS API: Samtrygg.toast.success(title, msg) / .error(...) / .warning(...) / .info(...). För manuell markup, använd .toast.toast--{success|error|warning|info}. Live instances of canonical toasts. JS API: Samtrygg.toast.success(title, msg) / .error(...) / .warning(...) / .info(...). For manual markup, use .toast.toast--{success|error|warning|info}.

Ansökan skickad

Hyresvärden svarar inom 48 timmar.

i

Ny visning bokad

Tisdag 12 maj · 11:30

!

Osparad ändring

Klicka på Spara för att behålla.

Något gick fel

Försök igen om en stund.

13 / Komponenter13 / Components

AvatarerAvatars & User chips

Profilbilder i 5 storlekar, initialer som fallback, online-status, grupp-stackning och user-chips.Profile pictures in 5 sizes, initials as fallback, online status, group stacking and user chips.

Storlekar

MA

xs · 24

EJ

sm · 32

AN

md · 40

LK

lg · 56

JS

xl · 80

States & grupp

MA

Online

EJ

Offline

AN

Verifierad

MA

EJ

AN

+7

Grupp (stack)

User chips & profil-header

LS

Linda Svensson BankID

LS

Linda SvenssonVerifierad

Hyresvärd sedan 2019 · Svarar oftast inom 2 timmar

★★★★★ 4.9 · 23 omdömen

AN

Anna Nilsson

Skickade meddelande · För 5 minuter sen

14 / Komponenter14 / Components

Annons-varianterListing variants

Grid-kortet är standarden. Här är fyra sammanhang där vi avviker: horisontell rad, featured/hero, compact och map-popup.The grid card is the standard. Here are four contexts where we deviate: horizontal row, featured/hero, compact and map popup.

Horisontell rad — sparade bostäder & bevakningsträffar

5 bilder

Södermalm · Stockholm● Matchar bevakning

Lgh 2 rok · Bondegatan 52

54 m²2 rokMöbleradBalkong12 mån

Husdjur okDiskmaskin

Hyra/mån

16 950 kr

NY

Vasastan · Stockholm

Lgh 3 rok · Upplandsgatan 11

72 m²3 rokOmöblerad6 mån

Diskmaskin

Hyra/mån

19 500 kr

UTHYRD

Östermalm · Stockholm

Lgh 4 rok · Karlavägen 88

98 m²4 rokMöblerad

28 400 kr

Featured — kampanj & topplaceringar

★ Utvald

Unik villa · Djursholm

5 rok arkitektritad villa med sjöutsikt

Möblerad · 180 m² · Trädgård · Garage · Husdjur ok. Tillgänglig 1 juni – 31 december 2026.

Hyra/mån

48 500 kr

Compact — notiser & chat-referenser

Lgh 2 rok · Bondegatan 52

Södermalm · 54 m² · 16 950 kr/mån

Lgh 3 rok · Upplandsgatan 11

Vasastan · 72 m² · 19 500 kr/mån

15 / Komponenter15 / Components

PrissättningPricing & Breakdown

Pris är känsligt — alltid tabulära siffror, tydliga linjer mellan poster, och info-tooltips. Totalsumman ska alltid vara visuellt dominant.Price is sensitive — always tabular numerals, clear lines between items, and info tooltips. The total must always be visually dominant.

Månadskostnad

För hyresgäst · 12 månader

Grundhyra15 900 kr

El & uppvärmning iIngår

Bredband250 kr

Samtryggs serviceavgift i800 kr

Summa per månad

16 950 kr

Kostnad vid inflytt

Engångsbelopp · betalas före nyckelöverlämning

Första månadshyran16 950 kr

Deposition i16 950 kr

Uppläggningsavgift i495 kr

Summa vid inflytt

34 395 kr

Fakturarad (hyresvärd-vy)

Period / händelseBeloppStatus

April 2026 · Bondegatan 52

Hyra efter avdrag 800 kr serviceavgift

+15 150 kr

● Utbetald

Mars 2026 · Bondegatan 52

Hyra efter avdrag 800 kr serviceavgift

+15 150 kr

● Utbetald

Feb 2026 · Karlavägen 88

Hyra efter avdrag 1 365 kr serviceavgift

+27 035 kr

● Bearbetas

Inline price-tag (kompakta varianter)

Från

12 400 kr/mån

Hyra

16 950 kr/mån

Nedsatt

14 950 kr16 950 kr

Intervall

14 – 18 000 kr/mån

16 / Komponenter16 / Components

Meddelanden & ChattMessaging & Chat

Dialog mellan hyresgäst och hyresvärd sker alltid i Samtryggs trådar — aldrig via privat mejl.Dialogue between tenant and landlord always happens in Samtrygg threads — never via private email.

AH

Anna Hedlund

Online · Bondegatan 52

Idag

AH

Hej! Tack för intresset för Bondegatan. Jag ser att du har bokfört ansökan — när passar det att ses för en visning?

12:28

Hej Anna! Låter toppen. Jag är flexibel — lördag eller söndag funkar bäst för mig.

12:35 ✓✓

Bondegatan 52

54 m² · 16 950 kr/mån

12:35 ✓✓

AH

Toppen — passar det 14:00 på lördag?

12:42

AH

Bubblor: inkommande på ljus bakgrund med 4px hörnavvikelse nedåt-vänster; utgående mörk med hörnavvikelse nedåt-höger. Läsbekräftelse ✓ (skickad) · ✓✓ grå (levererad) · ✓✓ grön (läst). Max 75% bredd — aldrig full bredd även vid lång text.

17 / Komponenter17 / Components

Recensioner & BetygReviews & Ratings

Hyresgäst och hyresvärd betygsätter varandra efter avslutad uthyrning.Tenants and landlords rate each other after a completed rental.

Aggregerat profilbetyg

4,8

★★★★★

Baserat på 23 omdömen

Kommunikation

4,8

Punktlighet

5,0

Skötsel

4,7

Rekommendation

4,8

Omdöme (lista)

MB

Marcus B.

Hyresgäst · Bondegatan 52 · 6 mån uthyrning

★★★★★

2 april 2026

“Anna var otroligt trevlig och lätt att ha att göra med. Lägenheten såg ut precis som på bilderna och all kommunikation gick via Samtrygg — tryggt och smidigt. Rekommenderar starkt.”

✓ Verifierat avtal

LN

Linnea N.

Hyresgäst · Karlavägen 88 · 12 mån uthyrning

★★★★★

28 mars 2026

“Bra upplevelse överlag. Snabba svar och inget strul med depositionen vid utflytt. En stjärna mindre för att diskmaskinen gick sönder i månad fyra och det tog två veckor att få den lagad.”

Svar från Anna: Tack för feedbacken, helt rimligt. Vi har bytt VVS-partner sedan dess.

Rating input — efter avslutad uthyrning

Sätt betyg på Anna som hyresvärd

Ditt omdöme hjälper nästa hyresgäst att välja tryggt.

Kommunikation

Var Anna lätt att nå och tydlig?

★★★★★

Punktlighet

Avtal, nycklar, utflytt i tid?

★★★★★

Skötsel av bostad

Skick och underhåll.

★★★★★

Din kommentar (publiceras på Annas profil)

18 / Komponenter18 / Components

Media & GalleriMedia & Gallery

Uppladdning, ordning, lightbox. Hyresvärden måste ha minst 5 bilder för att publicera.Upload, order, lightbox. Landlords must have at least 5 photos to publish.

Drag-drop uppladdningszon

Dra bilder hit eller välj från enhet

JPG eller PNG, max 10 MB per bild. Minst 5 bilder, max 20.

kok-spis.jpg3,2 MB · 68%

Bildrutnät — sorterbart

HUVUD

+

7 av 20 bilder · Dra för att ändra ordning · Första bilden visas i sökresultat och är huvudbild

Lightbox — visningsläge

09 / Komponenter09 / Components

FeedbackFeedback & Alerts

Fyra tonlägen: success, info, warning, error. Kombinera alltid färg med ikon och text.Four tones: success, info, warning, error. Always combine colour with icon and text. Toast-notifikationer stannar 5 sekunder; kritiska meddelanden kräver manuell stängning.

Din ansökan är skickad!Hyresvärden svarar vanligtvis inom 48 timmar.

Verifiera din inkomstLadda upp senaste lönespec eller intyg för att öka dina chanser.

Din annons går ut om 3 dagarFörnya för att fortsätta visas i sökresultat.

BEM-canonical alert

Använd .alert__icon, .alert__title, .alert__text, .alert__close för full BEM-struktur.

⚠ 2 av 7 fält saknar information

! Annonsen avvisades — granska feedback från modering

Betalning misslyckadesKontrollera att kortuppgifterna stämmer och försök igen.

Toast · Success

Din förfrågan har skickats!

Modal · Confirm

Ta bort annonsen?

Den här åtgärden kan inte ångras.

10 / Mönster10 / Patterns

RörelseMotion

Rörelse ska vara subtil och meningsbärande. Hela systemet använder samma easing—cubic-bezier(.2, .8, .2, 1)—med durations från 150 ms till 300 ms. Hovra över rutorna nedan för att se beteendet.

Hover lift

220 ms · easeOut

Button press

150 ms · easeInOut

Focus ring

150 ms · easeOut

11 / Mönster11 / Patterns

ExempelskärmarExample screens

Alla komponenter i kontext—hyresgästens sökvy till vänster, hyresvärdens översikt till höger. Båda följer samma grid, typografi och färgprinciper.

God morgon, Elsa

32 nya bostäder i Stockholm matchar din profil.

photo

Ny

12 500 kr /mån

Tvåa · Södermalm

2 rum · 55 m²

photo

8 900 kr /mån

Studio · Vasastan

1 rum · 28 m²

photo

15 200 kr /mån

Trea · Kungsholmen

3 rum · 78 m²

photo

Husdjur OK

10 400 kr /mån

Etta · Liljeholmen

1 rum · 34 m²

Tvåa på Södermalm

Publicerad 12 april · 4 mån uthyrning

Aktiv

Visningar

1 284

+18% vs. förra veckan

Sparade

87

+12 idag

Ansökningar

14

-3 vs. förra veckan

Sökande Inkomst / mån Åtgärd

EL

Elsa Lindberg

Stockholm · 28 år

42 000 kr

OJ

Oskar Johansson

Uppsala · 32 år

38 500 kr

FN

Frida Nyström

Göteborg · 26 år

35 200 kr

End-to-end · Så funkar det

1

Skapa annons

Hyresvärden lägger upp sin bostad med bilder, villkor och önskad hyresperiod.

2

Matcha & ansök

Hyresgäster ansöker med profil och verifierad inkomst. Hyresvärden väljer.

3

Signera digitalt

Avtal skapas automatiskt och signeras med BankID av båda parter.

4

Hyran garanteras

Samtrygg hanterar betalning—även om hyresgästen inte kan betala får värden sina pengar.

12 / Principer12 / Principles

TillgänglighetAccessibility

Samtrygg följer WCAG 2.1 AA. Alla designbeslut testas mot kontrast, tangentbordsnavigering och skärmläsarkompatibilitet. Ingen information förmedlas enbart genom färg.

Contrast · approved pairs

Dark on White

12.6 : 1 · AAA

White on Dark

12.6 : 1 · AAA

White on Red

3.4 : 1 · AA Large

Brown Dark on Light

8.9 : 1 · AAA

Not by color alone

E-post Ogiltig e-postadress

Fel kommuniceras alltid med ikon + text + färg—inte enbart röd ram.

Focus · visible outline

Alla interaktiva element får en 3 px ring med 2 px offset vid fokus.

Semantic · screen readers

<button aria-label="Spara bostad">
  <svg aria-hidden="true" ... />
</button>

<div role="alert">
  Betalningen misslyckades.
</div>

24 / Komponenter24 / Components

Nya komponenter 2026New components 2026

Komponenter som lagts till under 2026 för tenant/landlord-split, self-service och dashboardlayout. Dokumenteras här tills de integrerats i huvudavsnitten.Components added during 2026 for tenant/landlord split, self-service and dashboard layout. Documented here until merged into main sections.

Dashboard-layout (sidebar)

CSS: assets/_dashboard.css · JS: assets/_dashboard.js

Användning: <div class="dash" data-page="favorites"><main class="dash__main">...</main></div>

260px sidebar (vänster) + main-content (höger). Sidebar renderas av JS baserat på localStorage.sam_role (tenant | landlord). Avatar-meny med byt-läge. Mobile: hamburger + bottom-slide sidebar + kvarstående Meddelanden-ikon.

Toast / snackbar

CSS: assets/_toast.css · JS: assets/_toast.js

API: Samtrygg.toast.success(title, message, opts) — även .info(), .warning(), .error(), .show(opts).

5 sek auto-dismiss, max 3 synliga, stackas nedifrån-upp. Varianter: success (grön), info (blå), warning (orange), error (mörk bg, röd kant). Stöd för action-button och manuell .dismiss().

Datepicker

CSS: assets/_datepicker.css · JS: assets/_datepicker.js

API: Samtrygg.datepicker.attach(input, {mode:'single'|'range', min, max, onChange}) — eller .create(container, opts) för inline.

Time-slots: Samtrygg.datepicker.timeSlots(container, [{time,disabled?}], {onSelect}).

Måndagsbaserad vecka (M T O T F L S), today-markering (röd ring), out-of-month grayed, range-preview vid hover, min/max-gränser, disabled-dates-array. SV/EN via lang-en-class.

CSS: assets/_tooltip.css · JS: inget

Användning: <span class="info-tip" data-tip="Förklaring">Verifierad <i></i></span>

Hover/focus visar tooltip ovan. Använd .info-tip--below för under-placering. Använd för att förklara vaga produkttermer (Verifierad, Trygghetspaket).

Verifierad

Bottom sheet (mobil)

Definierad i: pages/Search.html (inline, kandidat för utbrytning)

Struktur: .sheet-backdrop + .sheet > .sheet__handle + .sheet__head + .sheet__body + .sheet__foot. Klass .is-open triggar slide-in.

Används på mobil för filter. Transform-based, 86vh max, backdrop med 0.5 opacity. Esc-tangent och backdrop-klick stänger.

Timelines (två varianter)

Två separata komponenter efter F2-rename 2026-05-05 (se audit/DUPLICATES_LOG.md):

.activity-timeline — aktivitetslogg med statusprickar. Definierad i assets/_agreement.css. Markup: <ol class="activity-timeline"><li class="t-success">...</li></ol>. Variants: .t-success (grön), .t-info (blå), .t-warning (orange), .t-error (röd), .t-current (pulserande röd för pågående). Används på Agreements + SelfService.

.history-timeline — företagshistorik / år-baserad linjär lista. Definierad i assets/_brand.css. Markup: <div class="history-timeline"><div class="history-timeline__item"><div class="history-timeline__year">2013</div><div class="history-timeline__content">...</div></div></div>. Används på About-sidan.

Agreement card (avtalskort)

Definierad i: pages/Agreements.html (inline, kandidat för utbrytning till _agreement.css)

Struktur: .agr-card > .agr-card__head (adress/parter/period/status-chip) + .agr-card__actions (knappar) + .agr-card__requests (nestade change-requests) + .agr-card__activity-toggle + .agr-card__activity (timeline)

Varianter: .agr-card--warning (gul bg, ej signerat), .agr-card--info (blå bg, din tur).

Ersätter tidigare tabell-layout. Change-requests nestas inom kortet istället för som separata rader. Activity log kollapsbar.

Badge / status-variant

CSS: assets/_badge.css (variant .badge--status-*)

Användning: <span class="badge badge--status-pending">Väntar</span>

Förenad från tidigare fragmenterade .status-tag, .status-chip, .agr-card__status-chip, .status-label. Intent-varianter: pending (blå), active (grön), warning (orange), info (blå), error/rejected (röd), neutral/expired (grå).

Pending Active Warning Rejected Expired

Public-page nav drawer

CSS: assets/_public-nav.css · JS: assets/_public-nav.js

Markup: <button data-nav-toggle aria-controls="siteDrawer"> + <div class="nav-drawer" id="siteDrawer"> med .nav-drawer__panel + .nav-drawer__links + .nav-drawer__footer.

Hamburger syns ≤976 px på Homepage och LandlordLanding. Slide-in-panel från vänster, backdrop stänger. Esc-tangent stänger. Använder endast --sam-*-tokens (inga DS-surface-tokens).

Rating input (5-star)

CSS: assets/_rating.css · JS: assets/_rating.js

API: Samtrygg.rating.attach(el, {value, readonly, onChange}) · .value(el) · .set(el, n)

Auto-init: Element med data-rating-auto initieras vid DOMContentLoaded. Använd data-rating-value + data-rating-readonly för konfig.

5 stjärnor (★), röd vid hover/selected, grå annars. Varianter: .rating--sm, .rating--lg, .is-readonly. Används i RateExperience.html.

Media upload (drag-drop + reorder)

CSS: assets/_media-upload.css · JS: assets/_media-upload.js

API: Samtrygg.mediaUpload.attach(rootEl, {onChange}) · .count(rootEl)

Markup: <div class="media-upload" data-media-upload data-max="20" data-min="5"> + .media-upload__zone + .media-upload__grid.

Dashed drop-zone, visar "is-dragover"-tillstånd vid drag. Thumb-grid (auto-fill 140px). Första slot får .media-upload__main-badge. Drag-reorder via slot-to-slot drop. Remove-knapp per slot. Emitterar toast när foton lagts till. Dokumenteras från CreateListing.html.

BankID auth-modal

CSS: .modal--bankid skin i assets/_modal.css · JS: assets/_modal.js

API: Samtrygg.modal.bankid({title, sub, status, onCancel, onComplete}) → {close(), complete()}

Fullskärms-overlay med QR, titel, pulserande dots, status-text och avbrytknapp. Esc + backdrop-klick triggar onCancel. .complete() stänger och kör onComplete. För BankID-inloggning och initial kontraktssignering via Scrive. Konsoliderat 2026-05-05 från tidigare separat Samtrygg.bankid till generic modal med skin-variant.

Map view

Definierad i: pages/Search.html (inline) · embed-varianter portade till Samtrygg.Web/wwwroot/Content/v3/css/page_css/Listing.css · Förslag: utbryt till _map.css när Listing.html också integrerar kartvy

Struktur (split-vy): .map-view > .map-view__canvas (placeholder 3:2-ratio) + .map-view__pin (röd droppe med värde) + .map-view__legend

Struktur (embed-vy från Listing-portningen):

.map-embed > iframe (OSM-kakel, 380px höjd) + .map-hood (overlay-kort med adress + rikt-CTA) + .map-attrib (OSM-attribuering)

.map-block > gradient-fallback när lat/lng saknas, samma .map-hood-overlay för konsekvent visuell rytm

Produktionen använder Google Maps i Search (split-vy). På Listing visas en mindre OSM-iframe (embed-vy) — billigare, ingen API-nyckel, räcker för "Vart ligger den?". Pins, hover, popover gäller split-vy, inte embed.

Iframe-varning: använd inte sandbox eller loading="lazy" på OSM-iframen — bryter tile-loading i vissa browsers.

Feature chips

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/sam-shared.css

Markup: <div class="feat-chips"><span class="feat-chip">…</span></div>

Varianter: default (neutral) · .feat-chip.ok (grön bg/border, för verifierad/positiv status)

Liten pille-form i en horisontell rad ovanför kortets brödtext — visar nyckelegenskaper (möblerat, husdjur ok, balkong) eller verifieringsstatus. Används idag i Listing-huvudet ovanför titeln; återanvänds på Search-resultat och kort i listing-grid.

Möblerat Husdjur ok Balkong ✓ Verifierad

Page hero / title-block

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/sam-shared.css

Struktur: .title-block > h1 + .meta-row (location/specs med ikoner) + .action-row (Save/Share-knappar) + valfri .feat-chips

Sid-hjältekomponent som ersätter den vanliga eyebrow + h2-rubriken. Används högst upp på publika sidor (Listing, Search-resultat, Homepage-hero, guider). Title-storlek anpassas via clamp(22px, 3vw, 30px).

2 rok · Klågerupsvägen 342

Malmö · Öster·45 m²·Möblerad

Fact grid (4-col)

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/sam-shared.css

Struktur: .facts > .fact > .k (eyebrow-label) + .v (värde) + valfri .sub (kontext)

Responsivt: 4 kolumner desktop, 2 vid <1100px, 2 vid <768px med tightare gap

Sammanfattningsruta för key-value-data ovanför brödtexten. Används på Listing för pris/period/storlek/rum, kandidat för Homepage stats-block och Search detalj-paneler.

Hyra35 000 kr/månad

Storlek45 m²

Rum2

Tillgänglig20 majtills vidare

Sticky anchor sub-nav (TOC)

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/sam-shared.css

Struktur: .toc > .inner > <a href="#anchor"> · aktiv flik = .on

Skiljs från Tabs: tabs byter innehåll (sektion visas/döljs), TOC är anchor-länkar (rullar till sektion på samma sida). Visuellt nästan identiskt — semantiken är skillnaden.

Sticky precis under main-nav (top: 64px). Används på långa sidor med flera sektioner — Listing, guider, juridiska sidor — så användaren kan hoppa direkt till "Bekvämligheter", "Hyresvärd", "Trygghet".

Översikt Fakta Bekvämligheter Hyresvärd Trygghet

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/sam-shared.css

Struktur: .care-banner > h4 + p + .care-actions (vertikalt staplade knappar). Default display:none; visas via .on.

Varianter: default (sitter i höger-rail på desktop) · .care-banner--top (max-bredd, centrerad, ovanför grid på mobil)

Skiljer sig från generisk alert (.alert--*): Care-banner är ett kort med åtgärder som adresserar produktens omsorgsmoment ("Slutför ditt pågående avtal", "Du har redan 3 aktiva visningar"). Inte ett enkelt informationsmeddelande. Röd vänsterkant signalerar Samtrygg-handpåläggning.

Slutför ditt pågående avtal först

Du har redan ett avtal under bearbetning. När det är klart kan du boka nya visningar.

Mobile sticky CTA bar

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/sam-shared.css

Struktur: .mobile-bar > pris/sub-info-block + primär CTA-knapp (höger-justerad)

Visning: display:none default · visas via media query (max-width: 768px) som display:flex; lägger padding-bottom:76px på body för att inte täcka innehåll

Mobil-only sticky bar fastnaglad i botten. Visar pris + period + primär CTA (Boka visning / Ansök / Återupptag). Ersätter sticky-höger-rail på mobil. Andra användare: Search-resultat (kontaktkort), BookViewing-flow.

35 000 kr

20 maj — tills vidare

Photo gallery (5-tile responsive)

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/Listing.css (page-specific för Listing idag, kandidat för promotion när Edit-flödet använder samma layout)

Struktur: .gallery (CSS grid, 3 kolumner × 2 rader) > .g > img.ph-img wrapped in a.ph-link (klickbar för full-size i ny flik)

Responsivt: 5-tile desktop · 3-tile vid <1100px (hero + 2 thumbs) · 1-tile vid <480px

Hero (col-span 2) + 4 thumbs i klassisk 5-tile layout. Första bild = hero, restens placering animation-friendly via grid. .ph-link → full-size i ny flik. Lightbox/photoswipe-flow är planerad uppgradering — spårad som SAM-DS-GALLERY.

Amenity grid (4 sub-sections, 4 states)

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/Listing.css

Struktur: <h3 class="amenities-subhead"> + <div class="amenities"> (3-col grid) > <div class="amenity {modifier}"> > .icon + label

Sub-sektioner (i denna ordning):

1. .amenities-subhead--included + .amenity.is-included — grön accent — "Ingår i hyran" (tri-state CV=1)

2. .amenities-subhead--extra + .amenity.is-extra — gul/orange accent — "Tillkommer som extra kostnad" (tri-state CV=2)

3. .amenities-subhead + .amenity — neutral — "I bostaden" (binär CV≥1, det apparmentet HAR)

4. .amenities-subhead--not-included + .amenity.is-not-included — line-through på label, ljust grå ikon — "Inte inkluderat" (binär CV=0, det apartmentet INTE HAR)

Tri-state CV=0 är medvetet inte synligt (matchar legacy production). Sub-headings döljs när Count=0. Används på Listing; samma struktur återanvänds på CreateListing-edit-flödet.

Tvättmaskin

Internet

Hiss

Husdjur

Booking panel (right-rail)

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/Listing.css

Struktur: .book-panel > .book-head (pris + period) + .book-body (CTA + fine print) + .book-breakdown (kostnadsuppställning) + .book-trust (Care-rad) + .book-id (annons-id)

Sticky: position:sticky; top:120px · försvinner på mobil (display:none); ersätts av .mobile-bar

Höger-rail-konvertering på Listing. CTA-text byter mellan "Boka visning" och "Ansök nu" baserat på ViewingTypeId. Cost-breakdown visar månadshyra + 15% serviceavgift + total. Återanvänds på BookViewing-flödet med datepicker insatt under .book-body.

35 000 kr/mån

20 maj — tills vidare

Du binder dig inte genom att boka visning.

Hyra35 000 kr

Serviceavgift (15 %)5 250 kr

Totalt40 250 kr

Safety / Care content grid (2-col)

Definierad i: pages/Listing.html (inline) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/Listing.css

Struktur: .safety-grid (2-kolumns grid) > .safety-item > ikon + <b> rubrik + <p> brödtext

Responsivt: 2 kolumner desktop, 1 kolumn vid <1100px

Trygghet/Care-content-block — punktlista i kort-format. Används på Listing för att förklara vad som ingår i Samtryggs trygghet (betalningsgaranti, försäkring, BankID-kontroll). Återanvänds på Homepage-hero, SafetyPackage-sidan och TenantGuide.

Betalningsgaranti

Hyran är garanterad varje månad, även om hyresgästen får problem.

BankID-kontroll

Alla parter verifieras före avtalsskrivning.

Agent assists card

Definierad i: pages/Listing.html (inline, ?state=agent) · portad till Samtrygg.Web/wwwroot/Content/v3/css/page_css/Listing.css

Struktur: .agent-card > img.agent-photo + .agent-tag ("Samtrygg-agent" eyebrow) + h3 namn + .agent-meta roll-rad

Visning: display:none default · visas via .on när ViewBag.AgentName är ifylld i controllern. Additivt — sitter ovanför .landlord-card, ersätter den inte.

Visas när Samtrygg-agent hanterar uthyrningen åt hyresvärden. Förklarar att agenten är gränssnittet, men chatt går fortfarande till hyresvärden. Röd vänsterkant-accent (3px) för att signalera Samtrygg-närvaro. Decision-källa: DECISIONS §11.7.

EJ

★ Samtrygg-agent

Erik Johansson

Hanterar den här uthyrningen åt Linda. Du chattar med Linda som vanligt.

Form validation — `Samtrygg.forms`

CSS: shared.css §9 (.field--error, .field__error-msg, .field__error-icon, error focus ring) · JS: assets/_forms.js (även i _shared.js bundle)

API: Samtrygg.forms.validate(formEl, rules) · .attachLive(formEl, rules) · .setError(field, msg) · .setSuccess(field) · .setLoading(field) · .clearField(field) · .scrollToFirstError(form)

Built-in validators: required, email, phone, pnr, pnrStrict, {minLength: n}, {maxLength: n}, {match: 'otherFieldId'}

Custom validators: Samtrygg.forms.validators.myRule = (val, formEl) => …

Live on-blur via attachLive, scroll-till-första-fel vid submit, BEM-kompatibla state-klasser. Svenska felmeddelanden default. Ratificerat 2026-05-05 (C6 — AI äger visuella states, devs äger custom validation rules).

Live demo: scrolla till Section 6 (Formulär) → "Live validation" — eller använd direkt på vilken sida som helst med data-validate="required,email"-attribut.

Breakpoint tokens — `--bp-*`

CSS-tokens i: shared.css :root

Token	Värde	Avsedd för
`--bp-xs`	480px	Extra small phones (iPhone SE)
`--bp-sm`	640px	Small/large phones — mobile bottom-sheet trigger
`--bp-md`	768px	Tablet portrait — primär mobile-cutoff
`--bp-lg`	1024px	Desktop
`--bp-xl`	1280px	Large desktop
`--bp-2xl`	1440px	Ultrawide (Vinko C3)

OBS: CSS @media-queries stödjer inte var(). Tokens är referens-värden för dokumentation + JS-användning. Skriv alltid @media (max-width: 640px) literalt med ett av de fem värdena.

Audit + migration-policy: audit/BREAKPOINTS.md. ~75% av nuvarande breakpoints följer redan canonical fem-set. Migration sker opportunistiskt — inte sweep.

Modal-varianter — fully-fledged `Samtrygg.modal`

CSS: assets/_modal.css · JS: assets/_modal.js (även i _shared.js bundle)

Bas-API: Samtrygg.modal.open(elementOrId, opts) · .close(id?) · .closeAll()

Dynamiska helpers: Samtrygg.modal.confirm({title, message, confirmLabel, cancelLabel, destructive, onConfirm, onCancel}) · Samtrygg.modal.bankid({title, sub, status, onCancel, onComplete})

Varianter: .modal--sm, .modal--lg, .modal--confirm, .modal--form, .modal--fullscreen, .modal--bottom-sheet (drag-handle), .modal--bankid (skin)

Konsoliderat 2026-05-05 (B2/B5): generic modal äger nu BankID-skin. Samtrygg.bankid är borttaget — använd Samtrygg.modal.bankid() (drop-in API). Live demos i Section 11 (Modaler).

Auto-wire: data-modal-open="myId" på trigger + data-modal-close på close-buttons. Focus-trap, ESC, backdrop-click, scroll-lock, return-focus, stack-support, ARIA — allt inbyggt.

Deprecated komponenter

⚠ Följande dokumenterade komponenter används inte i produktens sidor och bör inte användas i ny kod:

.accordion__item / .accordion__body — dokumenterat men noll användning. Använd <details>/<summary> eller kollapsbar timeline istället.
.lang-switch__btn — ersatt av .langsw + .lang-btn som används överallt.
.profile-card (stora varianten) — används aldrig; tenant/landlord-profil-information finns i egna sidor istället.
Samtrygg.bankid.open() / Samtrygg.bankid.close() + assets/_bankid.css + assets/_bankid.js — borttagna 2026-05-05 (B5). Använd Samtrygg.modal.bankid({...}) (drop-in API på generic modal med .modal--bankid skin).
.timeline (utan prefix) — ersatt 2026-05-05 av .history-timeline (företagshistorik) eller .activity-timeline (aktivitetslogg). Klassnamn-krock löst genom F2-rename.

Supplement: Governance & migration-policy · Gap-audit (P0–P3)

Foundation · BEM completeness

Canonical BEM examples

Live BEM demos of every canonical class in assets/_*.css that lacks a primary demo elsewhere. Use this as the reference when porting legacy markup to canonical BEM.

`.avatar` variants & sizes (`_avatar.css`)

XS SM LG XL BL GR RO WA DK SM

A B C

`.badge` & `.status-chip` (`_badge.css`)

brand success warning danger info neutral dark outline with dot status-chip

chip 1 chip 2

`.stepper` + `.step` (`_stepper.css`)

`.divider` (`_divider.css`)

eller

`.nav-min` (auth/funnel pages, `_nav-min.css`)

`.faq-list` + `.faq-item` (`_faq.css`)

Hur fungerar hyresgarantin?

Samtrygg betalar ut hyran även om hyresgästen inte kan betala — i upp till 12 månader.

Kan jag säga upp avtalet?

Ja, du kan säga upp avtalet enligt privatuthyrningslagen.

Minimal variant — utan ramar

För page-local FAQ utan kort-styling.

`.social-btn` (`_social-btn.css`)

`.confirm-screen` + `.confirm-card` (`_confirm.css`)

Klart!

Din ansökan är skickad. Hyresvärden svarar inom 48 timmar.

`.error-*` (`_error-page.css`)

🔍

Sidan hittades inte

Vi kunde tyvärr inte hitta sidan du letade efter.

Till startsidan Sök bostad

`.viewing-card` (`_viewing-card.css`)

Tisdag 12 maj · 11:30

Tvåa på Södermalm · Maria H. (hyresvärd)

`.pwd-wrap` + `.strength` (`_password-input.css`)

Lösenord

Starkt lösenord

`.empty-state` variants (`_empty-state.css`)

📭

Inga meddelanden

När du får en förfrågan visas den här.

🔍

Inga resultat

Justera filter eller skapa en bevakning.

`.skel*` loading skeletons (`_empty-state.css`)

`.toggle` + `.check-label` + `.field-row` (`_input.css`)

Sök bostad

Use .field__error for inline error text below input.

Acceptera villkoren Skicka mig nyhetsbrev E-postnotiser

Förnamn

Efternamn

Beskrivning

Antal rum

`.account-nav` + `.breadcrumb` + `.tabs` + `.topband` children (`_nav.css`)

12 mån hyresgaranti BankID-verifierade

010-884 80 00

Översikt Visningar Avtal Betalningar

`.brand-hero` + `.cta-band` + `.accordion` + `.stats-row` (`_brand.css`)

Sedan 2013

Trygg andrahandsuthyrning

Mer än 25 000 trygga uthyrningar.

Hyr ut Sök bostad

25 000+

Uthyrningar

4,6/5

Trustpilot

12 dgr

Median t. tenant

12 mån

Hyresgaranti

Redo att hyra ut?

Det är gratis att lägga upp en annons.

Skapa annons

Hur fungerar hyresgarantin?

Samtrygg betalar ut hyran även om hyresgästen hamnar i betalningssvårigheter.

Kan jag säga upp avtalet?

Ja, kostnadsfritt, enligt privatuthyrningslagens uppsägningstider.

`.amenity` + `.fact-grid` + `.feature-item` + `.map-block` + `.poi-item` + `.profile-card` + `.page-toc` (`_listing-detail.css`)

WiFi Tvättmaskin Diskmaskin Balkong

Storlek

55 m²

2 rum

Hyra

12 500 kr

/mån

🛡

Hyresgaranti

Upp till 12 månader.

✓

BankID-verifierade

Båda parter identifierade.

Södermalm

Stockholm · 5 min till tunnelbana

Karta visas vid bokad visning

T-bana

5 min

Närmaste skola

12 min

`.history-timeline` + `.activity-timeline`

2013

Samtrygg grundas av Marcus Lindström.

2020

Hyresgaranti utökas till 12 månader.

2024

Förvärv av BeResident.

Avtal signerat · 2026-04-12
Visning bokad · 2026-04-08
Påminnelse skickad · 2026-04-05
Väntar på svar · pågår

`.agr-card` (`_agreement.css`)

Avtal #2026-051 Aktivt

Tvåa på Södermalm · Maria → Anna · 2026-06-01 → 2027-05-31

Avtal #2026-038 Utgår om 30 dagar

Studio i Majorna · Jonas → Erik · slutdatum 2026-06-06

Avtal #2026-072 Förslag

Trea i Limhamn · väntar på signatur från båda parter.

Hyresvärden begär signatur

`.chat-*` + `.bubble` (`_chat.css`)

Maria Andersson

Hej! Är lägenheten ledig från 1 juni?14:30

Hej Anna, ja den är ledig.14:32

`.toast-container` (`_toast.css`)

Container för toast-stack — i produktion skapas dynamiskt av Samtrygg.toast och fixed-positioneras bottom-right.

✓

Sparat

Ändringarna sparades

`.rating` sizes (`_rating.css`)

★★★★☆

★★★★★

`.info-tip` variants (`_tooltip.css`)

Hovra över denna text för default-tooltip, eller över denna för below-variant.

`.modal--sm` + `.modal--lg` + `.modal--bankid` sizes (`_modal.css`)

`.card` remaining variants + `.listing-card__tags` (`_card.css`)

Subtle hover (shadow-1 only) — no whole-card click.

.card--flush

No padding — for full-bleed media or tables

`.alert--danger` (`_alert.css`)

Kritiskt fel

Avtalet kunde inte signeras. Kontakta supporten på 010-884 80 00.

`.gallery` (`_gallery.css`)

Verifierad

Token utilities (`_tokens.css`)

.text-primary · .text-secondary · .text-link · .text-success · .text-warning · .text-danger

.fw-400 · .fw-500 · .fw-600 · .fw-700 · .fw-800

.text-xs · .text-sm · .text-base · .text-md · .text-lg · .text-xl · .text-2xl · .text-3xl

.bg-success .bg-warning .bg-danger .bg-info

.surface-base .surface-raised .surface-sunken .surface-inverse

left center right .w-full .h-full

FärgerColor

TypografiTypography

Grid & AvståndGrid & Spacing

Spacing scale

Breakpoints

Touch targets

IkonografiIconography

KnapparButtons

FormulärInputs & Controls

Kort & ListningarCards & Listings

.card

.card--interactive

.card--compact

.card--warm

.card--inverse

SidkromPage Chrome

Topnotice

Header

Canonical · .topband

Canonical · .site-nav

Footer

NavigationNavigation

Sidebar (Dashboard)

Välkommen tillbaka, Linda

Tabs

Breadcrumbs

Pagination

Stepper (flerstegsflöde)

TabellerTables

Datatabell

Tabellrad — states

ModalerModals & Drawers

Live demo — Samtrygg.modal

Nya varianter (lade till 2026-05-05) — fullscreen / bottom-sheet / form / BankID

Modal — bokningsdialog (visual reference)

Boka visning

Confirm dialog — destruktiv handling

Avsluta hyresavtalet?

Drawer — filter

Filter

Bottom sheet — mobil

Sortera

Canonical · BEM .modal + .modal-backdrop

Bekräfta ansökan

Tomma tillståndEmpty states & Skeletons

Inga bostäder matchar

Inga meddelanden än

Du har inga annonser

Något gick fel

Skeleton — listing card

Skeleton — tabellrader

State-host: tre tillstånd i samma blockState-host: three states in one block

AutentiseringAuth & BankID

Skanna QR-koden

Väntar på signering

Signering klar

Pinkod-input (6 siffror)

Verifieringsbadges

KalenderCalendar & Dates

Maj 2026

Tillgängliga tider

Date-input (kompakt)

KartaMap & Location

Kartvy — split med resultatlista

Pin-varianter

ToastsToasts

AvatarerAvatars & User chips

Storlekar

States & grupp

User chips & profil-header

Annons-varianterListing variants

Horisontell rad — sparade bostäder & bevakningsträffar

Lgh 2 rok · Bondegatan 52

Lgh 3 rok · Upplandsgatan 11

Lgh 4 rok · Karlavägen 88

Featured — kampanj & topplaceringar

5 rok arkitektritad villa med sjöutsikt

Compact — notiser & chat-referenser

PrissättningPricing & Breakdown

Månadskostnad

Canonical · `.topband`

Canonical · `.site-nav`

Live demo — `Samtrygg.modal`

Canonical · BEM `.modal` + `.modal-backdrop`

Form validation — `Samtrygg.forms`

Breakpoint tokens — `--bp-*`

Modal-varianter — fully-fledged `Samtrygg.modal`

`.avatar` variants & sizes (`_avatar.css`)