Skip to main navigation Skip to main content Skip to page footer

KKS-36 — Text / Text+Image

Figma 258-1483 puts Text+Image on a one-third image / two-thirds text column system, not the 50/50 this distribution inherited. The two instances in that node disagree on image size but agree on the grid underneath:

A  image left   305x457 @ Left 125 | gap 65 | text 681 @ Left 495  -> 1051
B  image right  363x366 @ Left 815 | gap 56 | text 660 @ Left  99  -> 1079

B sums to 1079 against the 1080 content box, so B is the one that fills the grid: image 363 ≈ 1/3 of 1080 = 360, text 660 ≈ 1080 − 360 − 56 = 664. A then stops being a contradiction — its image is 305 wide centred in the same 360 column, which puts its left edge at 100 + (360−305)/2 = 127.5, and Figma has it at 125.

The old value was calc(50% - (70px / 2)) from b2aecae6 (LA-2), with the 70px from e0f9efbb (LA-48 »Row gap bitte auf 70 erhöhen«) — both sibling-project commits that came with the distribution. No KKS ticket ever chose it.

.frame-fullwidth keeps its own 50/50: that is the TT-338 cover-image layout, a different design, and it outranks this on specificity.

Measure it:

var f = document.querySelector('#c93620'), g = f.querySelector('.textpic-gallery'), t = f.querySelector('.textpic-text');
[t.getBoundingClientRect().width, g.getBoundingClientRect().width].map(Math.round).join(' | ');
// expect "664 | 360" at a 1280 viewport

Gemeinsam die klinische Forschung weiterentwickeln

Figma instance B — text left, image right. Built as text 664 at x 100, gutter 56, image 360 at x 820, summing to the 1080 content box. Figma draws 660 / 56 / 363 @ 815.

Header layout 3 renders the H3 the design uses here — Figtree 700 at 39px. The heading level is an editor choice per element, not a stylesheet value, which is why KKS-36 changed no typography.

radius-top-right is ticked to show textpic still carries KKS-20/26’s shape options. In Figma the rounded corner sits on the outer edge, away from the text: bottom-left when the image is left, top-right when it is right.

Fachgruppen und übergreifende Projektgruppen im KKS-Netzwerk

Figma instance A — image left, text right, mirrored from B by imageorient 26 alone. The column widths are identical; only the order flips.

A is the instance whose raw numbers look wrong (1051, not 1080) until you notice its image does not fill its column: 305 wide centred in 360. That is a property of the crop, not of the grid, and it is why the system was derived from B.

Text ohne Bild

The other half of the ticket. A plain Text element spans the full 1080 content box and takes its typography from KKS-23 — nothing in KKS-36 touches it, and this is here as the control that proves so.

Body copy renders at 18px / 27px (line-height 1.5) in $body-color, which is what KKS-17 and KKS-23 established. If this block ever stops matching the text column of the two elements above, the cause is in those tickets, not here.

privacy settings
KKSN KKSN