Design System — User Interface

Ronix Design System  /  Components  /  Information cards

Information cards

Four related components for marketing content: the value card, its simple variant, the informative card, and the clickable social card. This page also carries the only written component guidelines in the whole kit.

Value card

A selling point: icon, heading, a short paragraph, and optionally a product photograph bleeding off the right edge.

Size × Type

  • With image — 656×300 Extra, 566×300 Default
  • Without image — 434×258 Extra, 374×258 Default

The two Types are laid out differently, not just sized differently. With an image, the icon sits inline beside the heading and the text is constrained to the left half. Without one, the icon becomes a large mark stacked above the heading.

$  Quality

Ronix tools proudly carry the CE mark, signifying compliance with stringent European safety, health, and environmental standards.

Fig. 1Size=Extra, Type=with Image — the photograph bleeds off the right.
$ Reasonable Pricing

Ronix is committed to delivering exceptional quality while ensuring affordability for customers with different needs.

Fig. 2Type=With out Image — icon stacked above the heading.
$ Reasonable Pricing

Ronix is committed to delivering exceptional quality while ensuring affordability.

Fig. 3Size=Default, the narrower of the two.

Informative card

A circular icon, a heading underlined by a Stroke/1 rule, and a paragraph. Two Types crossed with Rest and Hover.

Hover is the standard card treatment — brand border plus a lift to background/2 — the same as the product, news and office cards.

Note that Type=Defualt (221×296) is taller than Type=Extra (257×272), because the narrower card wraps its heading onto two lines.

Get the Latest News Here We are committed to sustainability and environmental responsibility. Our manufacturing processes adhere to the highest.
Fig. 4Type=Extra, State=Rest.
Get the Latest News Here We are committed to sustainability and environmental responsibility. Our manufacturing processes adhere to the highest.
Fig. 5Type=Defualt, State=Hover. Narrower and taller.

Clickable card

The social follow card: platform icon, name, a one-line invitation and a dark action button. Two sizes — 180×278 Default and 180×200 Small — each with Rest and Hover.

Icons

Six platforms ship in two sizes each: Instagram, TikTok, Facebook, YouTube, LinkedIn and X (Twitter), at 64 px and 40 px.

The dark button

The action sits on background/5 — and this is where that token gets interesting. It is #0a0a0a, near-black, not a continuation of the light grey ramp that steps 1 to 4 form.

Fig. 6Two Default cards and one Small. Hover any of them — the whole card is the link.

Usage rules

The clickable card carries a set of rules governing which of its parts are required and how it behaves when they are omitted.

The rules are set out below.

#Rule
1 The card may omit the description, the button, or the icon.
2 The card itself can carry a link and be clickable.
3 If fewer than six cards are needed, the row should be responsive rather than a carousel — and drop the carousel buttons.
4 The CMS already lets an editor choose the card colour. When the card is clickable, the editor should also be able to choose a hover colour, so the user can tell it is clickable.
Fig. 7The four GuideLine rules.

Optional parts

Seven annotated screenshots enumerate which parts can be dropped. Every combination below is legitimate — the component degrades to a bare heading.

ConfigurationIconDescriptionButton
Has everything✓✓✓
No description✓—✓
No button✓✓—
Has description—✓—
Has button——✓
Has icon✓——
Main heading only———
Fig. 8The card’s only required element is its heading.

A clickable card must look clickable. Where the card carries a link, give it a hover colour distinct from its resting colour. Rule 4 above makes this an editor-level setting, so the hover colour is chosen alongside the card colour rather than left to default.

Responsive behaviour

The clickable card row is specified in more detail than anything else in the system — seven breakpoints from 1920 down to 358, each with several column counts.

At 992 and 768 the row gains a pair of 36 px carousel chevrons in the section title. Below that it wraps instead.

BreakpointContainerCards acrossCarousel
192013206, or 3 + 3no
140013202, 3, 4, 5 or 6no
120011403 or 6no
9929603 or 6yes — 36 px chevrons
7687203 or 6yes — 36 px chevrons
5765402, wrapping to 3 rowsno
3583261, six rowsno
Fig. 9The carousel only appears at 992 and 768 — the widths where six cards neither fit nor wrap tidily.

Markup

Only the heading is required. Everything else is optional per the library’s own guidelines, so the markup should tolerate any subset. 

<!-- Everything -->
<a class="rx-clickable" href="https://instagram.com/ronixtools">
  <span class="rx-clickable__icon"><svg>…</svg></span>
  <span class="rx-clickable__title">Instagram</span>
  <span class="rx-clickable__text">Be Part of Our Journey</span>
  <span class="rx-clickable__action">Follow</span>
</a>

<!-- Heading only — still valid -->
<a class="rx-clickable" href="…">
  <span class="rx-clickable__title">Instagram</span>
</a>