DEV ← Strategimanualen Komponentöversikt

Komponentöversikt

Alla diagram och presentationsmönster som används i strategimanualen — samlade på ett ställe för jämförelse och konsekvens.

Graftyper

Alla unika diagramvarianter sida vid sida. Varje kort visar en representativ graf med exempeldata.

Presentationsmönster

Hur diagram ramas in och visas. Varje mönster visar ett miniaturexempel och listar alla ställen där det förekommer.

01

Varumärkeskännedom

Andel som känner till Booli respektive Hemnet.

Container

Seriesektion

Ett numrerat block med rubrik, beskrivning och ett stort diagram. Under diagrammet finns ofta en <details>-element med rådata som tabell. Varje serie har ett eget .series-block med id för sidnavigering.

.series > h2 + .chart-wrap + .table-disclosure

Förekommer på 1 ställe
sifo-tidsserier.html 6 seriesektioner: kännedom, besökt, använder, förstahand, flest till salu, flest kommande

Hur hittade du till Booli?

Flerval · n = 842

⋯
Kort

Frågekort (q-card)

Vitt kort med frågetext som rubrik, metadata (typ + antal svar) och en tre-punkt-meny (⋯) för att visa/dölja datavärden. Diagrammet tar resten av ytan. Höjden varierar: .chart-wrap (220px) eller .chart-wrap.tall (320px) beroende på antal svarsalternativ.

.q-card > h3 + .q-meta + .chart-tools + .chart-wrap

Förekommer på 3 ställen
vmofb.html Dynamiskt antal kort beroende på filtrering — typiskt 8–12 per vy
temaundersökningar.html Grupperade i temagrupper — varje period har 3–8 kort
surveys.html Som .chart-card i rutnät — 2–6 per källa

Fråga A

n = 312

Fråga B

n = 298

Fråga C

n = 401

Fråga D

n = 277

Layout

Diagramrutnät

Responsivt rutnät (.chart-grid) som visar flera frågekort sida vid sida. Kollapsar till en kolumn på mobil. Varianten .chart-grid.two ger max två kolumner. Gör det möjligt att snabbt scanna flera frågor.

.chart-grid > .chart-card × N

Förekommer på 2 ställen
vmofb.html Dynamiskt rutnät baserat på aktiva frågor
surveys.html 2-kolumns grid per källa: bostadsmarknaden, upplevelse, statistik
Tema
Snart till salu

Har du hört talas om…?

Hur intresserad är du…?

Gruppering

Temagrupp

Grå bakgrundsyta (.theme-group) med en kicker-label och rubrik, som omsluter flera frågekort (q-cards) inom samma tema. Skapar visuell hierarki och grupperar relaterade frågor.

.theme-group > .q-card × N

Förekommer på 1 ställe
temaundersökningar.html 3–5 temagrupper per period (t.ex. "Snart till salu", "AI-verktyg", "Mäklarval")
Källa
Bostadsmarknaden (extern panel)
842
Svar
23%
Booli
61%
Hemnet
Container + KPI

Källblock med KPI:er

Grå bakgrundsyta (.source-block) med kicker, rubrik och en rad KPI-kort ovanför diagrammen. KPI-korten visar snabbvärden som antal svar, andelar eller delta. Under följer ett .chart-grid med flera diagramkort.

.source-block > .kpis + .chart-grid > .chart-card × N

Förekommer på 1 ställe
surveys.html Källblock: bostadsmarknaden, upplevelse, statistik
Kännedom
74%
Användning
31%
Inline

Sparkline i metrikkort

Litet metrikkort (.data-panel-metric) med en etikett, ett stort KPI-värde och en sparkline-SVG till höger. Sparkline:n har gradient-fill och en slutpunkt. Ger snabb trendöversikt utan att ta mycket plats.

.data-panel-metric > .data-spark (SVG inline)

