Butikker

Kroge og CSS-reference

Krogene i butikkens HTML pr. komponent, krogene på siden, hvordan komponent-CSS afgrænses, og hvad CSS-rensningen fjerner.

Senest opdateret 24. oktober 2026 · 12 min læsning

Krogene er attributter i butikkens HTML, som din CSS kan ramme.

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

Skabelonsyntaksen, variablerne og actions for egen HTML står under Skabelonreference.

Krogene pr. komponent

Krogene skifter ikke navn, uden at tabellen ændres. Hver komponent har tre slags kroge:

en rod, som komponentens CSS afgrænses til, og som JS'en får som root
indre elementer
tilstande, som butikken sætter på roden for at vise tilstanden

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

Komponent	Krog	Type	Værdier	Hvad
Header	`[data-bs-header]`	rod		Sidehovedet på hver side
Header	`[data-bs-header-inner]`	indre		Rækken inde i sidehovedet: sidebredden på Page, ud til sidemargenen på Full
Header	`[data-bs-logo]`	indre		Logolinket. På en smal mobil skrumper det, så ikonerne og menuknappen får plads
Header	`[data-bs-header-nav]`	indre	`start`, `end`	Linkrækken i Logo left og Centered. I Split er den to halvdele
Header	`[data-bs-header-icons]`	indre		Ikonrækken i layoutet Icons + panel
Header	`[data-bs-menu-button]`	indre		Knappen, der åbner menupanelet
Header	`[data-bs-cart-icon]`	indre		Kurvikonet
Header	`[data-bs-cart-count]`	indre		Antallet af varer ved siden af kurvikonet, holdes opdateret
Header	`[data-bs-wishlist-icon]`	indre		Ønskelisteikonet
Header	`[data-bs-announcement]`	indre		Annoncelinjen over sidehovedet
Header	`[data-bs-transparent]`	tilstand		Sættes på forsiden, mens Transparent over hero er slået til
Header	`[data-bs-scrolled]`	tilstand		Sættes efter 24 px scroll, og mens menupanelet er åbent (kun gennemsigtigt sidehoved)
Header	`[data-bs-sticky]`	tilstand		Sættes, mens Sticky er slået til
Header	`[data-bs-header-width]`	tilstand	`page`, `full`	Valget Width: page lægger rækken på linje med sidens indhold, full går ud til sidemargenen
Menu panel	`[data-bs-menu]`	rod		Panelet, der åbnes fra sidehovedet
Menu panel	`[data-bs-menu-layout]`	indre	`split`, `mega`	Panelets gitter: Shop + information (split) eller Links, products, contact (mega)
Menu panel	`[data-bs-menu-links]`	indre		Listen med store links
Menu panel	`[data-bs-menu-link]`	indre		Et stort link. Linjehøjden følger tekststørrelsen. `data-active` markerer linket, som kortene følger, `aria-current` siden, kunden står på
Menu panel	`[data-bs-menu-secondary]`	indre		Listen med små links
Menu panel	`[data-bs-menu-products]`	indre		Produktkolonnen ved siden af linksene (Links, products, contact)
Menu panel	`[data-bs-menu-heading]`	indre		Overskriften over produkterne, når en er udfyldt
Menu panel	`[data-bs-menu-cards]`	indre		Kortene. Sættet skifter med det aktive link
Menu panel	`[data-bs-menu-contact]`	indre		Kontaktlinjen nederst i panelet
Footer	`[data-bs-footer]`	rod		Sidefoden på hver side
Footer	`[data-bs-footer-inner]`	indre		Rækken inde i sidefoden: sidebredden på Page, ud til sidemargenen på Full
Footer	`[data-footer-column]`	indre	`brand`, `shop`, `help`, `legal`	En kolonne i sidefoden
Footer	`[data-bs-footer-links]`	indre		Linklisten i en kolonne. Det er her, tokens-CSS'en sætter linkenes størrelse og opacitet
Footer	`[data-bs-footer-social]`	indre		Rækken med sociale links nederst. Det er her, tokens-CSS'en tegner linkenes felter
Footer	`[data-footer-copyright]`	indre		Copyrightlinjen
Footer	`[data-bs-footer-width]`	tilstand	`page`, `full`	Valget Width, som på Header
Product card	`[data-bs-card]`	rod		Ét produkt i et gitter. Alle steder, hvor produkter vises
Product card	`[data-bs-card-media]`	indre		Billedpladen
Product card	`[data-bs-card-hover]`	indre		Det andet billede, der vises ved hover
Product card	`[data-bs-card-body]`	indre		Titel, taglinje og pris
Product card	`[data-bs-card-title]`	indre		Titlen
Product card	`[data-bs-card-meta]`	indre		Taglinjen under titlen
Product card	`[data-bs-card-price]`	indre		Prisrækken
Product card	`[data-bs-card-variant]`	tilstand	`card`, `plate`, `editorial`	Hvilken flade kortet har
Product page	`[data-bs-product-layout]`	rod	`classic`, `split`	Produktsiden: galleri og købspanel
Product page	`[data-bs-product-info]`	indre		Købspanelet: titel, pris, valg, læg i kurven
Product page	`[data-bs-swatch]`	indre		En farveprik i variantvælgeren
Product page	`[data-bs-cta="primary"]`	indre		Læg i kurven og de andre primære knapper
Product page	`[data-bs-image-side]`	tilstand	`left`, `right`	Hvilken side galleriet ligger på (Split-layoutet)
Gallery	`[data-bs-gallery]`	rod		Produktbillederne på produktsiden
Collection page	`[data-bs-category]`	rod		En samlingsside: en kategori, All products eller søgeresultater
Collection page	`[data-bs-category-header]`	indre		Båndet med kategorinavnet
Collection page	`[data-bs-category-header-inner]`	indre		Kolonnen inde i båndet
Collection page	`[data-bs-collection-body]`	indre		Filtrene og gitteret. Fra Desktop står sidekolonnen ved siden af gitteret
Collection page	`[data-bs-filters-layout]`	indre	`sidebar`, `top`, `none`	Hvordan siden lægger filtrene ud
Collection page	`[data-bs-filters]`	indre		Filtrene, i sidekolonne eller i en række, fra Desktop
Collection page	`[data-bs-filters-mode]`	indre	`top`, `sidebar`	Hvordan filtrene ligger
Collection page	`[data-bs-sticky]`	indre		Sættes på filtrene og rækken, mens Filters stay in view er slået til. På rækken over gitteret kun, mens filtrene kan være på én linje
Collection page	`[data-bs-stuck]`	indre		Sættes på rækken, mens den ligger under sidehovedet
Collection page	`[data-bs-facet]`	indre		Et filter i rækken over gitteret: knappen og listen
Collection page	`[data-bs-facet-panel]`	indre		Listen med værdier, der åbnes under en filterknap
Collection page	`[data-bs-open]`	indre		Sættes på det filter, hvis liste er åben (ét ad gangen), og på en åben gruppe
Collection page	`[data-bs-facet-group]`	indre		En gruppe i sidekolonnen og telefonpanelet: navnet og værdierne
Collection page	`[data-bs-facet-toggle]`	indre		Gruppens navn, der folder gruppen sammen
Collection page	`[data-bs-facet-body]`	indre		Den del af gruppen, der foldes sammen
Collection page	`[data-bs-facet-values]`	indre		Gruppens værdier. Over 240 px ruller de inde i gruppen
Collection page	`[data-bs-facet-value]`	indre		Én værdi: feltet, navnet og antallet
Collection page	`[data-bs-on]`	indre		Sættes på en værdi med flueben
Collection page	`[data-bs-count]`	indre		Antallet efter en værdi
Collection page	`[data-bs-clear-filters]`	indre		Ryd filtre (n), øverst i sidekolonnen
Collection page	`[data-bs-cta="primary"]`	indre		Ryd filtre i rækken. Vis N produkter i telefonpanelet
Collection page	`[data-bs-filter-bar]`	indre	`count`	Rækken over gitteret: antallet og sortering. På telefon og tablet også filterknappen. `count`, når den har ingen af dem: kun antallet, en tekstlinje på alle skærme
Collection page	`[data-bs-filter-open]`	indre		Filterknappen, på telefon og tablet
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 tablet, over siden
Collection page	`[data-bs-filter-sheet]`	indre		Selve panelet, fra venstre
Collection page	`[data-bs-filter-shade]`	indre		Skyggen bag panelet
Collection page	`[data-bs-closing]`	indre		Sættes på panelet, mens det glider ud
Banners	`[data-bs-banner]`	rod		Et billedbanner blandt sidens sektioner
Banners	`[data-bs-banner-inner]`	indre		Tekstkolonnen over billedet
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		Billedet i et banner uden tekst. Højdeloftet følger skærmen
Banners	`[data-bs-banner-size]`	tilstand	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Højdevalget på computer
Banners	`[data-bs-banner-size-tablet]`	tilstand	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Højdevalget på tablet: eget, eller computerens
Banners	`[data-bs-banner-size-mobile]`	tilstand	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Højdevalget på mobil: eget, eller tablettens
Banners	`[data-bs-bleed]`	tilstand	`full`, `custom`	Full: banneret går kant i kant. Custom: en anden bredde end sidens

