נקודה ירוקה עם גלי דופק. אינדיקטור חי שמושך תשומת לב בעדינות.
מתי משתמשים: זמין עכשיו, שידור חי, סטטוס מערכת.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --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}
/* B11 · נקודת דופק (Pulse) */
.pulse-row{display:inline-flex;align-items:center;gap:10px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:999px;padding:10px 22px}
.pdot2{position:relative;width:10px;height:10px;border-radius:50%;background:#12b76a}
.pdot2::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #12b76a;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.pdot2::after{animation:none;display:none}}<div class="stage tight center"><span class="pulse-row"><span class="pdot2"></span>זמינים לפרויקט חדש</span></div>