Kåbdalis Blocks 2 — Storybook

Every block in the kabdalis-blocks-2 library (108), grouped by purpose, with sample content. ”Dynamic” blocks fetch live data from /api or need a logged-in member, so they render skeletons, empty states or a login prompt on this page — that is expected. Static blocks render fully from the sample attributes below.

01 · Layout & page structure

Structural blocks — wrappers, section intros, panel splits, tabs and dividers used to lay out a page.

Content Wrapper 2

kabdalis-blocks-2/content-wrapper · static · Layout container (.wrap max-width). Static; wraps InnerBlocks — sample core paragraph/heading children shown inside.

Section intro

kabdalis-blocks-2/section-intro · static · Static section header. Root class from cls(): b-secintro sec-head b-secintro–center is-narrow (narrow default true, align default center).

Split panels

kabdalis-blocks-2/split-panels · static · Three linked panels (accent/pine/surface); ctaUrl set so each renders as an <a>. Sends visitors to boende / aktiviteter / restaurang.

Feature Split 2

kabdalis-blocks-2/feature-split · static · Two-column photo+content row. imageUrl set so photo renders; count-up stats emit <span data-count>0</span> animated by theme.js.

Belyst kvällsåkning ons & fre

Skidåkning

En backe som växer med dig

0

liftar

0

nedfarter

0

m fallhöjd

1,5

km längsta

3 gröna4 blå2 röda1 svart

Snösäkert puder, korta köer och Sveriges längsta säsong. Från snälla barnbackar till brant svart och pist i parken — och fjäderlätt puder i ett snösäkert mikroklimat.

Se backen & liftar →

Tabs

kabdalis-blocks-2/tabs · static · Static tab bar + single shared panel; needs a view.js to actually switch panels (v1 shows one shared panel).

Accordion

kabdalis-blocks-2/accordion · static · Native details/summary FAQ; view.js handles exclusive-open when allowMultipleOpen is false.

Breadcrumbs

kabdalis-blocks-2/breadcrumbs · static · Hierarchical nav with chevron separators; last item rendered as current page (no link).

Flake Section Head 2

kabdalis-blocks-2/flake-section-head · dynamic · Centered kicker+h2+lead; theme.js buildFlakes fills .kbf-mount, view.js adds .play on scroll to crystallize. No API — needs theme JS only.

Flake Divider 2

kabdalis-blocks-2/flake-divider · dynamic · Decorative divider; theme.js buildFlakes fills .kbf-mount with the SVG snowflake, view.js toggles .play on scroll. No API — needs theme JS only.

Facilities list

kabdalis-blocks-2/facilities-list · static · Yes/no amenity rows. Each row: ✓ or × glyph + text. Toggle marker in editor flips type yes↔no.

02 · Hero & headers

Above-the-fold headers — full-bleed hero, video hero and the highlight banner.

Page hero

kabdalis-blocks-2/page-hero · static · Static landing hero — eyebrow, display heading, lead, two CTAs, background image with overlay (overlay var set via style).

Video hero

kabdalis-blocks-2/video-hero · static · Full-bleed ambient background video (poster is the no-JS/mobile fallback); shares video/view.js for lazy-load + autoplay gating.

Highlight banner

kabdalis-blocks-2/highlight-banner · static · Static. Slim promo band: icon span + message paragraph + inline CTA anchor. Tone class b-hbanner–accent/pine/soft.

03 · CTAs, banners & promos

Calls to action — promo bands, closing CTAs, image CTA bands, CTA grids/cards and inline callouts.

Promo banner

kabdalis-blocks-2/promo-banner · static · Static campaign strip — code badge, headline, ghost CTA (inline color styles come straight from save()).

Closing CTA

kabdalis-blocks-2/closing-cta · static · Bottom-of-page CTA. Static; title always renders, text/button suppressed when empty. tone=accent/pine/surface.

CTA band (image bg)

kabdalis-blocks-2/cta-band-image · static · Full-width CTA over a background image with gradient overlay (–ovr-top/–ovr-bot from overlayColor+opacity). Static.

Boka din vinter

Säkra stugan innan sportlovet

De populäraste veckorna går först. Hitta ledigt boende med ski in / ski out.

Sök boende

CTA grid

kabdalis-blocks-2/cta-grid · static · Clickable square action cards (Font Awesome icon + title + sub). Static; icons emit <i class=”fa-solid fa-X”> (needs FA loaded on frontend).