Krogene på siden

Krog	Hvad
`[data-bs-main]`	Indholdskolonnen mellem sidehoved og sidefod. Bredden er `--bs-content-max` og sidemargenen `--bs-gutter`
`[data-bs-block="<sektions-id>"]`, `#bs-<sektions-id>`	En sektion på en hvilken som helst side. Virker som anker for links. Roden for CSS og JS i en Custom component-sektion
`[data-bs-section-width]`	En sektions bredde, på sektionens indpakning: `page`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `full` eller `custom`. Den udregnede bredde ligger i `--bs-sec-w`
`[data-bs-hide~="mobile"]`	En sektion, der er skjult på mobil (Show on). Værdierne er `desktop`, `tablet` og `mobile`, adskilt med mellemrum
`[data-bs-first-on~="mobile"]`	Den første sektion, der vises på mobil, når den første sektion er skjult der. Værdierne er `desktop`, `tablet` og `mobile`, adskilt med mellemrum
`[data-bs-video-frame]`	Afspilleren i en Video-sektion. `--bs-video-ratio` er videoens bredde delt med højden, for eksempel 1.7778 for 16:9
`[data-bs-grid-more]`	"View all"-linket i en produktrække
`[data-bs-grid]`	Gitteret i Product grid, Categories, Gallery, Testimonials, Stats, Cards, Collection list og Recently viewed. Kolonnerne pr. skærm (Per screen size) ligger i `--bs-cols`, `--bs-cols-tablet` og `--bs-cols-mobile`. `grid-template-columns` på krogen vinder uden `!important`
`[data-bs-cta="secondary"]`	Load more-knappen under et produktgitter
`[data-bs-section-tone]`	En sektion, hvis Background ikke er Page. Værdien er `light`, `dark`, `brand` eller `custom`. Farverne ligger i `--bs-tone-bg` og `--bs-tone-fg`, den lodrette udfyldning i `--bs-tone-pad`
`[data-bs-cards]`, `[data-bs-cards-item]`	Sektionen Cards, med værdien `grid` eller `rows`, og ét kort i den. Kortenes udseende ligger i `[data-bs-cards-look]`: `plain`, `panel` eller `panel-line`
`--bs-main-pad`	Indholdskolonnens lodrette margen, 2.5rem. `margin-top: calc(-1 * var(--bs-main-pad))` trækker en sektion kant til kant under sidehovedet
`--bs-content-max`	Sidebredden fra Theme › Layout, for eksempel 1024px
`--bs-gutter`	Sidemargenen: 16px på mobil, 24px på tablet og 32px på computer
`[data-bs-legal-line]`	Rækken med fortrydelseslinket under en egen sidefod, eller på en side uden sidefod. `[data-bs-legal-line-inner]` er rækken indeni
`--bs-header-offset`	Sidehovedets højde, mens det bliver stående, når siden ruller, ellers 0. Samlingssidernes filtre ligger under det med Filters stay in view

