Butikker

Kroker og CSS-referanse

Krokene i butikkens HTML per komponent, krokene på siden, hvordan komponent-CSS avgrenses og hva CSS-rensingen fjerner.

Sist oppdatert 24. oktober 2026 · 12 min lesing

Krokene er attributter i butikkens HTML som CSS-en din kan sikte på.

Hvor: Brukes i Code › CSS i koderedigereren, i panelet Code og i Theme › Custom CSS. Se Egen CSS og kode i head.

Malsyntaksen, variablene og actions for egen HTML står under Malreferanse.

Krokene per komponent

Krokene bytter ikke navn uten at tabellen endres. Hver komponent har tre slags kroker:

en rot, som komponentens CSS avgrenses til og som JS-en får som root
indre elementer
tilstander, som butikken setter på roten for å vise tilstanden

En tilstand skrives på roten: [data-bs-header][data-bs-transparent], ikke som et barn.

Komponent	Krok	Type	Verdier	Hva
Header	`[data-bs-header]`	rot		Toppteksten på hver side
Header	`[data-bs-header-inner]`	indre		Raden inni toppteksten: sidebredden på Page, ut til sidemargen på Full
Header	`[data-bs-logo]`	indre		Logolenken. På en smal mobil krymper den så ikonene og menyknappen får plass
Header	`[data-bs-header-nav]`	indre	`start`, `end`	Lenkeraden i Logo left og Centered. I Split er den to halvdeler
Header	`[data-bs-header-icons]`	indre		Ikonraden i layouten Icons + panel
Header	`[data-bs-menu-button]`	indre		Knappen som åpner menypanelet
Header	`[data-bs-cart-icon]`	indre		Handlekurvikonet
Header	`[data-bs-cart-count]`	indre		Antall varer ved siden av handlekurvikonet, holdes oppdatert
Header	`[data-bs-wishlist-icon]`	indre		Ønskelisteikonet
Header	`[data-bs-announcement]`	indre		Annonselinjen over toppteksten
Header	`[data-bs-transparent]`	tilstand		Settes på startsiden mens Transparent over hero er på
Header	`[data-bs-scrolled]`	tilstand		Settes etter 24 px scrolling, og mens menypanelet er åpent (bare gjennomsiktig topptekst)
Header	`[data-bs-sticky]`	tilstand		Settes mens Sticky er på
Header	`[data-bs-header-width]`	tilstand	`page`, `full`	Valget Width: page legger raden på linje med sidens innhold, full går ut til sidemargen
Menu panel	`[data-bs-menu]`	rot		Panelet som åpnes fra toppteksten
Menu panel	`[data-bs-menu-layout]`	indre	`split`, `mega`	Panelets rutenett: Shop + information (split) eller Links, products, contact (mega)
Menu panel	`[data-bs-menu-links]`	indre		Listen med store lenker
Menu panel	`[data-bs-menu-link]`	indre		En stor lenke. Linjehøyden følger tekststørrelsen. `data-active` merker lenken som kortene følger, `aria-current` siden kunden står på
Menu panel	`[data-bs-menu-secondary]`	indre		Listen med små lenker
Menu panel	`[data-bs-menu-products]`	indre		Produktkolonnen ved siden av lenkene (Links, products, contact)
Menu panel	`[data-bs-menu-heading]`	indre		Overskriften over produktene, når en er fylt inn
Menu panel	`[data-bs-menu-cards]`	indre		Kortene. Settet byttes med den aktive lenken
Menu panel	`[data-bs-menu-contact]`	indre		Kontaktlinjen nederst i panelet
Footer	`[data-bs-footer]`	rot		Bunnteksten på hver side
Footer	`[data-bs-footer-inner]`	indre		Raden inni bunnteksten: sidebredden på Page, ut til sidemargen på Full
Footer	`[data-footer-column]`	indre	`brand`, `shop`, `help`, `legal`	En kolonne i bunnteksten
Footer	`[data-bs-footer-links]`	indre		Lenkelisten i en kolonne. Det er her tokens-CSS-en setter lenkenes størrelse og opasitet
Footer	`[data-bs-footer-social]`	indre		Raden med sosiale lenker nederst. Det er her tokens-CSS-en tegner lenkenes ruter
Footer	`[data-footer-copyright]`	indre		Copyrightlinjen
Footer	`[data-bs-footer-width]`	tilstand	`page`, `full`	Valget Width, som på Header
Product card	`[data-bs-card]`	rot		Ett produkt i et rutenett. Overalt der produkter vises
Product card	`[data-bs-card-media]`	indre		Bildeplaten
Product card	`[data-bs-card-hover]`	indre		Det andre bildet som vises ved hover
Product card	`[data-bs-card-body]`	indre		Tittel, tagglinje og pris
Product card	`[data-bs-card-title]`	indre		Tittelen
Product card	`[data-bs-card-meta]`	indre		Tagglinjen under tittelen
Product card	`[data-bs-card-price]`	indre		Prisraden
Product card	`[data-bs-card-variant]`	tilstand	`card`, `plate`, `editorial`	Hvilken flate kortet har
Product page	`[data-bs-product-layout]`	rot	`classic`, `split`	Produktsiden: galleri og kjøpspanel
Product page	`[data-bs-product-info]`	indre		Kjøpspanelet: tittel, pris, valg, legg i handlekurven
Product page	`[data-bs-swatch]`	indre		En fargeprikk i variantvelgeren
Product page	`[data-bs-cta="primary"]`	indre		Legg i handlekurven og de andre primære knappene
Product page	`[data-bs-image-side]`	tilstand	`left`, `right`	Hvilken side galleriet ligger på (Split-layouten)
Gallery	`[data-bs-gallery]`	rot		Produktbildene på produktsiden
Collection page	`[data-bs-category]`	rot		En samlingsside: en kategori, All products eller søkeresultater
Collection page	`[data-bs-category-header]`	indre		Båndet med kategorinavnet
Collection page	`[data-bs-category-header-inner]`	indre		Kolonnen inni båndet
Collection page	`[data-bs-collection-body]`	indre		Filtrene og rutenettet. Fra Desktop står sidekolonnen ved siden av rutenettet
Collection page	`[data-bs-filters-layout]`	indre	`sidebar`, `top`, `none`	Hvordan siden legger ut filtrene
Collection page	`[data-bs-filters]`	indre		Filtrene, i sidekolonne eller i en rad, fra Desktop
Collection page	`[data-bs-filters-mode]`	indre	`top`, `sidebar`	Hvordan filtrene ligger
Collection page	`[data-bs-sticky]`	indre		Settes på filtrene og raden mens Filters stay in view er på. På raden over rutenettet bare mens filtrene får plass på én linje
Collection page	`[data-bs-stuck]`	indre		Settes på raden mens den ligger under toppteksten
Collection page	`[data-bs-facet]`	indre		Ett filter i raden over rutenettet: knappen og listen
Collection page	`[data-bs-facet-panel]`	indre		Listen med verdier som åpnes under en filterknapp
Collection page	`[data-bs-open]`	indre		Settes på filteret med åpen liste (ett om gangen) og på en åpen gruppe
Collection page	`[data-bs-facet-group]`	indre		En gruppe i sidekolonnen og telefonpanelet: navnet og verdiene
Collection page	`[data-bs-facet-toggle]`	indre		Gruppens navn, som folder sammen gruppen
Collection page	`[data-bs-facet-body]`	indre		Den delen av gruppen som foldes sammen
Collection page	`[data-bs-facet-values]`	indre		Gruppens verdier. Over 240 px ruller de inne i gruppen
Collection page	`[data-bs-facet-value]`	indre		Én verdi: boksen, navnet og antallet
Collection page	`[data-bs-on]`	indre		Settes på en avkrysset verdi
Collection page	`[data-bs-count]`	indre		Antallet etter en verdi
Collection page	`[data-bs-clear-filters]`	indre		Nullstill filtre (n), øverst i sidekolonnen
Collection page	`[data-bs-cta="primary"]`	indre		Nullstill filtre i raden. Vis N produkter i telefonpanelet
Collection page	`[data-bs-filter-bar]`	indre	`count`	Raden over rutenettet: antallet og sortering. På telefon og nettbrett også filterknappen. `count` når den har ingen av dem: bare antallet, en tekstlinje på alle skjermer
Collection page	`[data-bs-filter-open]`	indre		Filterknappen, på telefon og nettbrett
Collection page	`[data-bs-result-count]`	indre		Hvor mange produkter siden viser
Collection page	`[data-bs-sort]`	indre		Sorteringen
Collection page	`[data-bs-filter-panel]`	indre		Panelet på telefon og nettbrett, over siden
Collection page	`[data-bs-filter-sheet]`	indre		Selve panelet, fra venstre
Collection page	`[data-bs-filter-shade]`	indre		Skyggen bak panelet
Collection page	`[data-bs-closing]`	indre		Settes på panelet mens det glir ut
Banners	`[data-bs-banner]`	rot		Et bildebanner blant sidens seksjoner
Banners	`[data-bs-banner-inner]`	indre		Tekstkolonnen over bildet
Banners	`[data-bs-banner-heading]`	indre		Overskriften
Banners	`[data-bs-banner-subtitle]`	indre		Underoverskriften
Banners	`[data-bs-cta]`	indre	`primary`, `light`, `outline`	Knappen
Banners	`[data-bs-banner-img]`	indre		Bildet i et banner uten tekst. Høydetaket følger skjermen
Banners	`[data-bs-banner-size]`	tilstand	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Høydevalget på datamaskin
Banners	`[data-bs-banner-size-tablet]`	tilstand	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Høydevalget på nettbrett: eget, eller datamaskinens
Banners	`[data-bs-banner-size-mobile]`	tilstand	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Høydevalget på mobil: eget, eller nettbrettets
Banners	`[data-bs-bleed]`	tilstand	`full`, `custom`	Full: banneret går kant i kant. Custom: en annen bredde enn sidens