CTA card

kabdalis-blocks-2/ctacard · static · Flat card, heading + body + up to 2 buttons. Static; variant default/accent-center. Set showSecondary=false to drop the ghost button.

Service card grid

kabdalis-blocks-2/service-card-grid · static · Static. Root .b-service-grid.b-service-grid–cols-N. Each card = FontAwesome circle icon + h4 + p + optional primary button.

Announcement

kabdalis-blocks-2/announcement · static · Banner with kicker/title/body/fine + optional CTA; variant ok|warn|neutral toggles colour.

Info callout

kabdalis-blocks-2/info-callout · static · Static. Callout box b-info (+ b-info–ok/warn/no). Icon div with inline SVG per variant + title/body paragraphs.

Flake Season CTA 2

kabdalis-blocks-2/flake-season-cta · static · Heading+body+button with a self-cycling flake (theme.js fills .kbf-mount, CSS 12s loop). ctaUrl set so button links; no API.

04 · Feature & info lists

Scannable info — feature grids, chips, icon/fact/facility lists, step flows, pricing tiers, offers and stat bands.

Feature grid

kabdalis-blocks-2/feature-grid · static · Icon+heading+body cards in an auto-wrapping grid. Icon is a fixed generic circle SVG per card.

Feature chips

kabdalis-blocks-2/feature-chips · static · Flat row of fact chips that auto-wrap. Each string becomes a .b-chip span.

Icon list

kabdalis-blocks-2/icon-list · static · Static. save() root is the <ul> itself (useBlockProps.save on ul); rows carry inline SVG icon (check/cross/star) + text span.

• Boende: Bergsstugan och Stugbyn tillåter hund — båda nära backen
• Restaurangerna: väluppfostrade hundar välkomna under lunch och middag
• After ski & nattklubben: hunden trivs bättre hemma i lugnet
• Backar & släpliftar: kopplad hund är okej — undvik storhelger
• Längdspåren: många hundar trivs som bäst här
• Håll alltid hunden kopplad — och tänk på tassar och lungor i kyla

Fact list

kabdalis-blocks-2/fact-list · static · Scannable label/value rows in a definition list. Good for resort stats or cabin specs.

Höjd topp

720 m

Nedfarter

11

Liftar

4

Längsta nedfart

1,5 km

Snökanoner

Ja

Säsong

Okt–maj

Process steps

kabdalis-blocks-2/process-steps · static · Static vertical steps; done = check marker, active/upcoming = position number. Root element is an ol.

1. Välj datum & boendeSök ledigt i kalendern och välj stuga.
2. Lägg till tillvalLiftkort, skiduthyrning och skidskola.
3. 3Betala säkertKort eller Swish — bekräftelse direkt.
4. 4Checka inHämta nyckel i receptionen från 15:00.

Steps flow

kabdalis-blocks-2/steps-flow · static · Numbered <ol> how-it-works with connector line; three steps for the booking journey. Fully static.

1. 1

   Välj datum

   Hitta lediga dagar som passar er resa.

2. 2

   Boka online

   Reservera boende, liftkort och skidskola i ett svep.

3. 3

   Kom till fjället

   Checka in och njut — vi har allt redo.

Pricing tiers

kabdalis-blocks-2/pricing-tier · static · Static side-by-side pricing tiers; middle tier featured with ribbon. Included features render a check, excluded a cross.

Offers

kabdalis-blocks-2/offers · static · Static repeater of offer cards (photo, tag, title, body, price, arrow link).

Sportlov

Stuga + liftkort för familjen

Ski in / ski out, 7 nätter med liftkort till alla.

8 900 kr från / vecka→

Afterski

Afterski-paket

Boende, middag och livemusik på Emils Lada.

1 290 kr / person→

Långhelg

Skoteräventyr tor–sön

Guidad skotertur med boende och fika i fjället.

4 200 kr från / helg→

Siffror 2

kabdalis-blocks-2/stats-band · static · Numbers rendered in save() (crawlable); view.js only animates the count-up on scroll. data-dynamic flags the count-up hook.

05 · Cards & grids

Card units for cabins, rooms, contacts and logo strips.

Cabin card

kabdalis-blocks-2/cabin-card · static · Single cabin card — image, meta chips, heading, body, price + Boka CTA.

