Product information
The product detail page — the deepest screen in the system. An image slider paired with an information wrapper, followed by a sticky tab bar and an information section carrying the feature list and specification table.
Page layout
Two columns above the fold: the slider takes roughly 60 % of the container and the information wrapper the rest. Below 992 px they stack, slider first.
The information wrapper is a fixed 512 px at its Default size and compresses to 434 px inside the 1320 and 1140 containers.
Vertical order
- Main navigation bar — 54 px
- Slider and information wrapper
- Sticky tablist — 64 px container, 40 px buttons
- Information Section — feature list and spec table
| Breakpoint | Slider | Info wrapper | Info Section |
|---|---|---|---|
| 1920 | 822 × 739 | 434 | 1920 × 732 |
| 1400 | 822 × 739 | 434 | 1400 × 732 |
| 1200 | 658 × 559 | 434 | 1200 × 820 |
| 992 | 687 × 604 | stacked | 992 × 916 |
| 768 | 583 × 500 | stacked | 768 × 1138 |
| 576 | 540 × 620 | stacked | 576 × 972 |
| 358 | 326 × 398 | stacked | 358 × 1234 |
Image slider
A square stage with a thumbnail rail. The rail runs vertically at 75 px beside the stage on large viewports, and horizontally at 65–90 px beneath it on smaller ones.
Video thumbnails
A video thumbnail carries a play badge — a filled circle in brand red, centred on the tile.
Chevrons
Two 30×30 chevrons sit inside the stage at its lower-left, stacked vertically — they page the thumbnail rail, not the stage.
Up to nine thumbnails are shown at every size. At narrow widths nine tiles exceed the frame, so the rail scrolls rather than wrapping — keeping the stage in a fixed position while the thumbnails move.
Information wrapper
The densest block of type in the system — eleven distinct elements in a single column, using six different type styles.
Order
- Product rate — star plus count, Caption 1
- Labels — the product-card status chips, reused
- Item code — Title 5
- Barcodes — three Caption 1 lines
- Origin badge — image
- Product name — Title 2 in-container, 28/32
- Description — Body 1, 16/20
- Actions — Bulk order (primary), Compare (secondary)
- Feature and Spec accordions
- Share — social icons
- Similar models — chips
Item code: V12001
Corded Impact Drill
Do you want to get a miter saw? Whether you are a professional or a homeowner, you must choose the tool that best suits your needs. Ronix 5302 miter saw with 2000W power and 5300 RPM is used to cut at an angle so you can create angles with pieces of wood.
Feature
- Powerful 2000W motor delivers 5300 RPM
- Equipped with belt to transfer power for less noise
- Made from high quality material
Spec
| No-Load Speed | 0-3000 RPM |
|---|---|
| Power | 600W |
| Chuck Size | 13mm |
Sticky tablist
Six buttons in a 64 px container beneath the fold. The library annotates two frames with “While Scrolling : Tabs Sticky” — the bar pins under the navigation as the page scrolls.
Buttons are 40 px tall at Large and 36 px at Medium and Small, matching the standard button component rather than defining their own.
At 358 px the six buttons need 874 px against a 326 px container, so the bar scrolls horizontally.
Information Section
Two columns on one white surface: the feature list on the left, the specification table on the right, with a pair of document actions beneath.
Feature items are Body 2 Strong — Medium 500 at 14/18. The spec table uses the
same size, with labels in regular weight and values in
Foreground/2.
It ships in seven variants across three Size values and seven Breakpoints — the most heavily specified component on the page.
Feature
- Powerful 2000W motor delivers 5300 RPM for maximum productivity
- Equipped with belt to transfer power for less noise and vibration
- Made from high quality material which secures precise cutting
- Adjustable and expandable base extensions for work-piece support
- Compact design and lightweight for job site portability
- Horizontal D-handle design for easy and comfortable operation
SPC
| No-Load Speed | 0-3000 RPM |
|---|---|
| Frequency | 50-60Hz |
| Model | 2211 |
| Chuck Type | Keyed |
| Chuck Size | 13mm |
| Power | 600W |
| Drill Capacity | 13-30mm |
| Weight | 1.88kg |
| Voltage | 220-240 V |
| Variant | Width | Height | Columns |
|---|---|---|---|
| Size=Large, Breakpoint=Default | 1920 | 732 | 2 |
| Size=Large, Breakpoint=1400 | 1400 | 732 | 2 |
| Size=Large, Breakpoint=1200 | 1200 | 820 | 2 |
| Size=Medium, Breakpoint=992 | 992 | 916 | 2 |
| Size=Medium, Breakpoint=768 | 768 | 1138 | 1 |
| Size=Small, Breakpoint=576 | 576 | 972 | 1 |
| Size=Small, Breakpoint=358 | 358 | 1234 | 1 |
Breakpoint — which is what the category tile should have done.Markup
The accordions are native <details> elements — they
work without JavaScript and are keyboard accessible by default.
<div class="rx-pdp">
<div class="rx-slider">
<div class="rx-slider__thumbs" role="tablist">
<button class="rx-slider__thumb" role="tab" aria-selected="true">…</button>
<button class="rx-slider__thumb rx-slider__thumb--video" role="tab">…</button>
</div>
<div class="rx-slider__stage">
<img src="drill.jpg" alt="Corded impact drill">
<div class="rx-slider__chevrons">…</div>
</div>
</div>
<div class="rx-pdp-info">
<h1 class="rx-pdp-info__title">Corded Impact Drill</h1>
<details class="rx-accordion">
<summary class="rx-accordion__summary">Spec</summary>
<div class="rx-accordion__body">…</div>
</details>
</div>
</div>