ציר תהליך

הקו המחבר הוא פסאודו-אלמנט על כל שלב חוץ מהאחרון, ולא אלמנט נפרד. לכן הוא לא מתנתק כשמוסיפים שלב או כשהטקסט באחד השלבים ארוך יותר. הרשימה היא ol אמיתית, כך שגם בלי עיצוב הסדר נשמר. ציר תהליך הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בתהליך, אודות ובלי ספריות. באותה סדרה יש גם שאלות נפוצות, קרוסלת המלצות ורצועת לוגואים.

רכיב · תהליך · אודות · בלי ספריות

<!-- ציר תהליך: הוסיפו li נוסף, הקו מסתדר לבד -->
<style>
  .klix-steps { margin: 0; padding: 0; list-style: none; max-width: 24rem }
  .klix-steps li { position: relative; padding-inline-start: 2rem; padding-bottom: 1.5rem }
  .klix-steps li:last-child { padding-bottom: 0 }
  /* הקו נמתח מתחת לעיגול עד השלב הבא. האחרון לא מקבל אותו */
  .klix-steps li:not(:last-child)::before { content: ""; position: absolute;
    inset-inline-start: .65rem; top: 1.5rem; bottom: .25rem; width: 1px;
    background: rgba(255,255,255,.15) }
  .klix-steps b { position: absolute; inset-inline-start: 0; top: .25rem;
    display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
    background: #334155; color: #cbd5e1; font-size: .75rem; font-weight: 900 }
  .klix-steps li[data-done="1"] b { background: #10b981; color: #fff }
  .klix-steps h3 { margin: 0; font-size: 1rem }
  .klix-steps p { margin: .25rem 0 0; font-size: .875rem; line-height: 1.6; color: #94a3b8 }
</style>

<ol class="klix-steps">
  <li data-done="1">
    <b aria-hidden="true">✓</b>
    <h3>שיחת אפיון</h3>
    <p>עשרים דקות להבין מה צריך ומה לא.</p>
  </li>
  <li data-done="1">
    <b aria-hidden="true">✓</b>
    <h3>הצעת מחיר</h3>
    <p>מחיר סופי, בלי הפתעות בהמשך.</p>
  </li>
  <li>
    <b aria-hidden="true">3</b>
    <h3>בנייה</h3>
    <p>גרסה ראשונה לצפייה תוך שבוע.</p>
  </li>
  <li>
    <b aria-hidden="true">4</b>
    <h3>עלייה לאוויר</h3>
    <p>כולל חיבור דומיין והדרכה קצרה.</p>
  </li>
</ol>