Förekommer på 1 ställe
prototyp-koparstrategi.html 4–6 sparklines i datapanelerna: steg 1, steg 2, steg 3

Hur hittade du till Booli?

Mar 2026 Okt 2025 Jun 2025
Jämförelse

Jämförelsekort

Grå bakgrund (.comparison-card) med frågetext, legend med färgpunkter per period och ett grupperat stapeldiagram. Visar hur svaren förändrats över tid för exakt samma fråga.

.comparison-card > h3 + .chart-legend + .chart-wrap

Förekommer på 1 ställe
temaundersökningar.html 1 jämförelsesektion längst ner med 2–5 jämförelsekort
Det här är utgångsläget. Hemnets varumärkeskännedom är 96 % stabilt och 64 % −10 pp YoY upplever att de samlar störst utbud av bostäder till salu.
Inline data

Statistik i löptext

Klickbara KPI-värden (.metric-chip) inbäddade direkt i löpande text. Varje chip består av ett fetstilt värde (.mc-value) med prickad understrykning och en delta-badge (.mc-delta) som visar förändring. Badgen är grön (.up), röd (.down) eller neutral. Vid klick öppnas en detaljmodal med graf, kontext och datakälla. Ger data-storytelling utan att bryta läsflödet.

<span class="metric-chip" data-metric="key"> → .mc-value + .mc-delta

Förekommer på 1 ställe
prototyp-koparstrategi.html ~8 metric chips i löptexten, fördelade över steg 1, steg 2 och steg 3
Steg 1
19 %
Kortbeskrivning
+6 pp YoY
Se tidsserie →
Steg 2
84k
Kortbeskrivning
+77 % YoY
Se tidsserie →
Steg 3
22 %
Kortbeskrivning
+10 pp
Se tidsserie →
Klickbart KPI-grid

Highlight-kort (hl-card)

Responsivt grid med klickbara sammanfattningskort — ett per strategisteg. Varje kort har en steg-etikett (.hl-step), ett stort KPI-värde (.hl-value), en kort beskrivning med delta (.hl-label) och en "Se tidsserie →"-länk. Klick öppnar en detaljmodal (.metric-modal) med full tidsserie, KPI-rad och djuplänk. Bakgrund i peanut med orange vänsterkant.

.hl-grid > .hl-card[data-metric] × N → öppnar metric-modal

Förekommer på 1 ställe
prototyp-koparstrategi.html 3 highlight-kort i "Strategin i siffror"-sektionen: steg 1 (medvetenhet), steg 2 (lojalitet), steg 3 (övertygelse)
Nätverkseffekter driver in säljare som bygger varumärkes­associationen med "störst utbud"
Fördjupning Varför utbudet drar köpare som drar säljare.
Marginalanteckning

Innehållsteaser (margin-teaser)

Subtil korsreferens med två kopplade delar: ett triggerord (.margin-ref) med streckad understrykning (grå, 2 px, offset 4 px) i texten, och en marginallapp (.margin-teaser-note) i högermarginalen. I vila syns lappen dimmad (opacity 0.35) med grå bakgrund och en svag streckad kopplingsline (::before). Vid hover på wrappern (.has-margin-teaser) vaknar allt: understrykningen svärtnar, kopplingslinjen förstärks, och lappen tonas upp till full styrka med vit bakgrund. Hover direkt på lappen ger orange border + text. Vid mouse-leave dröjer fade-outen 0.3 s innan den tonar tillbaka — ger en lugn, lingering känsla. Döljs helt under 960 px.

.has-margin-teaser > li > .margin-ref + a.margin-teaser-note

Förekommer på 1 ställe
prototyp-koparstrategi.html "Nätverkseffekter" i punkt-listan i Steg 1 → marginallapp "Nätverkseffekter — fördjupning"

Citat

Blockquotes, expertcitat och dynamiska datakällecitat — alla citatmönster som förekommer i manualen.