Krokene på siden

Krok	Hva
`[data-bs-main]`	Innholdskolonnen mellom topptekst og bunntekst. Bredden er `--bs-content-max` og sidemargen `--bs-gutter`
`[data-bs-block="<seksjons-id>"]`, `#bs-<seksjons-id>`	En seksjon på hvilken som helst side. Fungerer som anker for lenker. Roten for CSS og JS i en Custom component-seksjon
`[data-bs-section-width]`	En seksjons bredde, på seksjonens omslag: `page`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `full` eller `custom`. Den utregnede bredden ligger i `--bs-sec-w`
`[data-bs-hide~="mobile"]`	En seksjon som er skjult på mobil (Show on). Verdiene er `desktop`, `tablet` og `mobile`, adskilt med mellomrom
`[data-bs-first-on~="mobile"]`	Den første seksjonen som vises på mobil når den første seksjonen er skjult der. Verdiene er `desktop`, `tablet` og `mobile`, adskilt med mellomrom
`[data-bs-video-frame]`	Spilleren i en Video-seksjon. `--bs-video-ratio` er videoens bredde delt på høyden, for eksempel 1.7778 for 16:9
`[data-bs-grid-more]`	"View all"-lenken i en produktrad
`[data-bs-grid]`	Rutenettet i Product grid, Categories, Gallery, Testimonials, Stats, Cards, Collection list og Recently viewed. Kolonnene per skjerm (Per screen size) ligger i `--bs-cols`, `--bs-cols-tablet` og `--bs-cols-mobile`. `grid-template-columns` på kroken vinner uten `!important`
`[data-bs-cta="secondary"]`	Load more-knappen under et produktrutenett
`[data-bs-section-tone]`	En seksjon der Background ikke er Page. Verdien er `light`, `dark`, `brand` eller `custom`. Fargene ligger i `--bs-tone-bg` og `--bs-tone-fg`, den loddrette utfyllingen i `--bs-tone-pad`
`[data-bs-cards]`, `[data-bs-cards-item]`	Seksjonen Cards, med verdien `grid` eller `rows`, og ett kort i den. Kortenes utseende ligger i `[data-bs-cards-look]`: `plain`, `panel` eller `panel-line`
`--bs-main-pad`	Innholdskolonnens vertikale marg, 2.5rem. `margin-top: calc(-1 * var(--bs-main-pad))` trekker en seksjon kant i kant under toppteksten
`--bs-content-max`	Sidebredden fra Theme › Layout, for eksempel 1024px
`--bs-gutter`	Sidemargen: 16px på mobil, 24px på nettbrett og 32px på datamaskin
`[data-bs-legal-line]`	Raden med angrerettlenken under en egen bunntekst, eller på en side uten bunntekst. `[data-bs-legal-line-inner]` er raden inni
`--bs-header-offset`	Topptekstens høyde mens den blir stående når siden ruller, ellers 0. Samlingssidenes filtre ligger under den med Filters stay in view

