Samma widget, samma beräkning. Utseendet anpassas efter sajten den ligger på: färger, typsnitt och hörnradie ärvs eller anges manuellt. Kontrasten justeras automatiskt så att texten alltid går att läsa.
Öppna den fullständiga betongkalkylatorn på SnabbGrund
Välj hur widgeten ska se ut. Koden nedan uppdateras direkt.
Grundläget. Widgeten räknar volym och beställningsmängd, men visar ingen kostnad.
Materialkostnad visas när ett publicerat listpris anges. Källan skrivs ut under resultatet.
Widgeten läser av bakgrund, textfärg, typsnitt och länkfärg från sidan omkring den.
Exempel på mörk värdsajt · en länk
Samma attribut, annan värdsajt. Accentfärgen hämtas från sidans länkfärg.
Exempel på ljus värdsajt · en länk
Accentfärgen plockas här från sidans knappfärg i stället för länkfärgen.
Exempel på värdsajt · Knapp
Alla färger kan sättas för hand när sajten har en egen profil som inte går att läsa av automatiskt.
| Attribut | Beskrivning |
|---|---|
data-theme | light (standard), dark, auto eller inherit. |
data-font | inherit för sajtens typsnitt, annars en egen font-shorthand. |
data-accent | Accentfärg för knapp och nyckeltal. Textfärgen på knappen väljs automatiskt. |
data-bg / data-surface | Bakgrund respektive resultatpanelens yta. |
data-ink / data-muted / data-line | Textfärg, dämpad text och linjer. |
data-radius | Hörnradie, t.ex. 0, 4px, 28px. |
data-max-width | Maxbredd, standard 58rem. |
data-price | Listpris i SEK/m³. Utan detta visas ingen kostnad. |
data-price-label / data-price-unit / data-retrieved-at | Källtext som skrivs ut under resultatet. |