Målet är inte att köparen ska sluta med Hemnet. Målet är att köparen ska börja med Booli.

Intern strategisammanfattning
Blockquote

Pull quote

Centrerad <blockquote class="pull-quote"> med dekorativ orange linje (::before, 48 × 3 px). Rubriktext i SBAB-Display 24 px. <cite> i versaler (12 px, grå). Reveal-animerad.

<blockquote class="pull-quote reveal"> > p + cite

Förekommer på 1 ställe
prototyp-koparstrategi.html 4 pull quotes — Hemnet-prospekt, intern strategi × 2, slutsummering
When it comes to browsing for real estate, consumers want access to all of the available inventory.
Mike DelPrete
Real estate tech strategist
Kort + citat

Expert quote

Klickbart kort (<a class="expert-quote">) med kursiv text (SBAB-Italic, smarta citattecken via CSS quotes), rund profilbild (52 px), namn + titel. Hover: orange border + skugga. Länk öppnar extern källa.

<a class="expert-quote"> > .eq-text + .eq-attribution > .eq-photo + .eq-name + .eq-title

Förekommer på 1 ställe
prototyp-koparstrategi.html 1 expert quote — Mike DelPrete om utbudskonkurrens
Visa citat från Mar 2026 ▾

Snart till salu

Hade varit bra att se nyproduktion tidigare.
Vill kunna bevaka områden i förväg.
Dynamisk

Datakällecitat

Dynamiskt genererade citat grupperade per tema. Expanderbar med .ft-quotes-toggle (▾/▴). Blockquotes med grå vänsterkant (border-left: 2px), SBAB-Italic. Max 3 citat per tema. Genereras via JS från JSON-data.

.ft-quotes-toggle + .ft-quotes-panel > .ft-quotes-theme > h4 + blockquote × 3

Förekommer på 1 ställe
vmofb.html Expanderbara fritextcitat per temaundersökningsfråga

Textformatering

Inline-element, etiketter, badges, KPI-kort och övriga textkomponenter som återanvänds genom manualen.

Vi riskerar att missa hela vår potential för tillväxt om vi inte agerar nu.
Inline

Highlight

Inline <span class="highlight"> med orange gradient-underline (linear-gradient … 40 %). Betonar nyckelord i löptext utan att bryta läsflödet. 2 px horisontell padding.

<span class="highlight">text</span>

Förekommer på 1 ställe
prototyp-koparstrategi.html Flera highlights i löptexten, även inne i pull quotes
Steg 1 · Medvetenhet

Bara Hemnet

Etikett

Kicker / eyebrow

Prefix-etikett ovanför rubriker. Varianter: .page-kicker, .card-kicker, .u-kicker, .group-kicker. Alla: 10–12 px versaler, letter-spacing 0.1em, orange eller grå. Ger hierarkisk kontext.

<p class="page-kicker"> | .card-kicker | .u-kicker | .group-kicker

Förekommer på 5 ställen
index.html .page-kicker, .card-kicker
prototyp-koparstrategi.html .u-kicker i narrativsektioner
surveys.html .page-kicker
sifo-tidsserier.html .group-kicker (Del 1 av 4)
temaundersökningar.html .page-kicker
Boolis strategimanual
Inline

Accent

<span class="accent"> med color: var(--booli-orange). Enkelt orange inline-element för att lyfta ett ord i en rubrik eller mening.

<span class="accent">text</span>

Förekommer på 1 ställe
index.html I huvudrubriken på startsidan

En samlad överblick av Boolis position relativt Hemnet — från kännedom till övertygelse.

Typografi

Lead-text

Inledningsstycke (<p class="lead">), 16–18 px, grå text, max-width 640–720 px. Ger sidan en tydlig ingress under rubriken.

<p class="lead">…</p>

Förekommer på 6 ställen
index.html
prototyp-koparstrategi.html
sifo-tidsserier.html
surveys.html
temaundersökningar.html
developer.html

