סקשן מיושר לימין שהכפתור שלו ממורכז, או להפך: הכפתור לא שייך לאף ציר של הסקשן.
מתי משתמשים: כל סקשן עם כפתור סוגר.
שני חלונות, אותו בלוק בדיוק: מימין הטעות, משמאל התיקון. התוכן ניטרלי בכוונה. הכלל שנשבר, הסיבה, התיקון ואיך מזהים אותו בעין נמצאים בכפתור ההעתקה למטה, והם מה שנכנס לצ'קליסט לפני מסירה.
כותרת מיושרת לימין
הפעולהכותרת וטקסט על ציר הימין, כפתור במרכז. הוא לא שייך לכלום.
כותרת מיושרת לימין
הפעולההכפתור על אותו ציר של הכותרת. הסקשן נקרא כיחידה אחת.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* A02 · כפתור תלוי באוויר */
.cwrap{container-type:inline-size}
.ap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5cqi,28px);padding:clamp(24px,4cqi,56px) clamp(20px,4cqi,64px)}
.pane{position:relative;border-radius:16px;border:1px solid var(--line,#e4e4ee);background:#fff;padding:56px clamp(18px,3cqi,36px) clamp(18px,3cqi,32px);overflow:hidden;display:flex;flex-direction:column;gap:14px}
.pane .lbl{position:absolute;top:14px;inset-inline-start:14px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;z-index:5;line-height:1.3}
.bad .lbl{background:#ffe3e3;color:#a11414}
.good .lbl{background:#e3f7e8;color:#176b2c}
.pane .cap{margin:auto 0 0;padding-top:12px;border-top:1px dashed var(--line,#e4e4ee);font-size:13px;color:var(--muted,#6a6d85);line-height:1.45}
.demo{flex:1;display:flex;flex-direction:column;gap:10px;position:relative}
.tx{height:10px;border-radius:6px;background:#dfe0ea;margin:0}
.tx.s{width:38%}.tx.m{width:62%}.tx.l{width:86%}
.ttl{font-weight:700;font-size:clamp(18px,2cqi,24px);line-height:1.15;margin:0}
.ph{background:#dfe0ea;border-radius:10px;display:grid;place-items:center;color:#6a6d85;font-size:13px;font-weight:600;min-height:90px}
.btn{display:inline-block;padding:10px 18px;border-radius:10px;background:var(--ink,#16182b);color:#fff;font-weight:600;font-size:14px;line-height:1.2;width:max-content}
@container (max-width:767px){.ap{grid-template-columns:1fr}}
.a02 .bad .btn{align-self:center}
.a02 .good .btn{align-self:flex-start}<div class="cwrap a02"><div class="ap"><div class="pane bad"><span class="lbl">ככה לא</span><div class="demo"><p class="ttl">כותרת מיושרת לימין</p><div class="tx l"></div><div class="tx m"></div><div class="tx s"></div><span class="btn">הפעולה</span></div><p class="cap">כותרת וטקסט על ציר הימין, כפתור במרכז. הוא לא שייך לכלום.</p></div><div class="pane good"><span class="lbl">ככה כן</span><div class="demo"><p class="ttl">כותרת מיושרת לימין</p><div class="tx l"></div><div class="tx m"></div><div class="tx s"></div><span class="btn">הפעולה</span></div><p class="cap">הכפתור על אותו ציר של הכותרת. הסקשן נקרא כיחידה אחת.</p></div></div></div>