10 bäddar0 m till backen50 m till restaurang

Timmerstugan 2

Rymlig timmerstuga med ski in / ski out, egen bastu och kvällssol på altanen. Perfekt för två familjer.

8 400 kr / veckaBoka

Room list

kabdalis-blocks-2/room-list · static · Static. Repeating {head, body} rooms in .b-rooms + optional .b-agelimit footer (only emitted when showAgeLimit && ageLimitText).

Contact card

kabdalis-blocks-2/contact-card · static · Map image + contact rows (pin/phone/mail/clock SVG icons) + directions CTA. Static; icons inlined by save(). Rows with a url render as links.

Hitta hit

Kåbdalis Skidanläggning

AdressSkidliftvägen 1, 938 99 Kåbdalis

Telefon0929-310 00

E-postinfo@kabdalis.se

ReceptionDagligen 08:00–17:00

Vägbeskrivning →

Logo strip

kabdalis-blocks-2/logo-strip · static · Static. Row of partner logos (.b-logos__item img) + optional eyebrow heading. Logos array holds media; using picsum stand-ins.

I samarbete med

06 · Story & social proof

Narrative and social proof — intro/family stories, testimonials, pull quotes, social rows and empty states.

Intro Story 2

kabdalis-blocks-2/intro-story · static · Static. Front-page intro band: greeting/eyebrow/heading/body/signature text column + tilted polaroid figure. Uses .rv reveal primitives (theme.js observer).

Hunden är alltid välkommen!Hund i Kåbdalis

Självklart får hunden följa med till oss.

De boende som i dagsläget tillåter hund är Bergsstugan och Stugbyn. Båda ligger nära backen så att ni lätt kan svänga inom. Stugbyn är äldre och mer sliten än Bergsstugan, som i sin tur är större — läs mer om respektive boende här.

Välkommen med din fyrfota vän!

Family Story 2

kabdalis-blocks-2/family-story · static · Dark pine band: tilted polaroid + numbered family activities. imageUrl set so polaroid renders; .rv nodes animate via theme.js observer.

För familjen

De bästa vinterminnena görs tillsammans

Hela byn är byggd för familjer — korta avstånd, trygga backar och fika nära till hands. Barn till och med 7 år åker gratis.

• 1.

  Knatteliften & barnbacken

  En mjuk start för de minsta — flack, bred och alldeles intill värmestugan.

• 2.

  Skidskolan

  Privat- och grupplektioner från fem år. Första plogsvängen brukar sitta före fikat.

• 3.

  Knattecupen & skattjakt

  Helgprogram i barnbacken med mini-slalom, skattjakt och kramar från maskoten Kåbe.

Gäströster 2

kabdalis-blocks-2/testimonials · static · Static quote cards (crawlable); cards reveal on scroll via the shared kab2-anim layer.

Pull quote

kabdalis-blocks-2/pull-quote · static · Static block. Single large quote + attribution figcaption (author + role).

Social links

kabdalis-blocks-2/social-row · static · Round-icon variant (showLabels off); default links to Instagram/Facebook/YouTube/newsletter with inline platform SVGs.

Empty state

kabdalis-blocks-2/empty-state · static · Friendly no-results card (search icon + title + body + optional CTA). Static; set showCta=false to hide the button.

07 · Media, gallery & decorative

Imagery and motion — galleries, polaroids, video, media spotlights, image+text, skiers, loaders and countdowns.

Gallery

kabdalis-blocks-2/gallery · static · Static. save() emits wrapper (.b-galgrid or .b-masonry) of .photo cells; masonry cells carry mixed aspect ratios.

Polaroid

kabdalis-blocks-2/polaroid · static · Static single polaroid (one entry = no b-scrap wrapper). Add more polaroids to switch to the scrap-row layout.

Första puderdagen 2026 ✨

Video

kabdalis-blocks-2/video · static · Inline self-hosted player; view.js lazy-loads the source on scroll. videoUrl is a sample MP4 with a picsum poster.

Media spotlight

kabdalis-blocks-2/media-spotlight · static · Static. Big image + eyebrow/heading/body/checklist(ul)/CTA. Add b-spot–rev to flip (image right). list is a RichText ul string.

Skidskola

Kom igång med en privatlektion

Om ingen i sällskapet vill vara skidlärare rekommenderar vi en timmes skidskola för att komma igång. Vi erbjuder endast privatlektioner — det ger bäst förutsättningar för att lära ut.

