scheme-paper
The quick brown fox jumps
Technical specification
Valeryd design system
Foundations rendered live from the production tokens and color schemes. Components are added here from Fas 3 onward.
Color schemes
Each card applies its real .color-{id} class, so background, text and button roles are the live composed values.
scheme-white
The quick brown fox jumps
scheme-navy
The quick brown fox jumps
scheme-inverse
The quick brown fox jumps
Brand palette
Typography
--fs-display
Robust parts for every trailer
--fs-h1
Robust parts for every trailer
--fs-h2
Robust parts for every trailer
--fs-h3
Robust parts for every trailer
--fs-lg
Robust parts for every trailer
--fs-body
Robust parts for every trailer
--fs-sm
Robust parts for every trailer
--fs-eyebrow
Robust parts for every trailer
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibility data.
VAL-204-118 · Valeryd supplies precision-made trailer parts with tr...
RegularMediumSemiboldBoldBlack
Spacing scale
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-8
--space-10
--space-12
Radii
Motion
Animate transform and opacity only; honour prefers-reduced-motion.
Icons
Button
| variant · state | default | hover | disabled | loading |
|---|---|---|---|---|
| primary | ||||
| secondary | ||||
| ghost |
on .color-scheme-navy
Stock states
På lager
På lager På lagerFremstilles på bestilling
Fremstilles på bestilling · leveres om ca. 7 dage Fremstilles på bestillingKan bestilles
Kan bestilles Kan bestillesIkke på lager
Ikke på lager Ikke på lager
Fremstilles på bestilling
Fremstilles på bestilling · leveres om ca. 1 dag
In order: in stock · made to order (a gas spring at zero) · available to order (anything else that sells on at zero) · out of stock. Last row: made to order without the lead time, and with one day.
Badge
In stock
Fits your trailer
Low stock
Out of stock
New
Price
With the theme setting "Show prices excl. VAT" on, under every price, small, the same price
excl. VAT: the current price divided by the VAT the market's prices include, which
snippets/vat-rate.liquid looks up by country. The first two follow
the setting and your market's rate. Where the setting is off, the prices include no VAT, or the
country has no rate, the line is left out, as in the third. The fourth passes a rate of 25 %
and shows the line whatever the setting.
€149,00
Tilbudspris€149,00Normalpris
€199,00
€149,00
€149,00€119,20 ekskl. moms
Accordion
Collapsed (default)
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...
With count (12)
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...
Open server-side (3)
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...
As an h3 under a section heading (FAQ question)
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carries a part number and compatibil...
Legal guarantee notice
Collection copy
How to choose a position light
Check the dimensions, the mounting, the colour and the voltage before you order. A position light is chosen by how it fits and how it wires, not by the weight of the trailer.
What size do I need?
Measure the light already fitted: length, width, screw spacing and where the cable leaves the housing.
- White to the front, red to the rear
- Side markers are amber
- 12-36 V suits most trailers
Blank content renders no markup:
Card
VAL-204-118
Robust parts for every trailer
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...
In stock
Tilbudspris€149,00Normalpris
€199,00
VAL-204-118
Robust parts for every trailer
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...
Fits your trailercard on .color-scheme-navy — surface vs plain
VAL-204-118
Robust parts for every trailer
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...
In stock
Tilbudspris€149,00Normalpris
€199,00
Robust parts for every trailer
Valeryd supplies precision-made trailer parts with traceable fitment. Every item carrie...
Fits your trailerBreadcrumbs
Renders the visible trail and the matching BreadcrumbList JSON-LD from one list, so they cannot drift. A product resolves its own parent collection (skipping all and frontpage); pass collection to override. The trail starts at the top category — there is no Home crumb — so a page with no ancestry renders nothing, and the two examples below are every state there is.
Form field
Find your trailer by registration number.
We could not find that registration number.
With error_slot: true the error paragraph is always there — empty and
hidden until a script fills it — and already named in aria-describedby,
so the script never rewrites it. inputmode asks a phone for digits
while the field still accepts a pasted "0500N".
Error slot, empty.
Error slot, filled.
Enter the length in whole millimetres.
Every control shares --control-size and --radius-sm
with the button: a native select with the theme's chevron, and a currency-prefixed input
(.field__affix) as used by the price filter.
Quantity
Works as a plain number input without JS; the <quantity-input> web component enhances the − / + buttons.
With label the stepper gets a visible <label for> naming what it counts, in place of the fixed "Quantity".
Most lids use two. Replace both so they push equally.
Country and language picker
In the footer only: a button showing the current country's flag (Shopify's own SVG, country | image_url) opens a modal <dialog> around Shopify's localization form. The button opens it with the platform's invoker commands, so a current browser needs no script; <localization-picker> fills in where a browser lacks them. It lists the countries of the active markets and the languages published to them, prints nothing while there is one of each, and stays off until the theme setting Show the country and language picker is on.
The dialog it opens, in the flow:
Location prompt
Shown once, as a modal <dialog>, when Shopify's suggestion endpoint names a country or language other than the current one. It never redirects: Save location posts the localization form, the dismiss button keeps the visitor where they are, and either answer is remembered. It waits for the cookie banner to be answered, so the two never overlap. Rendered here open and in the flow; on the storefront it only opens when the endpoint has a suggestion, which needs an active market for the visitor's country.
Gas spring finder
snippets/gas-spring-row.liquid — one result: a geometry with a select
over its forces. The finder clones it from a <template> and fills
[data-slot]; here it carries demo values in every state. The whole row
is Choose's target; the select and Details sit above it.
-
Præcis match M8 · stang Ø10 mm
M8 gasfjeder · 660 mm
Udtrukket 660 mm · sammentrykket 370 mm · rør Ø22 / stang Ø10 mm
Samme længde som din
Samme kraft
€73,81 pr. fjeder €59,05 ekskl. moms På lager
-
Tæt match M8 · stang Ø10 mm
M8 gasfjeder · 660 mm
Udtrukket 660 mm · sammentrykket 370 mm · rør Ø22 / stang Ø10 mm
8 mm længere end din
100 N svagere
€71,00 pr. fjeder €56,80 ekskl. moms Fremstilles på bestilling · leveres om ca. 7 dage
-
Nærmeste, vi har M8 · stang Ø10 mm
M8 gasfjeder · 640 mm
Udtrukket 640 mm · sammentrykket 360 mm · rør Ø22 / stang Ø10 mm
20 mm kortere end din
Samme kraft
€73,81 pr. fjeder Ikke på lager
-
Præcis match M8 · stang Ø10 mm
M8 gasfjeder · 660 mm
Udtrukket 660 mm · sammentrykket 370 mm · rør Ø22 / stang Ø10 mm
Samme længde som din
Samme kraft
€73,81 pr. fjeder Kun 1 på lager
-
Matcher nummeret M10 · stang Ø14 mm
M10 gasfjeder · 1068 mm
Udtrukket 1068 mm · sammentrykket 600 mm · rør Ø27 / stang Ø14 mm
-
Præcis match M8 · stang Ø10 mm
M8 gasfjeder · 660 mm
Udtrukket 660 mm · sammentrykket 370 mm · rør Ø22 / stang Ø10 mm
Samme længde som din
Samme kraft
€73,81 pr. fjeder På lager
In order: exact and in stock · close and made to order, with the lead time · nearest and out of stock · short for two springs · a number that fits several forces, force left to choose · chosen.
The rod check on a row. In the finder it shows only while the thread is "Not sure", by a
:has() rule on the thread radios; here that rule is held on by hand.
-
Præcis match M8 · stang Ø10 mm
M8 gasfjeder · 660 mm
Udtrukket 660 mm · sammentrykket 370 mm · rør Ø22 / stang Ø10 mm
Samme længde som din
Samme kraft
Tjek, at stangen på din fjeder er Ø10 mm. En fjeder med en anden stang kræver andre endestykker.
€73,81 pr. fjeder På lager
snippets/gas-spring-guide.liquid — "Show me where the number is" under the
number field, opened. The photo's sticker is blank; the article number and the force are drawn onto
it, so no machine-written text can be wrong.
Vis mig, hvor nummeret står Skjul eksemplet
snippets/gas-spring-diagram.liquid with measure: true
— the drawing at the length field, and with active: true as it looks while the
field or its slider has focus.
snippets/gas-spring-range.liquid — the slider under a field, passed to
form-field as its addon. The field is the value;
drag the thumb or type. Here at 660 mm on M8's span, and at 500 N on the starting span of every thread.
snippets/gas-spring-fitting.liquid — one size in the end-fitting step.
The step clones it from a <template>; the fixing dimension it
prints depends on the family: the hole for eyes and forks, the bolt length for angled joints, the
ball for sockets.
In order: chosen · a fork head · an angled joint, its bolt length · a socket, its ball Ø · rated 650 N, approved on the one spring it serves by exception · available to order, no image.
snippets/gas-spring-diagram.liquid — the assembled picture, schematic
and fixed in size. Its sprite is rendered once for the demos' prefix; each finder renders its own.
The glyphs at each end are one href each.
- Udtrukket
- 660 mm
- Sammentrykket
- 370 mm
- Udtrukket, centerafstand
- 719 mm
- Sammentrykket, centerafstand
- 429 mm
- Udtrukket, centerafstand
- 704 mm
- Sammentrykket, centerafstand
- 414 mm
- Udtrukket, centerafstand
- 719 mm
- Sammentrykket, centerafstand
- 429 mm
- Udtrukket, centerafstand
- 704 mm
- Sammentrykket, centerafstand
- 414 mm
In order: the spring alone · hinge eye and fork head · metal sockets at both ends · swivel eye and plastic socket · angled joint at the tube end, bare stud at the rod end.
snippets/gas-spring-fittings.liquid — the step, answered yes and shown
with every family tile. In the finder, JS hides the families with no size that fits and can be
bought in the quantity, and clones the sizes; here two are passed in. Choose a spring in the live
finder below to use it.
Endestykker (valgfrit)
Endestykkerne leveres monteret på fjedrene.
snippets/gas-spring-finder.liquid — the shell, live against
collections['gas-springs'] (its index loads on the first focus). Below
it, the same snippet as a browser without scripting paints it: the styleguide cannot switch
scripting off, so it applies the finder's @media (scripting: none) rules
by hand. The thread form needs collection.filters, which a page never
has, so this is the guarded state: the note to use the filters, and no dead control.
Find din gasfjeder
Find den fjeder, du har: ud fra nummeret på den eller dens længde, kraft og gevind.
Brug filtrene nedenfor til at indsnævre gasfjedrene efter gevind, længde og kraft.
Fjedre, der passer
Vi kunne ikke indlæse fjedrene lige nu.
Se alle gasfjedre, endestykker og tilbehør nedenforTjek målene under Sådan måler du, eller se alle gasfjedre nedenfor. Kontakt os
Endestykker (valgfrit)
Endestykkerne leveres monteret på fjedrene.
Dit sæt
Vælg en fjeder for at sammensætte dit sæt.
De fleste låg bruger to. Udskift begge, så de skubber lige meget. Endestykker tælles pr. fjederende.
I alt
Endestykkerne leveres monteret på fjedrene.
Moms og fragt beregnes i kassen
Sådan måler du
Træk fjederen helt ud, og mål fra rørets ende til stangens ende. Medregn ikke gevindtappene og eventuelle endestykker.
Monter den nye fjeder med stangen pegende nedad, hvor det er muligt.
Hvilket gevind?
Hvis gevindet ikke er mærket på fjederen, så mål stangen (den tynde, blanke del) eller røret:
| Gevind | Stang Ø (mm) | Rør Ø (mm) |
|---|---|---|
| M5 | 6 | 15 |
| M6 | 8 | 18 |
| M8 | 10 | 22 |
| M10 | 14 | 27 |
Hvor kraftig skal den være?
Kraften står på fjederen, fx 0500N betyder 500 N.
Sådan vejer du låget: tag fjedrene af, sæt en vægt under kanten over for hængslet, luk låget ned på den, og fordobl aflæsningen.
Kraft pr. fjeder ≈ lågets vægt (kg) × L1 × 6 ÷ (antal fjedre × L2). L1 er afstanden fra hængslet til lågets yderste kant, og L2 er afstanden fra hængslet til fjederens nærmeste fastgørelsespunkt, når låget er åbent, begge i mm.
Typer af endestykker
- Hængseløje
- En ring, som en bolt eller tap går igennem.
- Gaffelhoved
- En U-formet gaffel; en låsetap går igennem den.
- Drejeøje
- Et øje med et drejeled indeni, til fastgørelsespunkter, der ligger lidt skævt.
- Vinkelkugleled
- Et kugleled sat i en vinkel; det skrues fast på beslaget.
- Kugleskål, metal
- Klikkes på en kugletap.
- Kugleskål, plast
- Klikkes på en kugletap; plastkrop.
Et øje eller en gaffel sidder på en bolt eller tap: mål dens diameter. En kugleskål klikkes på en kugletap: mål kuglen.
Find din gasfjeder
Find den fjeder, du har: ud fra nummeret på den eller dens længde, kraft og gevind.
Brug filtrene nedenfor til at indsnævre gasfjedrene efter gevind, længde og kraft.
Fjedre, der passer
Vi kunne ikke indlæse fjedrene lige nu.
Se alle gasfjedre, endestykker og tilbehør nedenforTjek målene under Sådan måler du, eller se alle gasfjedre nedenfor. Kontakt os
Endestykker (valgfrit)
Endestykkerne leveres monteret på fjedrene.
Dit sæt
Vælg en fjeder for at sammensætte dit sæt.
De fleste låg bruger to. Udskift begge, så de skubber lige meget. Endestykker tælles pr. fjederende.
I alt
Endestykkerne leveres monteret på fjedrene.
Moms og fragt beregnes i kassen
Sådan måler du
Træk fjederen helt ud, og mål fra rørets ende til stangens ende. Medregn ikke gevindtappene og eventuelle endestykker.
Monter den nye fjeder med stangen pegende nedad, hvor det er muligt.
Hvilket gevind?
Hvis gevindet ikke er mærket på fjederen, så mål stangen (den tynde, blanke del) eller røret:
| Gevind | Stang Ø (mm) | Rør Ø (mm) |
|---|---|---|
| M5 | 6 | 15 |
| M6 | 8 | 18 |
| M8 | 10 | 22 |
| M10 | 14 | 27 |
Hvor kraftig skal den være?
Kraften står på fjederen, fx 0500N betyder 500 N.
Sådan vejer du låget: tag fjedrene af, sæt en vægt under kanten over for hængslet, luk låget ned på den, og fordobl aflæsningen.
Kraft pr. fjeder ≈ lågets vægt (kg) × L1 × 6 ÷ (antal fjedre × L2). L1 er afstanden fra hængslet til lågets yderste kant, og L2 er afstanden fra hængslet til fjederens nærmeste fastgørelsespunkt, når låget er åbent, begge i mm.
Typer af endestykker
- Hængseløje
- En ring, som en bolt eller tap går igennem.
- Gaffelhoved
- En U-formet gaffel; en låsetap går igennem den.
- Drejeøje
- Et øje med et drejeled indeni, til fastgørelsespunkter, der ligger lidt skævt.
- Vinkelkugleled
- Et kugleled sat i en vinkel; det skrues fast på beslaget.
- Kugleskål, metal
- Klikkes på en kugletap.
- Kugleskål, plast
- Klikkes på en kugletap; plastkrop.
Et øje eller en gaffel sidder på en bolt eller tap: mål dens diameter. En kugleskål klikkes på en kugletap: mål kuglen.
Product card
The meta rows are data-driven: the dealer line ("Available at N stores") reads the
valeryd.dealer_count metafield, and whose count it shows is the market's
call (snippets/dealer-country.liquid). There are three states:
pinned, a market in a dealer country, where the count is server-rendered and the first
card below is forced to SE to show it; fallback, any other market, where the line
renders hidden and <dealer-count> fills it only for a visitor from
a fallback country; and none, where there is no fallback list or the count is zero,
so the line is absent. Without JS or with a failed lookup, only the pinned state shows.
Both stock states side by side, picked from the catalogue: the foot (dealer line, availability) and the button sit at the same y in every card, the title reserves two lines so the price does too.
Valeryd
3-vejs stikdåse 250V 16A IP44 0.5 m
På lager
Fitment result sections
How a reg-nr result is split: every part in ONE .easysearch__grid,
grouped by category, so a group opens in the cell after the last one ends. A group is named
once, on its first card (.easysearch__label →
.easysearch__group), by the most specific category it has: the
sub-category, or the top-level category for parts that sit directly on it.
assets/easysearch.js assembles this from the
data-section / data-group attributes the
card grid renders; the markup below is that shape, held still so the label band can be read.
Both cases are here: a group named by its sub-category (two cards, only the first labelled), and one named by its top-level category. Heading levels are set at assembly time, not here — the live page runs h2 → h3 → card title, one step at a time.
Wheel brakes
Load & secure
Facet list
snippets/facet-list.liquid — Shopify's native facets as form
controls, with no form of its own: the caller supplies one. The collection page passes
collection.filters, the search page passes
search.filters. A facet offering a single choice is hidden
(it cannot narrow anything), long lists fold behind a no-JS "show more", and the first
few open.
It cannot be rendered here. Shopify populates filters
only on a collection or search template — iterating collections from a
page returns them empty, which is verified, not assumed. See it live on
the product listing or on
a search.
Mega hotspots
Category: Chassisdele & tilbehør — list, extras and diagram render
from the same mega_panel metaobject, so numbering cannot drift.
Cart line and gas spring set
snippets/cart-line.liquid and snippets/cart-set.liquid,
rendered from demo values: both take plain parameters, because Liquid cannot build a line item.
On /cart the section renders the loose lines first, then one set per
distinct private _gs_set key, its lines in part order, and warns when a
set's fittings do not come to one per spring end. Each quantity is named
updates[<line key>]. Remove set submits a form the cart renders
after its own form, so on this page it does nothing.
A loose line, a loose line with a visible property, and one with its image and a variant title (the end-fittings collection's first image, as the fitting demos above use):
A set with a fitting at each end, whose quantities match:
Gasfjedersæt
8010-0660-1200 | tube end 6820015 | rod end 6820103 | 719 mm centre to centre | fittings fitted
A set with the same fitting at both ends, one short of two per spring:
Gasfjedersæt
8010-0660-1200 | both ends 6820015 | 716 mm centre to centre | fittings fitted
Tjek antallene: hver fjeder skal have ét endestykke i hver ende.A set whose fittings were taken out of the cart, and whose lines carry no set value (added by hand, not by the finder): the check flags it, no "delivered fitted" note shows, and the group is named by its heading alone:
Gasfjedersæt
Tjek antallene: hver fjeder skal have ét endestykke i hver ende.Registration-plate band
snippets/regnr-plate.liquid — the plate band at the head of a
reg-no field, drawn as vector so it stays sharp at any size and takes its letters from the
theme font. Which one a visitor sees is the market's call first: on a market in a listed
country the server lights that plate (snippets/regnr-country.liquid).
Elsewhere assets/regnr-country.js lights the visitor's own plate by IP,
but only for a country in the fallback list. Nothing shows for anyone else, or without JS off
a pinned market, because a reg-no lookup only returns anything for registries the backend can reach. Below they are
shown unconditionally, at header, hero and inspection size.
1.9rem
2.6rem
6rem
DK is drawn but not offered: nobody has confirmed that Danish plates resolve. SE and NO are the countries currently listed.
Trailer context
A saved reg-nr search (localStorage, assets/trailer-context.js):
<trailer-chip> completes the header plate motif and links to the
trailer's parts; <trailer-fit> confirms fitment on a product when a
SKU matches the saved parts. Both stay hidden without a saved trailer — and without JS.
The demo buttons exercise the real store (they write this browser's localStorage).
trailer-chip — in the search shell (empty until saved)
trailer-filter — the bar a CATEGORY page shows when the saved trailer has parts in it
(assets/trailer-filter.js). Both states, held still: the offer, and
the filter switched on. On its real page the second state also hides the category's count,
sort, facets, grid and pagination — those describe the unfiltered collection — and puts the
fitting parts in their place. The bar renders nothing at all where the trailer has no parts,
which is why it cannot be demonstrated in-situ here.
5 dele i denne kategori passer til ABC123
Viser de 5 dele her, der passer til ABC123
trailer-fit — on a product whose SKU is among the saved parts:
Newton calculator
snippets/newton-calculator.liquid renders the dialog and nothing
else. The caller owns the opener — any button whose data-newton-open
holds the dialog's id — and names the two inputs the result fills, here the demo fields below.
It is never rendered open on this page: an open scroll-lock dialog
would lock the whole styleguide. Its states are reached from the button: empty on open (no
field has a default); each empty, zero or unreadable field named after Calculate, and a
number of springs above what Springs per lid takes (that input's own max, 6 here); and
the result — 18 kg, 900, 200 and 2 springs give "About 240 N per spring".
Use fills both fields, closes the dialog and returns focus to the force field.
Without JS nothing opens it, so the finder hides its opener and states the rule in words.
Dealer teaser
Invites a company to become a dealer where the page shows the visitor no dealers: in the buy box (inline) and the footer. It renders hidden and country-gate.js reveals it when ValerydDealer.country() names no country; on a market that pins a dealer country it is not rendered, and with the dealer_join_page setting empty it renders nowhere. Shown here ungated. To see the live gate on a product page, set sessionStorage['valeryd:geo:v1'] = '{"country":"DE","supported":false}' (shown) or '{"country":"SE","supported":true}' (hidden) and reload.
Theme blocks
Theme blocks (hero, USP bar, product title/price/buy/description/store-availability, collection filters, EasySearch lookup) carry their own scoped CSS and merchant settings, so they're demonstrated in-situ on their real pages — hero/USP/EasySearch on the home, filters on a collection, the hairline-framed USP bar section below the product page's main section, and the "Complete your purchase" accordion rail (equivalents + curated metafield + "fits your trailer" + native recommendations) at the bottom of a product page — rather than re-rendered here. The product page is one main-product section holding three zones of a single grid: the gallery and the scan-info column (title/tagline/rating/top-3 USPs and the description's first paragraph) on the first row, the deep-dive zone spanning both of those columns on the second (its own Product details heading, then the full description and the accordion trio specifications / manuals & guides / manufacturer information), and a sticky buy box spanning both rows on the right, carrying the price, the personal "fits your trailer" confirmation, and the dealer-availability badge + modal. The scan column's blocks are static, so the block list belongs to the deep-dive zone — the zone a merchant extends. The product-description block runs in two modes — preview up in the scan zone, full down in the deep-dive zone — and the one anchor link joins them: it scrolls to the full copy and lifts its gradient fade via :target, so the whole reveal works with JS disabled and never depends on author CSS un-hiding a closed <details>. This block library covers the reusable snippet components above. One exception the in-situ rule cannot cover: a usp-item carrying a countries value renders openly only on a market whose country it names. Elsewhere it renders hidden, and country-gate.js reveals it only for a visitor from a country it names that is also in the dealer fallback list (SE,NO). With only the EU-26 market active, a German visitor never sees it and a Swedish one does. To inspect the revealed state, set sessionStorage['valeryd:geo:v1'] = '{"country":"SE"}' and reload; to confirm the hidden state actually hides, check the element's geometry rather than its hidden property, since .usp-item sets display and would otherwise paint while reporting itself hidden.