StepCard
@/components/ui/StepCard
«Ikonfirkant/nummerskive + heading-14 + copy-13» for ett steg i en kort forklarende sekvens — kortet BÆRER sin egen kant, ingen ytre Card trengs.
Når brukes den
Én forklarende sekvens — «Slik fungerer det», «Kom i gang».
Sett `steg` (rund nummerskive) når REKKEFØLGEN er poenget, ikke hva hvert steg symboliserer.
Sett `icon` (kvadratisk IconTile) når hvert steg har en egen BETYDNING — bruk `tone` for emfase (f.eks. `success` på siste steg).
Bruk kun én av `icon`/`steg` per kort — de er alternativer, ikke kombinerbare.
IKKE legg StepCard inni en egen `<Card>` — komponenten har allerede kant (--shadow-border) og radius-md. En ytre Card gir dobbel kant.
Eksempler
Nøytral (standard)
Bølge 3 (founder: «subtle blå drukner litt i bakgrunnen»): nummer-/ikonbrikken er nøytral som standard — bg gray-alpha-200, tekst/ikon text-primary. For en sekvens der rekkefølgen er poenget, ikke hva hvert steg symboliserer.
Send forespørsel
Strøm, forsikring eller finansiering. Fyll ut det du vet.
Frivio innhenter tilbud
Vi henter inn konkurrerende tilbud fra relevante leverandører.
Velg beste tilbud
Dere sammenligner og velger fritt.
<StepCard steg={1} title="Send forespørsel" description="…" />Med ikon og tone
For steg med hver sin betydning — `tone` gir emfase KUN når den bes om, med -light/-text (100/900), aldri rå farge.
Legg til bygget
Bygningsprofil, eller last opp tilstandsrapport.
Frivio lager planen
Tiltak prioriteres etter hastegrad og kostnad.
Følg opp
Planlegg befaringer og fond, alt på ett sted.
<StepCard icon={Ok} title="Følg opp" description="…" tone="success" />Props
Sveip tabellen for å se hele innholdet