• Endast privatlektioner
• Barnbacken är en bra övningsplats
• Har man aldrig åkt kan den kännas brant
• Sällskap av någon som kan åka underlättar

Läs mer om skidskolan →

Image + text

kabdalis-blocks-2/image-text · static · Static. Two-column b-imgrow (add b-imgrow–rev when reversed). Text col + photo. linkLabel default ”Läs mer” emits the link-arrow anchor.

Skidåkning

Hela familjen välkommen

Backar för alla nivåer — och väluppfostrade hundar är välkomna i alla våra restauranger under lunch och middag. Håll hunden kopplad i backar och släpliftar, och undvik gärna storhelger när det är mycket folk.

Läs mer →

Skier 2

kabdalis-blocks-2/skier · dynamic · Empty marker div. view.js appends a fixed canvas skidåkare to <body> that follows scroll; decorative, frontend-only, no data/API.

Slalomåkare 2

kabdalis-blocks-2/slalom-skier · dynamic · view.js appends a fixed-position skier layer to <body> at load; the block itself is an empty, invisible config wrapper. No API.

Flake Loader 2

kabdalis-blocks-2/flake-loader · static · Loading indicator: theme.js buildFlakes fills .kbf-mount, CSS runs a 4s crystallize/melt cycle. Static markup + theme JS; no API.

Nedräkning 2

kabdalis-blocks-2/season-countdown · dynamic · view.js reads data-target-date + data-done-text and builds the ticking digit grid into the empty .kab2-cd__grid at runtime; no /api needed, pure client clock.

Dagsschema 2

kabdalis-blocks-2/day-timeline · dynamic · Steps are real static content; save() emits full markup. view.js adds .is-in on scroll to animate the spine — no /api or login. Renders fine without JS.

08 · Lodging & dining

Dining and area — restaurant cards/menus, dish cards, daily specials and the resource map.

Restaurant cards

kabdalis-blocks-2/restaurant-cards · static · Static. Two cards → wrapper gets .b-rest-row. Badge variants: open (green), warn, no add .b-rest–closed to card.

Öppet nu

Lavvu — restaurang & afterski

Modernt sameinspirerat kök mitt i området. Lunchsallader, klassiska burgare och fjällkvällar med levande musik på helger.

Mån–Fre11:00 – 22:00

Lör–Sön10:00 – 23:00

Boka bordSe meny

Öppnar 09:00

Toppstugan

Enkel servering högst upp vid liften. Nybakade våfflor, varm choklad och en utsikt du sent glömmer.

Alla dagar09:00 – 15:30

Hitta hitSe meny

Restaurant menu

kabdalis-blocks-2/restaurant-menu · static · Static. Sections of dishes (name/desc/price). save uses span.b-menu__name + div.b-menu__desc; desc only emitted when showDescriptions.

Dish cards

kabdalis-blocks-2/dish-cards · static · Auto-grid of dish cards (photo + name + price + desc). Static; photo omitted when imageUrl empty. Uses picsum seeds for images.

Älggryta265 kr

Rotfrukter, potatispuré, viltsky

Fjällröding285 kr

Brynt smör, mandelpotatis

Hjortronparfait125 kr

Vit choklad, smulpaj

Daily special

kabdalis-blocks-2/daily-special · static · Single dagens-rätt card: day label + dish + description + price. Static.

09 · Snow report & weather (dynamic)

Live snow & weather widgets (fetch /api). They show skeletons until data loads.

Snow Report (Legacy) 2

kabdalis-blocks-2/weather-widget · dynamic · Legacy snow bar; inserter-hidden. view.js fills temp/backar/liftar spans by id from live /api. Superseded by Snow Report (v3).

Snow Report 2

kabdalis-blocks-2/weather-widget-v3 · dynamic · view.js fills the alert/metric/forecast spans by id from live /api and reveals the alert + cross-country rows when data exists.

Weather Forecast 2

kabdalis-blocks-2/weather-forecast-widget · dynamic · view.js draws the multi-day forecast chart into the canvas from live weather /api for the given lat/long (Kåbdalis coords).

Temperature (History) 2

kabdalis-blocks-2/temperature-history-widget · dynamic · view.js draws a Chart.js line of temperature over time into the canvas from live /api history; period pills + compare-year toggle added at runtime.

