Butiker

Krokar och CSS-referens

Krokarna i butikens HTML per komponent, krokarna på sidan, hur komponent-CSS avgränsas och vad CSS-saneringen tar bort.

Senast uppdaterad 24 oktober 2026 · 12 min läsning

Krokarna är attribut i butikens HTML som din CSS kan rikta in sig på.

Var: Används i Code › CSS i kodredigeraren, i panelen Code och i Theme › Custom CSS. Se Egen CSS och kod i head.

Mallsyntaxen, variablerna och actions för egen HTML finns i Mallreferens.

Krokarna per komponent

Tabellen följer koden: byter en krok namn ändras tabellen samtidigt. Varje komponent har tre slags krokar:

en rot, som komponentens CSS avgränsas till och som JS:en får som root
inre element
tillstånd, som butiken sätter på roten för att visa läget

Ett tillstånd skrivs på roten: [data-bs-header][data-bs-transparent], inte som ett barn.

Komponent	Krok	Typ	Värden	Vad
Header	`[data-bs-header]`	rot		Sidhuvudet på varje sida
Header	`[data-bs-header-inner]`	inre		Raden inuti sidhuvudet: sidbredden på Page, ut till sidomarginalen på Full
Header	`[data-bs-logo]`	inre		Logotyplänken. På en smal mobil krymper den så att ikonerna och menyknappen får plats
Header	`[data-bs-header-nav]`	inre	`start`, `end`	Länkraden i Logo left och Centered. I Split är den två halvor
Header	`[data-bs-header-icons]`	inre		Ikonraden i layouten Icons + panel
Header	`[data-bs-menu-button]`	inre		Knappen som öppnar menypanelen
Header	`[data-bs-cart-icon]`	inre		Varukorgsikonen
Header	`[data-bs-cart-count]`	inre		Antalet varor bredvid varukorgsikonen. Butiken uppdaterar det
Header	`[data-bs-wishlist-icon]`	inre		Önskelisteikonen
Header	`[data-bs-announcement]`	inre		Annonsraden ovanför sidhuvudet
Header	`[data-bs-transparent]`	tillstånd		Sätts på startsidan medan Transparent over hero är på
Header	`[data-bs-scrolled]`	tillstånd		Sätts efter 24 px scroll, och medan menypanelen är öppen (bara genomskinligt sidhuvud)
Header	`[data-bs-sticky]`	tillstånd		Sätts medan Sticky är på
Header	`[data-bs-header-width]`	tillstånd	`page`, `full`	Valet Width: page lägger raden i linje med sidans innehåll, full går ut till sidomarginalen
Menu panel	`[data-bs-menu]`	rot		Panelen som öppnas från sidhuvudet
Menu panel	`[data-bs-menu-layout]`	inre	`split`, `mega`	Panelens rutnät: Shop + information (split) eller Links, products, contact (mega)
Menu panel	`[data-bs-menu-links]`	inre		Listan med stora länkar
Menu panel	`[data-bs-menu-link]`	inre		En stor länk. Radhöjden följer textstorleken. `data-active` märker länken som korten följer, `aria-current` sidan kunden står på
Menu panel	`[data-bs-menu-secondary]`	inre		Listan med små länkar
Menu panel	`[data-bs-menu-products]`	inre		Produktkolumnen bredvid länkarna (Links, products, contact)
Menu panel	`[data-bs-menu-heading]`	inre		Rubriken över produkterna, när en är ifylld
Menu panel	`[data-bs-menu-cards]`	inre		Korten. Uppsättningen byts med den aktiva länken
Menu panel	`[data-bs-menu-contact]`	inre		Kontaktraden längst ner i panelen
Footer	`[data-bs-footer]`	rot		Sidfoten på varje sida
Footer	`[data-bs-footer-inner]`	inre		Raden inuti sidfoten: sidbredden på Page, ut till sidomarginalen på Full
Footer	`[data-footer-column]`	inre	`brand`, `shop`, `help`, `legal`	En kolumn i sidfoten
Footer	`[data-bs-footer-links]`	inre		Länklistan i en kolumn. Tokens-CSS:en sätter länkarnas storlek och opacitet här
Footer	`[data-bs-footer-social]`	inre		Raden med sociala länkar längst ner. Tokens-CSS:en ritar länkarnas rutor här
Footer	`[data-footer-copyright]`	inre		Copyrightraden
Footer	`[data-bs-footer-width]`	tillstånd	`page`, `full`	Valet Width, som på Header
Product card	`[data-bs-card]`	rot		En produkt i ett rutnät. Överallt där produkter listas
Product card	`[data-bs-card-media]`	inre		Bildplattan
Product card	`[data-bs-card-hover]`	inre		Den andra bilden som visas vid hover
Product card	`[data-bs-card-body]`	inre		Titel, taggrad och pris
Product card	`[data-bs-card-title]`	inre		Titeln
Product card	`[data-bs-card-meta]`	inre		Taggraden under titeln
Product card	`[data-bs-card-price]`	inre		Prisraden
Product card	`[data-bs-card-variant]`	tillstånd	`card`, `plate`, `editorial`	Kortets yta
Product page	`[data-bs-product-layout]`	rot	`classic`, `split`	Produktsidan: galleri och köppanel
Product page	`[data-bs-product-info]`	inre		Köppanelen: titel, pris, val, lägg i varukorgen
Product page	`[data-bs-swatch]`	inre		En färgprick i variantväljaren
Product page	`[data-bs-cta="primary"]`	inre		Lägg i varukorgen och de andra primära knapparna
Product page	`[data-bs-image-side]`	tillstånd	`left`, `right`	Vilken sida galleriet ligger på (Split-layouten)
Gallery	`[data-bs-gallery]`	rot		Produktbilderna på produktsidan
Collection page	`[data-bs-category]`	rot		En samlingssida: en kategori, All products eller sökresultat
Collection page	`[data-bs-category-header]`	inre		Bandet med kategorinamnet
Collection page	`[data-bs-category-header-inner]`	inre		Kolumnen inuti bandet
Collection page	`[data-bs-collection-body]`	inre		Filtren och rutnätet. Från Desktop står sidokolumnen bredvid rutnätet
Collection page	`[data-bs-filters-layout]`	inre	`sidebar`, `top`, `none`	Hur sidan lägger ut filtren
Collection page	`[data-bs-filters]`	inre		Filtren, i sidokolumn eller i en rad, från Desktop
Collection page	`[data-bs-filters-mode]`	inre	`top`, `sidebar`	Hur filtren ligger
Collection page	`[data-bs-sticky]`	inre		Sätts på filtren och raden medan Filters stay in view är på. På raden ovanför rutnätet bara medan filtren ryms på en rad
Collection page	`[data-bs-stuck]`	inre		Sätts på raden medan den ligger kvar under sidhuvudet
Collection page	`[data-bs-facet]`	inre		Ett filter i raden ovanför rutnätet: knappen och listan
Collection page	`[data-bs-facet-panel]`	inre		Listan med värden som öppnas under en filterknapp
Collection page	`[data-bs-open]`	inre		Sätts på filtret vars lista är öppen (ett i taget) och på en öppen grupp
Collection page	`[data-bs-facet-group]`	inre		En grupp i sidokolumnen och telefonpanelen: namnet och värdena
Collection page	`[data-bs-facet-toggle]`	inre		Gruppens namn, som fäller ihop gruppen
Collection page	`[data-bs-facet-body]`	inre		Den del av gruppen som fälls ihop
Collection page	`[data-bs-facet-values]`	inre		Gruppens värden. Över 240 px rullar de inom gruppen
Collection page	`[data-bs-facet-value]`	inre		Ett värde: rutan, namnet och antalet
Collection page	`[data-bs-on]`	inre		Sätts på ett ikryssat värde
Collection page	`[data-bs-count]`	inre		Antalet efter ett värde
Collection page	`[data-bs-clear-filters]`	inre		Rensa filter (n), överst i sidokolumnen
Collection page	`[data-bs-cta="primary"]`	inre		Rensa filter i raden. Visa N produkter i telefonpanelen
Collection page	`[data-bs-filter-bar]`	inre	`count`	Raden över rutnätet: antalet och Sortera. På telefon och surfplatta också Filter (n). `count` när den inte har någon av dem: bara antalet, en textrad på alla skärmar
Collection page	`[data-bs-filter-open]`	inre		Filter (n), på telefon och surfplatta
Collection page	`[data-bs-result-count]`	inre		Hur många produkter sidan listar
Collection page	`[data-bs-sort]`	inre		Sorteringen
Collection page	`[data-bs-filter-panel]`	inre		Panelen på telefon och surfplatta, över sidan
Collection page	`[data-bs-filter-sheet]`	inre		Själva panelen, från vänster
Collection page	`[data-bs-filter-shade]`	inre		Skuggan bakom panelen
Collection page	`[data-bs-closing]`	inre		Sätts på panelen medan den glider ut
Banners	`[data-bs-banner]`	rot		En bildbanner bland sidans sektioner
Banners	`[data-bs-banner-inner]`	inre		Textkolumnen över bilden
Banners	`[data-bs-banner-heading]`	inre		Rubriken
Banners	`[data-bs-banner-subtitle]`	inre		Underrubriken
Banners	`[data-bs-cta]`	inre	`primary`, `light`, `outline`	Knappen
Banners	`[data-bs-banner-img]`	inre		Bilden i en banner utan text. Höjdtaket följer skärmen
Banners	`[data-bs-banner-size]`	tillstånd	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Höjdvalet på dator
Banners	`[data-bs-banner-size-tablet]`	tillstånd	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Höjdvalet på surfplatta: eget, eller datorns
Banners	`[data-bs-banner-size-mobile]`	tillstånd	`xs`, `sm`, `md`, `lg`, `xl`, `screen`	Höjdvalet på mobil: eget, eller surfplattans
Banners	`[data-bs-bleed]`	tillstånd	`full`, `custom`	Full: bannern går kant i kant. Custom: en annan bredd än sidans

