מפריד בגובה פיקסל שנמס בקצוות במקום להיחתך.
מתי משתמשים: הפרדות עדינות בין בלוקים בלי משקל ויזואלי.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
בלוק תוכן ראשון
בלוק תוכן שני
וגרסת ה-accent העדינה
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית.
/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.center{text-align:center}
/* B10 · קווי שיער (Hairlines) */
.hl{height:1px;background:linear-gradient(90deg,transparent,#b9bbd4,transparent);margin:40px var(--gutter, clamp(24px, 5vw, 96px))}
.hl.accent{background:linear-gradient(90deg,transparent,var(--accent, #4a3aff),transparent)}<div class="stage tight center"><p>בלוק תוכן ראשון</p><div class="hl"></div><p>בלוק תוכן שני</p><div class="hl accent"></div><p>וגרסת ה-accent העדינה</p></div>