Snow Depth (History) 2

kabdalis-blocks-2/snow-depth-widget · dynamic · view.js draws a Chart.js line of snow depth over time onto the canvas from live history data; empty canvas until hydrated. No login.

Slopes & Lifts 2

kabdalis-blocks-2/slopes-lifts-widget · dynamic · view.js fetches live open slopes/lifts counts and fills the id-tagged spans; static placeholders show ’–’. No login needed.

Storm Alert 2

kabdalis-blocks-2/storm-message · dynamic · save() is a bare wrapper; view.js fetches /pub/storm-messages and only renders content if an active alert exists — otherwise stays empty/hidden.

Opening Hours (Compact) 2

kabdalis-blocks-2/opening-hours-widget · dynamic · Dynamic — view.js fetches opening hours for the selected day; date selector + list are populated live, calendar link is static.

Opening Hours (Full) 2

kabdalis-blocks-2/opening-hours-full · dynamic · Dynamic — view.js fetches the full opening-hours + events schedule live and fills the empty filters/days/load-more containers.

10 · Maps & webcams (dynamic)

Maps & webcams (fetch /api or external tiles/images).

Webcam 2

kabdalis-blocks-2/webcam-widget · dynamic · view.js loads the selected webcam JPGs into .webcam-grid and wires the fullscreen modal; sources = topp/dal cameras.

Piste Map 2

kabdalis-blocks-2/pist-map-widget · dynamic · Dynamic — view.js makes the map pan/zoom/rotate and loads hotspot markers; the img src is static config from data-map-src.

Zoom inZoom outReset viewRotate mapToggle fullscreenVisa min positionOpen high-resolution pist map (new tab)

Laddar pistkarta…

Area Map 2

kabdalis-blocks-2/area-map-widget · dynamic · view.js loads Mapbox GL from data-* config; needs the Mapbox token/script — renders ”Laddar karta…” until the live map initialises.

Resource map

kabdalis-blocks-2/resource-map · dynamic · Global map.js reads data-id on div#map and fetches coordinates for that bok_boende resource; needs Mapbox + a live resource ID to render a real map.

11 · Events & feeds (dynamic)

Content feeds — posts, events, Instagram/Facebook, Mailchimp and campaigns (need live data / tokens).

News Feed 2

kabdalis-blocks-2/posts-widget · dynamic · Dynamic — view.js fetches recent posts from /pub/posts and renders cards into the empty posts-grid; data-* carry the config.

Upcoming Events 2

kabdalis-blocks-2/upcoming-events · dynamic · view.js fetches upcoming events from live /api and fills .upcoming-events-list; empty until hydrated.

Featured Event 2

kabdalis-blocks-2/featured-event · dynamic · Renders empty; view.js reads data-* + fetches /pub/calendar-events by event-id or latest. Needs live calendar API; empty until an event exists.

Featured Events 2

kabdalis-blocks-2/featured-events · dynamic · Renders skeleton; view.js reads data-from/to-date + fetches /pub/calendar-events for the range. Needs live calendar API to populate the list.

Instagram Feed 2

kabdalis-blocks-2/instagram-feed · dynamic · Needs live data — view.js adds .igw .b-card and fetches recent Instagram posts into .instagram-posts-list; empty skeleton until then.

Facebook Feed 2

kabdalis-blocks-2/facebook-feed · dynamic · view.js fetches live posts for data-page-id via the FB Graph proxy and fills empty .facebook-posts-list; adds .fb at runtime. Needs frontend JS + API.

Newsletter (Mailchimp) 2

kabdalis-blocks-2/mailchimp-newsletter · dynamic · Semi-dynamic — form posts to admin-ajax (mailchimpsubscribe); view.js adds .mc .b-card wrappers. Renders standalone; submit needs Mailchimp config.

Campaign 2

kabdalis-blocks-2/campaign-widget · dynamic · view.js fills the empty container with featured accommodations + booking form from /api using the data-* campaign config; needs live availability.

12 · Pricing & search (dynamic)

Pricing & search tools (booking search, price table, season pass) — hydrate from /api.

Booking Search 2

kabdalis-blocks-2/booking-search · dynamic · view.js wires up the calendar overlay + submit to the booking flow; static form renders standalone but the search needs live /api.

Price Table (Lift / Rental) 2