Krokarna på sidan

Krok	Vad
`[data-bs-main]`	Innehållskolumnen mellan sidhuvud och sidfot. Bredden är `--bs-content-max` och sidomarginalen `--bs-gutter`
`[data-bs-block="<sektions-id>"]`, `#bs-<sektions-id>`	En sektion på vilken sida som helst. Fungerar som ankare för länkar. Roten för CSS och JS i en Custom component-sektion
`[data-bs-section-width]`	En sektions bredd, på sektionens omslag: `page`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `full` eller `custom`. Den uträknade bredden ligger i `--bs-sec-w`
`[data-bs-hide~="mobile"]`	En sektion som är dold på mobil (Show on). Värdena är `desktop`, `tablet` och `mobile`, åtskilda med mellanslag
`[data-bs-first-on~="mobile"]`	Den första sektionen som visas på mobil när den första sektionen är dold där. Värdena är `desktop`, `tablet` och `mobile`, åtskilda med mellanslag
`[data-bs-video-frame]`	Spelaren i en Video-sektion. `--bs-video-ratio` är videons bredd delad med höjden, till exempel 1.7778 för 16:9
`[data-bs-grid-more]`	"View all"-länken i en produktrad
`[data-bs-grid]`	Rutnätet i Product grid, Categories, Gallery, Testimonials, Stats, Cards, Collection list och Recently viewed. Kolumnerna per skärm (Per screen size) ligger i `--bs-cols`, `--bs-cols-tablet` och `--bs-cols-mobile`. `grid-template-columns` på kroken vinner utan `!important`
`[data-bs-cta="secondary"]`	Load more-knappen under ett produktrutnät
`[data-bs-section-tone]`	En sektion vars Background inte är Page. Värdet är `light`, `dark`, `brand` eller `custom`. Färgerna ligger i `--bs-tone-bg` och `--bs-tone-fg`, den lodräta utfyllnaden i `--bs-tone-pad`
`[data-bs-cards]`, `[data-bs-cards-item]`	Sektionen Cards, med värdet `grid` eller `rows`, och ett kort i den. Kortens utseende ligger i `[data-bs-cards-look]`: `plain`, `panel` eller `panel-line`
`--bs-main-pad`	Innehållskolumnens vertikala marginal, 2.5rem. `margin-top: calc(-1 * var(--bs-main-pad))` drar en sektion kant i kant under sidhuvudet
`--bs-content-max`	Sidbredden från Theme › Layout, till exempel 1024px
`--bs-gutter`	Sidomarginalen: 16px på mobil, 24px på surfplatta och 32px på dator
`[data-bs-legal-line]`	Raden med ångerrättslänken under en egen sidfot, eller på en sida utan sidfot. `[data-bs-legal-line-inner]` är raden inuti
`--bs-header-offset`	Sidhuvudets höjd medan det ligger kvar när sidan scrollas, annars 0. Samlingssidornas filter ligger under det med Filters stay in view

