Valeryd design system

Color schemes

Each card applies its real .color-{id} class, so background, text and button roles are the live composed values.

Brand palette

Typography

Spacing scale

Radii

Motion

Animate transform and opacity only; honour prefers-reduced-motion.

Icons

Button

Badge

Price

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 use your market's rate. Where the prices include no VAT, or the country has no rate, the line is left out, as in the third.

Accordion

Collection copy

Blank content renders no markup:

Card

Breadcrumbs

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

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".

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".

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.

• Exact match M8 · rod Ø10 mm

  M8 gas spring · 660 mm

  Extended 660 mm · compressed 370 mm · tube Ø22 / rod Ø10 mm

  Same length as yours

  Force 1000 N1100 N (made to order)1200 N Same force

  €73,81 per spring €59,05 excl. VAT In stock

  Choose this spring Details

• Close match M8 · rod Ø10 mm

  M8 gas spring · 660 mm

  Extended 660 mm · compressed 370 mm · tube Ø22 / rod Ø10 mm

  8 mm longer than yours

  Force 1000 N1100 N (made to order)1200 N 100 N weaker

  €71,00 per spring €56,80 excl. VAT Made to order · delivered in about 7 days

  Choose this spring Details

• Nearest we have M8 · rod Ø10 mm

  M8 gas spring · 640 mm

  Extended 640 mm · compressed 360 mm · tube Ø22 / rod Ø10 mm

  20 mm shorter than yours

  Force 1000 N1100 N (made to order)1200 N Same force

  €73,81 per spring Out of stock

  Choose this spring Details

• Exact match M8 · rod Ø10 mm

  M8 gas spring · 660 mm

  Extended 660 mm · compressed 370 mm · tube Ø22 / rod Ø10 mm

  Same length as yours

  Force 1000 N1100 N (made to order)1200 N Same force

  €73,81 per spring Only 1 in stock

  Choose this spring Details

• Matches the number M10 · rod Ø14 mm

  M10 gas spring · 1068 mm

  Extended 1068 mm · compressed 600 mm · tube Ø27 / rod Ø14 mm

  Force Choose the force1000 N1200 N

  Choose this spring Details

• Exact match M8 · rod Ø10 mm

  M8 gas spring · 660 mm

  Extended 660 mm · compressed 370 mm · tube Ø22 / rod Ø10 mm

  Same length as yours

  Force 1000 N1100 N (made to order)1200 N Same force

  €73,81 per spring In stock

  Change spring Details

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.

• Exact match M8 · rod Ø10 mm

  M8 gas spring · 660 mm

  Extended 660 mm · compressed 370 mm · tube Ø22 / rod Ø10 mm

  Same length as yours

  Force 1000 N1100 N (made to order)1200 N Same force

  Check that the rod on your spring is Ø10 mm. A spring with another rod needs other end fittings.

  €73,81 per spring In stock

  Choose this spring Details

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.

Show me where the number is Hide the example

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.

• Hinge eye M8 6820015 Adds 28 mm Hole Ø 8.2 mm Rated to 1,200 N 716 mm centre to centre €5,31 €4,25 excl. VAT In stock
• Fork head M8 6820103 Adds 31 mm Hole Ø 8.2 mm Rated to 1,200 N 722 mm centre to centre €6,36 In stock
• Angled ball joint M10 6820309 Adds 35 mm Bolt length 20 mm Rated to 2,500 N 1138 mm centre to centre €9,00 In stock
• Ball socket M8 6820415 Adds 22 mm For ball Ø 16 mm Rated to 1,200 N 704 mm centre to centre €7,00 In stock
• Hinge eye M6 6820010 Adds 22 mm Hole Ø 8.2 mm Rated 650 N · approved for this spring 494 mm centre to centre €2,90 In stock
• Fork head M8 6820104 Adds 31 mm Hole Ø 8.2 mm Rated to 1,200 N 722 mm centre to centre €6,50 Available to order

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.

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.

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 your gas spring

Match the spring you have: the number printed on it, or its length, force and thread.

Use the filters below to narrow the gas springs by thread, length and force.

Is there a number on the spring?

Our article number, e.g. 8010-0660-1200, or the part number on its label.

Show me where the number is Hide the example

or measure it

not countednot counted

Length, fully extended (mm) 80 mm All threads 1068 mm

Pull the spring out fully. Measure the tube and the shiny rod from end to end, without the threaded studs. Still has eyes on? Unscrew them, or measure only tube and rod.

Force (N) 50 N All threads 2500 N

Printed on the spring, e.g. 0500N means 500 N.

How do I work out the force for my lid?

Thread

Not sure M5 · rod 6 mm M6 · rod 8 mm M8 · rod 10 mm M10 · rod 14 mm

Not marked? Measure the rod, the thin shiny part.

Find springs

Your set

Choose a spring to build your set.

Work out the force

Lid weight (kg)

Take the springs off. Put a scale under the edge opposite the hinge, close the lid onto it, and double the reading.

Hinge to the far edge of the lid (mm)

From the centre of the hinge.

Hinge to the spring's nearest fixing point, lid open (mm)

On the lid or on the trailer, whichever fixing point is nearer the hinge.

Number of springs

Calculate

How to measure

Pull the spring out fully and measure from the end of the tube to the end of the rod. Leave out the threaded studs and any end fittings.

Fit the new spring with the rod pointing down where you can.

Which thread?

If the thread is not marked on the spring, measure the rod (the thin, shiny part) or the tube:

Thread	Rod Ø (mm)	Tube Ø (mm)
M5	6	15
M6	8	18
M8	10	22
M10	14	27

How strong should it be?

The force is printed on the spring, e.g. 0500N means 500 N.

To weigh the lid, take the springs off, put a scale under the edge opposite the hinge, close the lid onto it, and double the reading.

