Objects Media CSS Framework

Objects, Media, CSS und Framework sind hier wichtig, weil Bild und Text fast immer zusammen vorkommen.

Das Media-Objekt ist das alte Arbeitstier: links ein Bild oder Icon, rechts Text. Zum Beispiel bei Profilkarten, Kommentaren, Feature-Listen, oder bei einem Download-Block. Der Trick ist, dass es flexibel bleiben muss. Auf breiten Screens nebeneinander, auf mobilen Screens untereinander, ohne dass du neue Klassen erfindest. Ein gutes Framework bietet dafür ein neutrales Object, das sich überall einsetzen lässt.

<div class="o-media">
  <img class="o-media__img" src="..." alt="Icon">
  <div class="o-media__body">
    <h3>Titel</h3>
    <p>Beschreibung mit normalem HTML.</p>
  </div>
</div>

Warum das ein Object ist

Es ist Struktur, nicht Design. Das Objekt sagt: Bild und Text gehören zusammen, mit einem festen Abstand. Ob das Bild rund ist oder eckig, ist nicht Aufgabe des Objects. Du willst es in einem Wiki-Look, in einer App, oder in einer Landingpage nutzen können. Darum bleibt es neutral und bekommt erst durch Components oder Utilities den letzten Schliff.

.o-media{ display:flex; gap:12px; align-items:flex-start; }
.o-media__img{ width:48px; height:48px; border:1px solid #c8ccd1; border-radius:12px; }
@media (max-width:560px){ .o-media{ flex-direction:column; } }

Sauberer Aufbau spart Zeit

Wenn du einmal so ein Muster sauber hast, baust du sehr schnell Listen von „Media“-Einheiten. Das macht Prototypen flott, aber es hilft auch im produktiven Code. Ich hab schon erlebt, dass Teams drei verschiedene Varianten hatten, nur weil es am Anfang „mal eben“ gelöst wurde. Das rächt sich später, und man hat dann die Wahl zwischen Chaos oder Umbau, beides ist nervig.