Office card

A branch contact card — photograph, office name, postal address, phone and email. It is a distinct component from the news card, but the library gives both the same name.

Relationship to the news card

The office card and the news card share the library name News Card - EN. They are separate component sets with different content and different properties — check which one is in use before building against it.

How they differ

Content — address lines here, a date on the news card
Property names — type here, Size there
Grids — 2 and 3 column here, 2, 3 and 4 there
Height — every office variant is 26 px taller

Variant	News card page	Office card page	Difference
2-column, Extra	656 × 508	656 × 534	+26
2-column, Default	566 × 458	566 × 484	+26
3-column, Extra	434 × 405	434 × 431	+26
3-column, Default	374 × 371	374 × 397	+26
4-column	324 × 343	—	not offered

Fig. 1Identical widths, consistently taller bodies — the address block needs the extra room.

Anatomy

Photograph on top, then a body at Padding/Medium with Padding/X-Small (8 px) between elements.

Body

Office name — Title 4 in-container, 20/22 ExtraBold
Address, phone and email — Body 2, 14/18 Regular, one line each
A small tag at the foot — Caption 2, 10/12

Phone and email are plain text in the library. In markup they should be tel: and mailto: links — on a contact card that is the whole point of the component.

Fig. 3State=Hover — the same brand border and background lift used by the news and product cards.

Grid

Two or three across, with an 8 px gap — no 4-column variant, because the address block does not compress below about 300 px without wrapping badly.

Below 768 px the grid drops to two columns, and at 358 px the cards reach 159 px wide. An address at 14 px in 159 px of space wraps to five or six lines, which is why these cards are the tallest in the system at Small.

Breakpoint	Container	Columns	Card
Large	1320	3	434 × 431
Large	1140	3	374 × 397
Medium	960	3	314 × 369
Medium	720	2	356 × 375
Small	540	2	266 × 330
Small	326	2	159 × 318

Fig. 4Card heights barely move across breakpoints — the address block holds them up.

Live grid

Fig. 5Three offices. The foot tag stays aligned because it uses `margin-top: auto`.

Markup

Unlike the news card, this one is not a single anchor — it contains two independent links, so wrapping it in an outer anchor would nest them. Use <address> for the contact block.

<div class="rx-office">
  <div class="rx-office__media"><img src="germany.jpg" alt=""></div>
  <div class="rx-office__body">
    <h3 class="rx-office__title">Ronix Germany</h3>
    <address class="rx-office__address">
      Am Ziegelturm 9, 63571, Gelnhausen, Germany<br>
      <a href="tel:+4960514989050">+49 6051 4989050</a><br>
      <a href="mailto:sales@ronixtools.de">sales@ronixtools.de</a>
    </address>
    <span class="rx-office__tag">Europe</span>
  </div>
</div>