Force per spring ≈ lid weight (kg) × L1 × 6 ÷ (number of springs × L2). L1 is the distance from the hinge to the far edge of the lid, and L2 from the hinge to the spring's nearest fixing point with the lid open, both in mm.

Fitting types

Hinge eye

A ring that a bolt or pin goes through.

Fork head

A U-shaped fork; a locking pin goes through it.

Swivel eye

An eye with a swivel inside, for fixing points slightly out of line.

Angled ball joint

A ball joint set at an angle; it bolts to the bracket.

Ball socket, metal

Clips onto a ball stud.

Ball socket, plastic

Clips onto a ball stud; plastic body.

An eye or a fork goes on a bolt or pin: measure its diameter. A ball socket clips onto a ball stud: measure the ball.

Browse all gas springs, fittings and accessories below

Find your gas spring

Match the spring you have: the number printed on it, or its length, force and thread.

Use the filters below to narrow the gas springs by thread, length and force.

Is there a number on the spring?

Our article number, e.g. 8010-0660-1200, or the part number on its label.

Show me where the number is Hide the example

or measure it

not countednot counted

Length, fully extended (mm) 80 mm All threads 1068 mm

Pull the spring out fully. Measure the tube and the shiny rod from end to end, without the threaded studs. Still has eyes on? Unscrew them, or measure only tube and rod.

Force (N) 50 N All threads 2500 N

Printed on the spring, e.g. 0500N means 500 N.

How do I work out the force for my lid?

Thread

Not sure M5 · rod 6 mm M6 · rod 8 mm M8 · rod 10 mm M10 · rod 14 mm

Not marked? Measure the rod, the thin shiny part.

Find springs

Your set

Choose a spring to build your set.

Work out the force

Lid weight (kg)

Take the springs off. Put a scale under the edge opposite the hinge, close the lid onto it, and double the reading.

Hinge to the far edge of the lid (mm)

From the centre of the hinge.

Hinge to the spring's nearest fixing point, lid open (mm)

On the lid or on the trailer, whichever fixing point is nearer the hinge.

Number of springs

Calculate

How to measure

Pull the spring out fully and measure from the end of the tube to the end of the rod. Leave out the threaded studs and any end fittings.

Fit the new spring with the rod pointing down where you can.

Which thread?

If the thread is not marked on the spring, measure the rod (the thin, shiny part) or the tube:

Thread	Rod Ø (mm)	Tube Ø (mm)
M5	6	15
M6	8	18
M8	10	22
M10	14	27

How strong should it be?

The force is printed on the spring, e.g. 0500N means 500 N.

To weigh the lid, take the springs off, put a scale under the edge opposite the hinge, close the lid onto it, and double the reading.

Force per spring ≈ lid weight (kg) × L1 × 6 ÷ (number of springs × L2). L1 is the distance from the hinge to the far edge of the lid, and L2 from the hinge to the spring's nearest fixing point with the lid open, both in mm.

Fitting types

Hinge eye

A ring that a bolt or pin goes through.

Fork head

A U-shaped fork; a locking pin goes through it.

Swivel eye

An eye with a swivel inside, for fixing points slightly out of line.

Angled ball joint

A ball joint set at an angle; it bolts to the bracket.

Ball socket, metal

Clips onto a ball stud.

Ball socket, plastic

Clips onto a ball stud; plastic body.

An eye or a fork goes on a bolt or pin: measure its diameter. A ball socket clips onto a ball stud: measure the ball.

Browse all gas springs, fittings and accessories below

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-way socket 250V 16A IP44 0.5 m

Art. no 3060010

€24,78€20,82 excl. VAT

• 0.5 m lead
• IP44 splash-proof rating
• 250 V / 16 A

Available at 5 stores

In stock

Add to cart

Valeryd

ATV Loading Ramp Aluminium Foldable 2260x305 mm 2 pack

Art. no 6452001

€242,89€204,11 excl. VAT

• Ramp measures 2260x305 mm
• 680 kg load capacity
• Folds flat for compact storage

Out of stock

Sold out

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

  

  Valeryd

  3-way socket 250V 16A IP44 0.5 m

  Art. no 3060010

  €24,78€20,82 excl. VAT

  • 0.5 m lead
  • IP44 splash-proof rating
  • 250 V / 16 A

  In stock

• 

  Valeryd

  3-way socket 250V 16A IP44 1.5 m

  Art. no 3060011

  €37,76€31,73 excl. VAT

  • 3 sockets, 1 CEE connector
  • 250 V / 16 A rating
  • IP44 approved for outdoor use

  In stock

• Load & secure

  

  Valeryd

  3-way socket 250V 16A IP44 10 m

  Art. no 3060013

  €34,51€29,00 excl. VAT

  • 10 m lead
  • IP44 splash-proof rating
  • 250 V / 16 A

  In stock

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: Chassis & accessories — list, extras and diagram render from the same mega_panel metaobject, so numbering cannot drift.

1. 1. Trailer wheels
2. 2. Trailer rims
3. 3. Mudguards
4. 4. Mud flaps
5. 5. Loading ramps
6. 6. Lashing eyes
7. 7. Bolts & nuts
8. 8. Platform locks
9. 9. Trailer accessories
10. 10. Winch
11. 11. Keel rollers

More in this category

• Store Stands
• Products Trailer brands
• E-bike Accessories
• Miscellaneous

1234567891011

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):

Hinge eye M8, hole Ø8.2 mm

Zinc plated

Art. no: 6820015

€5,31€4,46 excl. VAT

Remove

€10,62€8,92 excl. VAT

A set with a fitting at each end, whose quantities match:

A set with the same fitting at both ends, one short of two per spring:

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:

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.

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-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.

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.

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.