Strong yet beautiful.
Production components
Six components that run on the live site. Each one is built here as a working component — open it, click it, scroll it. Sizes and colours are measured from production at the Large — Extra breakpoint and expressed in system tokens.
Announcement bar
A full-width strip that sits above the header, not inside it. The whole bar is a link; a dismiss control sits at the right edge.
It is 36 px tall at Large with Padding/X-Small block
padding and a 40 px inline gutter, set in Body 1 at SemiBold on
#bf0000.
Rules
- One bar at a time, one message, one destination.
- Keep the message to a single line at 1320 px. It centres, so a second line unbalances the header beneath it.
- Dismissal is per visitor and must persist — do not re-show it on the next page.
- The header below must move up when the bar is dismissed, not leave a gap.
#bf0000 is the darker of the two brand reds and is not the
same value as the primary button. Use it only for this bar, so the header keeps a single
dominant red.
In-grid promo tile
A promotional tile that takes one product slot inside a listing grid. It carries the same footprint as the card it replaces — 264 × 451 at Large — Extra, a 1 : 1.71 portrait — so the row stays level.
Construction is a full-bleed photograph, a bottom-up scrim, a Title 5 headline and a small light action. It is the overlay card in a narrower frame.
Rules
- One tile per visible grid row at most.
- It must fill a whole slot. Never let it span two columns or sit half in a row.
- It is not a product, so it carries no SKU, rating or Compare control.
- It needs its own scrim. Do not rely on the photograph being dark at the foot.
Similar-model chips
A row of model numbers above the product title. Selecting one loads that model — these are navigation, not filters, and not the filter chips they resemble.
Each chip is 28 px tall: Padding/XXX-Small block,
Padding/X-Small inline, a 4 px radius and a
1 px #3d3d3d border, set in Caption 1.
The current model inverts to near-black.
Rules
- The model being viewed is always present and always marked current.
- Wrap the row, never scroll it — a hidden model is an unreachable product.
- Mark the current chip with
aria-current, not colour alone. - If there is only one model, omit the row. Do not render a single chip.
Related products rail
The product card in a horizontal rail rather than a grid. Four across at Large — Extra inside a 1320 px container, so each slide is 330 px; three at Medium, two at Small.
A pair of 40 × 40 chevrons sits at the head, beside the title. They are the rail’s own control size — the PDP gallery uses 30 × 30.
Rules
- Disable the chevron at each end rather than looping. A rail that wraps hides where it starts.
- The track must stay scrollable by touch and trackpad; the chevrons are an addition, not the only way through.
- Cards keep every part they have in a grid. Do not strip the rating or Compare to save height.
- Fewer cards than slots — left-align them and hide both chevrons.
Related Products
Review list
A flat list of customer reviews at the foot of the product page. Each entry is a handle, a date, a body and a Reply control, in a 16 px padded row separated by a hairline.
The handle is Body 1 at Bold on an 18 px line; the date is Caption 1 in
#3d3d3d, offset from the handle by
Padding/Medium. The body indents to align under the handle.
Rules
- Show the ten most recent and reveal the rest on demand. Do not paginate reviews.
- Both forms are disclosures — closed by default, and they push content down rather than overlaying it.
- A submitted review appears at the top of the list straight away.
- No reviews yet means an invitation to write the first one, never an empty panel.
Review
When I hold it I feel so powerful. Its design is beautiful.
Really powerful for a mini angle grinder.
Reasonable price with high quality.
Great for metal cutting.
The anti-dust switch is such a good feature. I have been using this one for over a year now and I am completely satisfied with it.
Video testimonial card
A player above a headline and a paragraph, carried in the same chevron rail as the related products. The card is 435 px wide at Large — Extra — the same 3-column width as images with overlay text — and the player is 435 × 295, a 1.47 : 1 frame.
The play control is a 90 × 45 rounded rectangle on a translucent slate, centred. Body text sits in a 16 px padded block: Title 5 headline, Body 1 paragraph.
Rules
- One video plays at a time. Starting another stops the first.
- Never autoplay with sound.
- Cards in a rail share a height, so cap the paragraph and keep headlines to two lines.
- A poster image is required — a black frame before play reads as a broken card.
Customer Review
Quality, Value and Fast Delivery in Kassel
Our partner in Kassel on quality, pricing and delivery speed.
Our Partner in Meppen Is Growing With Ronix
The display at our partner’s store continues to expand.
Reaching New Customers in Papenburg
How Ronix tools opened a new group of customers.
Setting Up Ronix in Neustadt
Preparing a new retail space with our partner.