kabdalis-blocks-2/price-table · dynamic · Dynamic — view.js fetches live prices (getLiftkort.php / getSkiduthyrning.php) and fills the empty pt__tabs / pt__body; head + note are static.

Season Pass (Säsongskort) 2

kabdalis-blocks-2/season-pass · dynamic · save() returns null — server-rendered by render.php, driven by view.js against /api resources.php cart endpoints. Stored markup is only the block comment.

13 · Booking tools (dynamic)

Booking flows (conference, table, ski school, snowmobile, slope, caravan electricity, accommodation, lost item, meal planning). Some need login.

Table Reservation 2

kabdalis-blocks-2/table-reservation · dynamic · view.js injects the restaurant table-booking form into the empty .table-reservation-form and posts to the reservation API. No login.

Table Reservation (Account) 2

kabdalis-blocks-2/table-reservation-account · dynamic · view.js injects the reservation form into .table-reservation-form; prefills contact info when logged in, anonymous booking still works.

Ski School Booking 2

kabdalis-blocks-2/skischool-booking · dynamic · view.js hydrates the empty .skischool-booking-form against /api ski-school endpoints; needs live schedule/instructor data (and login to complete a booking).

Ski School Booking (Account) 2

kabdalis-blocks-2/skischool-booking-account · dynamic · Logged-in variant. view.js hydrates the empty form against /api ski-school endpoints and requires KabAuth login to prefill/complete a booking.

Snowmobile Booking 2

kabdalis-blocks-2/snowmobile-booking · dynamic · view.js injects the snöskoter-safari booking form into the empty .snowmobile-booking-form and posts to the booking API. No login.

Snowmobile Booking (Account) 2

kabdalis-blocks-2/snowmobile-booking-account · dynamic · Account variant — view.js needs window.KabAuth login, then mounts the snöskoter form into the empty .snowmobile-booking-form. Empty until logged in.

Slope Booking 2