Regler i tokens-CSS-en

Dette er regler i tokens-CSS-en, ikke inline-stiler på elementene:

topptekstens utfylling, farge, bakgrunn og kant
bunntekstens lenker
bannerets overskrift, undertittel, høyde og hjørner
bannerknappens farger
produktkortets plate og bildehjørner
kolonnene i rutenettene, per skjerm
sidens bredde og sidemarg, topptekstens og bunntekstens rader og seksjonenes bredde
hvilke skjermer en seksjon vises på, og bannerets høyde per skjerm
samlingssidenes filtre: sidekolonnen, raden og den smale raden på telefon og nettbrett

En vanlig regel på kroken vinner over tokens-CSS-en, uten !important. Bare en regel med !important i Theme › Custom CSS eller i en komponentstils egen CSS går foran.

Slik avgrenses komponentens CSS

CSS-en i Code › CSS gjelder bare komponenten. Hver selektor får komponentens rot foran seg når temaet kompileres. Det gjelder også inni @media, @supports, @container og @layer.

Du skriver	Butikken får
`nav a { … }`	`[data-bs-header] nav a { … }`
`[data-bs-header] nav a { … }`	Uendret. Roten står der allerede
`& { padding: 32px; }` eller `[data-bs-header] { … }`	Regelen for selve roten
`:hover { … }`	`[data-bs-header]:hover { … }`
`[data-bs-transparent]:not([data-bs-scrolled]) svg { … }`	`[data-bs-header][data-bs-transparent]:not([data-bs-scrolled]) svg { … }`. En tilstand på roten føyes til roten
`:root { … }`, `html { … }`, `body { … }`	Uendret, med en advarsel. Reglene når hele siden
`@keyframes`, `@font-face`	Uendret. `src` i `@font-face` skal peke på en fil i mediebiblioteket
`@import …;`	Fjernes