Regler i tokens-CSS'en

Dette er regler i tokens-CSS'en, ikke inline-stile på elementerne:

sidehovedets udfyldning, farve, baggrund og kant
sidefodens links
bannerets overskrift, undertitel, højde og hjørner
bannerknappens farver
produktkortets plade og billedhjørner
kolonnerne i gitrene, pr. skærm
sidens bredde og sidemargen, sidehovedets og sidefodens rækker og sektionernes bredde
hvilke skærme en sektion vises på, og bannerets højde pr. skærm
samlingssidernes filtre: sidekolonnen, rækken og den smalle række på telefon og tablet

En almindelig regel på krogen vinder over tokens-CSS'en, uden !important. Kun en regel med !important i Theme › Custom CSS eller i en komponentstilarts egen CSS går foran.

Sådan afgrænses komponentens CSS

CSS'en i Code › CSS gælder kun komponenten. Hver selektor får komponentens rod foran sig, når temaet kompileres. Det gælder også inde i @media, @supports, @container og @layer.

Du skriver	Butikken får
`nav a { … }`	`[data-bs-header] nav a { … }`
`[data-bs-header] nav a { … }`	Uændret. Roden står der allerede
`& { padding: 32px; }` eller `[data-bs-header] { … }`	Reglen for selve roden
`: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å roden føjes til roden
`:root { … }`, `html { … }`, `body { … }`	Uændret, med en advarsel. Reglerne når hele siden
`@keyframes`, `@font-face`	Uændret. `src` i `@font-face` skal pege på en fil i mediebiblioteket
`@import …;`	Fjernes

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

Rensningen af CSS

Al CSS renses, i komponenter, sektioner, sider og temaet.

< fjernes, så ingen </style> kan dannes.
@import, expression(), javascript: og andre scriptveje fjernes.
> beholdes, så barnekombinatorer som [data-bs-menu] > a virker. ::before og ::after beholdes.
!important beholdes. Komponentens CSS kommer efter tokens-CSS'en, stilarten og Theme › Custom CSS, så en almindelig regel på en krog er oftest nok.

CSS, der ikke kan læses, fjernes med en advarsel, der nævner den. Advarslen står i designeren og som  i butikkens HTML.

En regel, der aldrig lukkes, fjernes.
Tekst, der ikke er CSS, fjernes for sig. Den føjes aldrig sammen med næste regel.
En selektor, der fortsætter på næste linje, skal have et komma eller en kombinator ved linjeskiftet. Ellers regnes den første linje som en note og fjernes.

Resten af CSS'en virker.

Skrifttyper

Upload skrifttypen som .woff2 eller .woff i mediebiblioteket.
Tryk Copy URL på filen.
Peg @font-face { src: url(…) } på adressen.

Butikkens politik indlæser kun skrifttyper fra mediebiblioteket. En skrifttype fra en anden adresse indlæses hverken i butikken eller på arbejdsfladen.

Variabler fra temaet

Hent farver, skrifttyper og radier fra temaets variabler. Så følger de temaet:

Variabel	Værdi
`var(--bunstack-color-primary)`	Primærfarven
`var(--bunstack-color-fg)`	Tekstfarven
`var(--bunstack-font-heading)`	Overskriftsskrifttypen
`var(--bs-surface)`	Fladefarven til kort og plader
`var(--bs-radius-lg)`	Fotohjørnerne
`var(--bunstack-button-radius)`	Knaphjørnerne

Kroge og CSS-reference

#Krogene pr. komponent

#Krogene på siden

#Regler i tokens-CSS'en

#Sådan afgrænses komponentens CSS

#Rensningen af CSS

#Skrifttyper

#Variabler fra temaet