kabdalis-blocks-2/slope-booking · dynamic · Requires login (window.KabAuth) + team link; view.js mounts the backtid form and calls /member/slopes/*. Empty mount div until hydrated.

Caravan Electricity 2

kabdalis-blocks-2/caravan-electricity · dynamic · Login required; view.js (window.KabAuth + /member/caravan + /member/electricity) renders the booking form into the mount for eligible caravan-spot accounts.

Accommodation booking

kabdalis-blocks-2/accommodation-booking · dynamic · Needs this block’s view.js + live /api availability for resource; hydrates datepicker + price + Boka button.

Lost & Found 2

kabdalis-blocks-2/lost-item-report · dynamic · Needs view.js — it rebuilds the .lir-form (wraps in .lir .b-card, adds .lir__head kicker) and wires submit to the hittegods endpoint; save ships empty form shell.

Meal Planning 2

kabdalis-blocks-2/meal-planning · dynamic · Login required — view.js (window.KabAuth + /member/mealedit/*) mounts guests/allergies/meals per day into .meal-plan__mount. Empty until logged-in on a booking.

14 · Account & member (dynamic)

Account/member area blocks — require a logged-in member (window.KabAuth).

Account / Login 2

kabdalis-blocks-2/account-auth · dynamic · view.js reads window.KabAuth and renders login/create-account or logged-in state into the mount; needs the /api session.

My Bookings 2

kabdalis-blocks-2/account-bookings · dynamic · Login required; view.js reads window.KabAuth and GET /member/user/bookings to fill the mount with the user’s bookings and meals.

Account Overview 2

kabdalis-blocks-2/account-overview · dynamic · view.js renders the flow cards; shows backe/husvagnsel only for eligible accounts (needs login), otherwise a generic card set.

Owner Cabins 2

kabdalis-blocks-2/owner-cabins · dynamic · Dynamic — requires login. view.js (window.KabAuth + /member/property/owner/*) renders the owner booking timeline into the empty mount.

15 · Playful & interactive

The playful set — comparison slider, season switcher, flip cards, story carousel, ticker, sticker, chat bubbles, postcard, doodles and a ski-trail divider.

Before / After

kabdalis-blocks-2/before-after · static · Invisible range input drives the wipe; view.js mirrors its value to –ba-pos + aria-valuetext. Static frame without JS.

SommarVinter

Season toggle

kabdalis-blocks-2/season-toggle · static · view.js swaps .is-active/.is-summer with the full tabs keyboard pattern; without JS the start-season panel stays visible.

Året runt

Ett fjäll, två säsonger

VinterSommar

Puder & pister

Nypistade backar, barnvänliga liftar och pulkabacke precis vid stugorna. Säsongen börjar redan i oktober och håller ända in i april.

Läs mer om vintern

Vandring & fiske

När snön släppt tar vandringslederna, fisket och de ljusa sommarnätterna över. Fjället är minst lika fint utan skidor.

Upptäck sommaren

Flip cards

kabdalis-blocks-2/flip-cards · static · Photo front / fact back; CSS flips on hover, view.js adds tap+keyboard toggle (.is-flipped + aria-pressed, Escape unflips).

Visste du?

Vänd

Sveriges längsta säsong

Liftarna snurrar från oktober till maj. Snön kommer tidigt och stannar länge här uppe i Lappland.

Visste du?

Vänd

Maskoten Kåbe

Snöugglan Kåbe hälsar på i barnbacken varje lovvecka. Vinka, så vinkar han alltid tillbaka.

Visste du?

Vänd

Norrsken

Klara kvällar dansar norrskenet över backen. Bäst chans har du under kvällsåkningen.

Se vädret

Story carousel

kabdalis-blocks-2/story-carousel · static · Native scroll-snap strip; view.js reveals prev/next arrows (.is-ready), scrolls one card per click and disables arrows at the ends.

Ticker

kabdalis-blocks-2/ticker · static · Pure CSS marquee of short facts; pauses on hover/focus, reduced-motion shows a wrapped static list. Tones: pine/accent/surface.

Sticker badge

kabdalis-blocks-2/sticker-badge · static · Rotating circular SVG text around an emoji center; hover pauses spin + scales. Links when linkUrl is set (this sample links to /boka/).

Chat bubbles

kabdalis-blocks-2/speech-bubbles · static · SMS-style Q&A thread — guest asks, maskoten Kåbe answers; SR speaker prefixes via .kab-visually-hidden; pure CSS, no view.js.

Postcard

kabdalis-blocks-2/postcard · static · Vintage vykort — tilted card (straightens on hover), photo front + handwritten back with dashed stamp, postmark ring and dotted address lines.

Hälsningar från Kåbdalis!

Snön knarrar under skidorna och kakaon är varm. Barnen har redan bestämt att vi stannar en vecka till …

— Familjen Vinterberg

🏔️SVERIGE 26 krKÅBDALIS★

• Till dig där hemma
• Någonstansgatan 1
• Sverige

Doodle note

kabdalis-blocks-2/doodle-note · static · Handwritten margin note (.hand) with marker highlight + hand-drawn accent arrow; tilt/align modifiers, tiny hover wiggle. Pure CSS.

Ski trail divider

kabdalis-blocks-2/trail-divider · static · S-curved dashed ski tracks with a tiny skier gliding along the curve via CSS offset-path (no JS); reduced motion parks it at 60%.

16 · Kåbdalis content blocks

Purpose-built static blocks for specific Kåbdalis pages — the dog policy, the ski-season timeline, the ski-service trio and the pet-friendly stay callout.

Dog policy

kabdalis-blocks-2/dog-policy · static · Static. Paw-marked header + per-area rows (yes/limited/no status chip + note) + closing foot note. Purpose-built for the ”Hund i Kåbdalis” page.

Season timeline

kabdalis-blocks-2/season-timeline · static · Static. Horizontal timeline of the ski seasons — one snowflake node per season with date range + title + body. Collapses to a vertical timeline on mobile.

Ski service trio

kabdalis-blocks-2/ski-service-trio · static · Static. Header + wide service rows (left FontAwesome icon + title + lead + link-arrow). Opinionated take on service-card-grid for Skidåkning / Skidskola / Skoter.

Pet-friendly stay

kabdalis-blocks-2/pet-friendly-stay · static · Static. Hero image + paw-badged text, hund-vänliga boenden list and a booking CTA. Add b-petstay–rev to flip the image right. Image uses a picsum placeholder.

Ta med hunden

Hundvänligt boende nära backen

Självklart får hunden följa med. Våra hundvänliga boenden ligger nära backen så att ni lätt kan svänga inom.

• Bergsstugan — större och nyare, nära backen
• Stugbyn — äldre och mer sliten, men lika hundvänlig

Se hundvänliga boenden