Component index
Every component in the system, grouped by function. Names match the published library, so a component found in the library can be looked up here directly.
Commerce
| Component | Variants | Documented in |
|---|---|---|
| Product card | State × Type — 4 | Product card |
| Label | New, Hot sale, Discontinued, Made in Germany | Product card |
| PLP-card | Default, Hover | Product card |
| filter-options | Layout × Type — 8 | Product grid |
| Filter-chips, filters-section | — | Product grid |
| Product-tablist | State — 2 | Product grid |
| pagination | 3 widths | Product grid |
| Similar-model chips | Rest, current | Production components |
| Related products rail | 4 / 3 / 2 across | Production components |
| Review list | Rest, replying, writing | Production components |
| image-slider | 2 layouts | Product information |
| Information-wrapper | Default | Product information |
| Information Section | Size × Breakpoint — 7 | Product information |
| Product feature, Product-spc-table, SPC-tabel | — | Product information |
Editorial & marketing
| Component | Variants | Documented in |
|---|---|---|
| Banner-001 | Type × Size | Banner, buttons & cards |
| Countaning text banner | Type × Size | Banner, buttons & cards |
| product-line | Type — 2 | Product line |
| product-line-with-tablist | Type — 2 | Product line |
| tablist block | 6 widths | Product line |
| series-information-block | Size — 2 | Product line |
| picture-ratio | — | Product line |
| Picture - Inside Label | Type × Size — 6 | Category tile |
| Images with overlay text | Size × Grid — 4 | Images with overlay text |
| Overlay card | — | Images with overlay text |
| Job category card | 16 trades | Images with overlay text |
| Zigzag Card | Property 1 — 2 | Zigzag card |
| Zigzag Card with Accordion | State × type — 10 | Zigzag card |
| News Card - EN | State × Grid × Size — 12 | News card |
| news-Information-Box | state × Size — 4 | News card |
| Related-article | state — 2 | News card |
| Office card | State × type × Grid — 8 | Office card |
| value-Card, value-card-Simple | Size × Type | Information cards |
| Informative-card | Type × State — 4 | Information cards |
| Clickable-Card | State × Size — 4 | Information cards |
| value-block | Type × color-mode — 4 | Additional components |
| Announcement bar | Default, dismissed | Production components |
| In-grid promo tile | Default | Production components |
| Video testimonial card | Rest, playing | Production components |
| Modal Card | 5 breakpoints | Modal & catalogue card |
| Catalogue card | Default, Small | Modal & catalogue card |
Navigation, forms & utility
| Component | Variants | Documented in |
|---|---|---|
| Main navigation bar | State × Type × layout — 8 | Navigation & footer |
| Navigation-bar, Navigation-bar >992 | type × state | Navigation & footer |
| navigation-bar-with-menus | State, per width — 12 | Navigation & footer |
| Ronixmag Top Navigation Bar | State, per width — 10 | Navigation & footer |
| Mega Menu | Size × State — 12 | Navigation & footer |
| Desktop List Item | — | Navigation & footer |
| Mobile menu | State — 10 | Navigation & footer |
| Menu, Large-frame-menu, Small-frame-menu | Size × State | Navigation & footer |
| Search box, Search-dropdown, Search-product-block | various | Navigation & footer |
| Footer | Type — 6 breakpoints | Navigation & footer |
| Footer Collaps Button | Close, Open | Navigation & footer |
| Flag | 30+ countries | Navigation & footer |
| Form-Contact us | 6 widths | Form |
| Ronix - input box | — | Form |
| Button | Primary, Secondary, Ghost, Disabled | Banner, buttons & cards |
| tab-list | type × State × button-typpe — 24 | Additional components |
| Icon-Card | 10 icons | Additional components |