טקסט מול ויז'ואל, 50/50 או 60/40 (טקסט רחב יותר כשהוא העיקר). המבנה הבסיסי של האינטרנט.
מתי משתמשים: הסבר עם המחשה, אודות, פיצ'ר יחיד.
הדמו כאן ניטרלי בכוונה ומגדיר מבנה בלבד: גריד, יחסים וקריסה. צבעים, רדיוסים, גופנים וריווח נלקחים מהעור של הפרויקט. מתג הרוחב למעלה מצמצם את המכולה ולא את חלון הדפדפן, ולכן הקריסה שרואים כאן היא הקריסה האמיתית.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית.
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}
/* C01 · חצי-חצי קלאסי */
.cwrap{container-type:inline-size}
.cstage{--pad:clamp(20px,4cqi,64px);padding:clamp(36px,5cqi,80px) var(--pad)}
.tx{height:11px;border-radius:6px;background:#dfe0ea;margin:9px 0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-size:clamp(22px,2.6cqi,34px);font-weight:700;margin:0 0 10px;line-height:1.2}
.lead{color:var(--muted, #6a6d85);margin:0 0 14px;font-size:15px;line-height:1.6}
.btn{display:inline-block;background:var(--ink, #16182b);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;margin-top:12px}
.cwrap .ph{font-size:clamp(14px,1.6cqi,20px)}
.c1{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,4cqi,64px);align-items:center}
.c1 .ph{aspect-ratio:4/3;border-radius:var(--r, 14px)}
@container (max-width:767px){.c1{grid-template-columns:1fr}}<div class="cwrap cstage"><div class="c1">
<div><h3 class="ttl">כותרת הסקשן, שתי שורות לכל היותר</h3><div class="tx l"></div><div class="tx m"></div><div class="tx s"></div><span class="btn">פעולה</span></div>
<div class="ph ph-a"><span class="ph-l">ויז'ואל</span></div>
</div></div>