Källa: Booli-Sifo 2026, n = 1 204

Typografi

Caption

<p class="caption"> — 13 px, grå, direkt under diagram eller bilder. Visar ofta datakälla och stickprovsstorlek.

<p class="caption">Källa: …</p>

Förekommer på 2 ställen
surveys.html
prototyp-koparstrategi.html
⚠︎ Eget kundregister — urvalsbias
Badge

Bias-badge

Pill-formad varningsetikett (<span class="bias">). Banana-bakgrund (#FBF2E4), 12 px, ⚠︎-prefix. Flaggar datakällebias eller metodologiska noter.

<span class="bias">⚠︎ Eget kundregister — urvalsbias</span>

Förekommer på 1 ställe
surveys.html 1–2 bias-badges i source-blocks
85 %
Bostadsköpare som jämför
2,4
Sajter i genomsnitt
KPI-kort

Stat-card

Centrerat kort (.stat-card) med stort orange värde (40 px SBAB-Display) och 14 px etikett. Vit bakgrund, 1 px border, 8 px radius. Passar enstaka nyckeltal.

.stat-card > .stat-value + .stat-label

Förekommer på 1 ställe
prototyp-koparstrategi.html Kampanjstatistik-kort
Insikt

Köpare som använder flera plattformar har högre konvertering till kontaktförfrågningar.

Kort

Insight-card

Innehållskort (.insight-card) med orange versal-etikett (.card-label) + paragraftext. Vit bakgrund, 1 px border, 24 px padding, 8 px radius.

.insight-card > .card-label + p

Förekommer på 1 ställe
prototyp-koparstrategi.html Insiktskort i narrativet
Medvetenhet Booli-Sifo 2026
74 %
+6 pp
Kännedom
Container

Data-panel

Huvudcontainer (.data-panel) med header (titel + källa), grid-layout för KPI + diagram. Variant .with-compare breddar KPI-kolumnen. 1 px border, 8 px radius.

.data-panel > .data-panel-head + .data-panel-metric > .data-kpi + .data-spark

Förekommer på 1 ställe
prototyp-koparstrategi.html 4–6 datapaneler fördelade över steg 1–3
Booli
23 %
+5 pp
Hemnet
61 %
−3 pp
Svar
842
KPI-rad

KPI-grupp

CSS Grid (.kpis) med .kpi-kort. Varje kort: 28 px värde (SBAB-Display), 12 px delta, 12 px versal-etikett. Färgvarianter: .orange, .green. Auto-fit grid, min 160 px.

.kpis > .kpi × N > .label + .value + .delta

Förekommer på 1 ställe
surveys.html KPI-rad per source-block
Senaste
74 %
+6 pp
Lägsta
58 %
−4 pp
Kompakt KPI

Summary-card

Litet KPI-kort (.summary-card): 18 px värde (SBAB-Display), 12 px delta (grön/röd), 11 px versal-etikett. Grå bakgrund, 4 px radius. Visas under tidsserier.

.summary-card > .sc-label + .sc-value + .sc-delta

Förekommer på 1 ställe
sifo-tidsserier.html Kompakta summor under varje tidsseriegraf
Kommer snart
Denna sida är under utveckling.
Placeholder

Placeholder-box

Streckad box (.placeholder-box) med border: 1px dashed, centrerad text, grå bakgrund. Används för sidor som inte är färdiga.

.placeholder-box > strong + text

Förekommer på 2 ställen
skala.html
trygga.html
Öppna köparstrategin Till strategimanualen
Länk

Arrow-länk & back-link

Två länkvarianter: .arrow (orange fetstil med → suffix, framåt-navigation) och .back-link (grå med ← prefix, tillbaka till index). Båda med hover-transition till orange.

<span class="arrow"> | <a class="back-link">

Förekommer på 2 ställen
index.html .arrow på sidkortens "Öppna"-länk
surveys.html .back-link (alla undersidor)