Regler i tokens-CSS:en

Det här är regler i tokens-CSS:en, inte inline-stilar på elementen:

sidhuvudets utfyllnad, färg, bakgrund och kant
sidfotens länkar
bannerns rubrik, underrubrik, höjd och hörn
bannerknappens färger
produktkortets platta och bildhörn
kolumnerna i rutnäten, per skärm
sidans bredd och sidomarginal, sidhuvudets och sidfotens rader och sektionernas bredd
vilka skärmar en sektion visas på, och bannerns höjd per skärm
samlingssidornas filter: sidokolumnen, raden och den smala raden på telefon och surfplatta

En vanlig regel på kroken vinner över tokens-CSS:en, utan !important. Bara en regel med !important i Theme › Custom CSS eller i en komponentstils egen CSS går före.

Så avgränsas komponentens CSS

CSS:en i Code › CSS gäller bara komponenten. Varje selektor får komponentens rot framför sig när temat kompileras. Det gäller även inuti @media, @supports, @container och @layer.

Du skriver	Butiken får
`nav a { … }`	`[data-bs-header] nav a { … }`
`[data-bs-header] nav a { … }`	Oförändrat. Roten står redan där
`& { padding: 32px; }` eller `[data-bs-header] { … }`	Regeln för själva 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 { … }`. Tillståndet fogas till roten
`:root { … }`, `html { … }`, `body { … }`	Oförändrat, med en varning. Reglerna når hela sidan
`@keyframes`, `@font-face`	Oförändrat. `src` i `@font-face` ska peka på en fil i mediabiblioteket
`@import …;`	Tas bort

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

Saneringen av CSS

BunStack sanerar all CSS: i komponenter, sektioner, sidor och temat.

< tas bort, så ingen </style> kan bildas.
@import, expression(), javascript: och andra skriptvägar tas bort.
> behålls, så barnkombinatorer som [data-bs-menu] > a fungerar. ::before och ::after behålls.
!important behålls. Komponentens CSS ligger efter tokens-CSS:en, stilen och Theme › Custom CSS, så en vanlig regel på en krok räcker oftast.

BunStack tar bort CSS som inte går att läsa och visar en varning som namnger den. Varningen står i designern och som  i butikens HTML.

En regel som aldrig stängs tas bort.
Text som inte är CSS tas bort för sig. Den fogas aldrig ihop med nästa regel.
En selektor som fortsätter på nästa rad behöver ett kommatecken eller en kombinator vid radbrytningen. Annars räknas den första raden som en anteckning och tas bort.

Resten av CSS:en fungerar.

Typsnitt

Ladda upp typsnittet som .woff2 eller .woff i mediabiblioteket.
Tryck Copy URL på filen.
Peka @font-face { src: url(…) } på adressen.

Butikens policy laddar bara typsnitt från mediabiblioteket. Ett typsnitt från en annan adress laddas varken i butiken eller på arbetsytan.

Variabler från temat

Hämta färger, typsnitt och radier från temats variabler. Då följer de temat:

Variabel	Värde
`var(--bunstack-color-primary)`	Primärfärgen
`var(--bunstack-color-fg)`	Textfärgen
`var(--bunstack-font-heading)`	Rubriktypsnittet
`var(--bs-surface)`	Ytfärgen för kort och plattor
`var(--bs-radius-lg)`	Fotohörnen
`var(--bunstack-button-radius)`	Knapphörnen

Krokar och CSS-referens

#Krokarna per komponent

#Krokarna på sidan

#Regler i tokens-CSS:en

#Så avgränsas komponentens CSS

#Saneringen av CSS

#Typsnitt

#Variabler från temat