[data-bs-transparent]:not([data-bs-scrolled]) svg { stroke-width: 1.4; }

Rensingen av CSS

All CSS renses, i komponenter, seksjoner, sider og temaet.

< fjernes, så ingen </style> kan dannes.
@import, expression(), javascript: og andre skriptveier fjernes.
> beholdes, så barnekombinatorer som [data-bs-menu] > a fungerer. ::before og ::after beholdes.
!important beholdes. Komponentens CSS kommer etter tokens-CSS-en, stilen og Theme › Custom CSS, så en vanlig regel på en krok er som regel nok.

CSS som ikke kan leses, fjernes med en advarsel som navngir den. Advarselen står i designeren og som  i butikkens HTML.

En regel som aldri lukkes, fjernes.
Tekst som ikke er CSS, fjernes for seg. Den føyes aldri sammen med neste regel.
En selektor som fortsetter på neste linje, trenger et komma eller en kombinator ved linjeskiftet. Ellers regnes den første linjen som en merknad og fjernes.

Resten av CSS-en fungerer.

Skrifttyper

Last opp skrifttypen som .woff2 eller .woff i mediebiblioteket.
Trykk Copy URL på filen.
Pek @font-face { src: url(…) } på adressen.

Butikkens policy laster bare skrifttyper fra mediebiblioteket. En skrifttype fra en annen adresse lastes verken i butikken eller på arbeidsflaten.

Variabler fra temaet

Hent farger, skrifttyper og radier fra temaets variabler. Da følger de temaet:

Variabel	Verdi
`var(--bunstack-color-primary)`	Primærfargen
`var(--bunstack-color-fg)`	Tekstfargen
`var(--bunstack-font-heading)`	Overskriftsskrifttypen
`var(--bs-surface)`	Flatefargen for kort og plater
`var(--bs-radius-lg)`	Fotohjørnene
`var(--bunstack-button-radius)`	Knappehjørnene

Kroker og CSS-referanse

#Krokene per komponent

#Krokene på siden

#Regler i tokens-CSS-en

#Slik avgrenses komponentens CSS

#Rensingen av CSS

#Skrifttyper

#Variabler fra temaet