UHasselt Component Library

App Steps 

<div class='mol-steps'>
    <ul class='steps'>
        <li id=''>
            <div class='vector-end'>
                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='75' viewBox='0 0 20 75' fill='none'>
                    <g clip-path='url(#clip0_609:1244)'>
                        <path d='M17.4589 1H4.99433C4.31275 1.00118 3.64278 1.17093 3.04794 1.49316C2.4531 1.8154 1.95312 2.27943 1.5954 2.84125C1.23769 3.40308 1.03409 4.04408 1.00392 4.70348C0.973754 5.36287 1.11801 6.0188 1.42302 6.60906L13.6375 30.2756C13.9141 30.8127 14.058 31.4047 14.058 32.0048C14.058 32.605 13.9141 33.197 13.6375 33.7341L1.42302 57.4006C1.12032 57.9905 0.977909 58.6454 1.00923 59.3034C1.04054 59.9614 1.24456 60.6009 1.60201 61.1613C1.95946 61.7217 2.45853 62.1847 3.0521 62.5064C3.64566 62.8281 4.31412 62.998 4.99433 63H17.4589H21V1H17.4589Z' stroke-miterlimit='10'></path>
                    </g>
                    <defs>
                        <clipPath id='clip0_609:1244'>
                            <rect width='20' height='75' fill='white'></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <span>
                <strong>
                    Stap 1
                </strong>
                <div>
                    Periode afwezigheid
                </div>
            </span>
            <div class='vector-start'>
                <svg xmlns='http://www.w3.org/2000/svg' width='22' height='75' viewBox='0 0 22 75' fill='none'>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'></path>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1' stroke-miterlimit='10'></path>
                </svg>
            </div>
        </li>
        <li id=''>
            <div class='vector-end'>
                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='75' viewBox='0 0 20 75' fill='none'>
                    <g clip-path='url(#clip0_609:1244)'>
                        <path d='M17.4589 1H4.99433C4.31275 1.00118 3.64278 1.17093 3.04794 1.49316C2.4531 1.8154 1.95312 2.27943 1.5954 2.84125C1.23769 3.40308 1.03409 4.04408 1.00392 4.70348C0.973754 5.36287 1.11801 6.0188 1.42302 6.60906L13.6375 30.2756C13.9141 30.8127 14.058 31.4047 14.058 32.0048C14.058 32.605 13.9141 33.197 13.6375 33.7341L1.42302 57.4006C1.12032 57.9905 0.977909 58.6454 1.00923 59.3034C1.04054 59.9614 1.24456 60.6009 1.60201 61.1613C1.95946 61.7217 2.45853 62.1847 3.0521 62.5064C3.64566 62.8281 4.31412 62.998 4.99433 63H17.4589H21V1H17.4589Z' stroke-miterlimit='10'></path>
                    </g>
                    <defs>
                        <clipPath id='clip0_609:1244'>
                            <rect width='20' height='75' fill='white'></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <span>
                <strong>
                    Stap 2
                </strong>
                <div>
                    Afwezigheid examens
                </div>
            </span>
            <div class='vector-start'>
                <svg xmlns='http://www.w3.org/2000/svg' width='22' height='75' viewBox='0 0 22 75' fill='none'>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'></path>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1' stroke-miterlimit='10'></path>
                </svg>
            </div>
        </li>
        <li id='current'>
            <div class='vector-end'>
                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='75' viewBox='0 0 20 75' fill='none'>
                    <g clip-path='url(#clip0_609:1244)'>
                        <path d='M17.4589 1H4.99433C4.31275 1.00118 3.64278 1.17093 3.04794 1.49316C2.4531 1.8154 1.95312 2.27943 1.5954 2.84125C1.23769 3.40308 1.03409 4.04408 1.00392 4.70348C0.973754 5.36287 1.11801 6.0188 1.42302 6.60906L13.6375 30.2756C13.9141 30.8127 14.058 31.4047 14.058 32.0048C14.058 32.605 13.9141 33.197 13.6375 33.7341L1.42302 57.4006C1.12032 57.9905 0.977909 58.6454 1.00923 59.3034C1.04054 59.9614 1.24456 60.6009 1.60201 61.1613C1.95946 61.7217 2.45853 62.1847 3.0521 62.5064C3.64566 62.8281 4.31412 62.998 4.99433 63H17.4589H21V1H17.4589Z' stroke-miterlimit='10'></path>
                    </g>
                    <defs>
                        <clipPath id='clip0_609:1244'>
                            <rect width='20' height='75' fill='white'></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <span>
                <strong>
                    Stap 3
                </strong>
                <div>
                    Afwezigheid onderwijsactiviteit
                </div>
            </span>
            <div class='vector-start'>
                <svg xmlns='http://www.w3.org/2000/svg' width='22' height='75' viewBox='0 0 22 75' fill='none'>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'></path>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1' stroke-miterlimit='10'></path>
                </svg>
            </div>
        </li>
        <li id=''>
            <div class='vector-end'>
                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='75' viewBox='0 0 20 75' fill='none'>
                    <g clip-path='url(#clip0_609:1244)'>
                        <path d='M17.4589 1H4.99433C4.31275 1.00118 3.64278 1.17093 3.04794 1.49316C2.4531 1.8154 1.95312 2.27943 1.5954 2.84125C1.23769 3.40308 1.03409 4.04408 1.00392 4.70348C0.973754 5.36287 1.11801 6.0188 1.42302 6.60906L13.6375 30.2756C13.9141 30.8127 14.058 31.4047 14.058 32.0048C14.058 32.605 13.9141 33.197 13.6375 33.7341L1.42302 57.4006C1.12032 57.9905 0.977909 58.6454 1.00923 59.3034C1.04054 59.9614 1.24456 60.6009 1.60201 61.1613C1.95946 61.7217 2.45853 62.1847 3.0521 62.5064C3.64566 62.8281 4.31412 62.998 4.99433 63H17.4589H21V1H17.4589Z' stroke-miterlimit='10'></path>
                    </g>
                    <defs>
                        <clipPath id='clip0_609:1244'>
                            <rect width='20' height='75' fill='white'></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <span>
                <strong>
                    Stap 4
                </strong>
                <div>
                    Attest toevoegen
                </div>
            </span>
            <div class='vector-start'>
                <svg xmlns='http://www.w3.org/2000/svg' width='22' height='75' viewBox='0 0 22 75' fill='none'>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'></path>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1' stroke-miterlimit='10'></path>
                </svg>
            </div>
        </li>
        <li id=''>
            <div class='vector-end'>
                <svg xmlns='http://www.w3.org/2000/svg' width='20' height='75' viewBox='0 0 20 75' fill='none'>
                    <g clip-path='url(#clip0_609:1244)'>
                        <path d='M17.4589 1H4.99433C4.31275 1.00118 3.64278 1.17093 3.04794 1.49316C2.4531 1.8154 1.95312 2.27943 1.5954 2.84125C1.23769 3.40308 1.03409 4.04408 1.00392 4.70348C0.973754 5.36287 1.11801 6.0188 1.42302 6.60906L13.6375 30.2756C13.9141 30.8127 14.058 31.4047 14.058 32.0048C14.058 32.605 13.9141 33.197 13.6375 33.7341L1.42302 57.4006C1.12032 57.9905 0.977909 58.6454 1.00923 59.3034C1.04054 59.9614 1.24456 60.6009 1.60201 61.1613C1.95946 61.7217 2.45853 62.1847 3.0521 62.5064C3.64566 62.8281 4.31412 62.998 4.99433 63H17.4589H21V1H17.4589Z' stroke-miterlimit='10'></path>
                    </g>
                    <defs>
                        <clipPath id='clip0_609:1244'>
                            <rect width='20' height='75' fill='white'></rect>
                        </clipPath>
                    </defs>
                </svg>
            </div>
            <span>
                <strong>
                    Stap 5
                </strong>
                <div>
                    Overzicht
                </div>
            </span>
            <div class='vector-start'>
                <svg xmlns='http://www.w3.org/2000/svg' width='22' height='75' viewBox='0 0 22 75' fill='none'>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'></path>
                    <path d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1' stroke-miterlimit='10'></path>
                </svg>
            </div>
        </li>
    </ul>
</div>
 
<div class='mol-steps'>
    <ul class='steps'>
        {{#each steps}}
            <li id='{{step-status}}'>
                <div class='vector-end'>
                    <svg
                        xmlns='http://www.w3.org/2000/svg'
                        width='20'
                        height='75'
                        viewBox='0 0 20 75'
                        fill='none'
                    >
                        <g clip-path='url(#clip0_609:1244)'>
                            <path
                                d='M17.4589 1H4.99433C4.31275 1.00118 3.64278 1.17093 3.04794 1.49316C2.4531 1.8154 1.95312 2.27943 1.5954 2.84125C1.23769 3.40308 1.03409 4.04408 1.00392 4.70348C0.973754 5.36287 1.11801 6.0188 1.42302 6.60906L13.6375 30.2756C13.9141 30.8127 14.058 31.4047 14.058 32.0048C14.058 32.605 13.9141 33.197 13.6375 33.7341L1.42302 57.4006C1.12032 57.9905 0.977909 58.6454 1.00923 59.3034C1.04054 59.9614 1.24456 60.6009 1.60201 61.1613C1.95946 61.7217 2.45853 62.1847 3.0521 62.5064C3.64566 62.8281 4.31412 62.998 4.99433 63H17.4589H21V1H17.4589Z'
                                stroke-miterlimit='10'
                            ></path>
                        </g>
                        <defs>
                            <clipPath id='clip0_609:1244'>
                                <rect
                                    width='20'
                                    height='75'
                                    fill='white'
                                ></rect>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
                <span>
                    <strong>
                        {{step-text}}
                    </strong>
                    <div>
                        {{step-description}}
                    </div>
                </span>
                <div class='vector-start'>
                    <svg
                        xmlns='http://www.w3.org/2000/svg'
                        width='22'
                        height='75'
                        viewBox='0 0 22 75'
                        fill='none'
                    >
                        <path
                            d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'
                        ></path>
                        <path
                            d='M1 63C1.82391 62.9987 2.6312 62.7978 3.33174 62.4198C4.03229 62.0417 4.59852 61.5014 4.96722 60.8591L20.5249 33.7341C20.8372 33.1983 21 32.6058 21 32.0048C21 31.4039 20.8372 30.8114 20.5249 30.2756L4.96722 3.15062C4.60006 2.50649 4.03449 1.96416 3.33383 1.58433C2.63317 1.20451 1.82508 1.00218 1 1'
                            stroke-miterlimit='10'
                        ></path>
                    </svg>
                </div>
            </li>
        {{/each}}
    </ul>
</div>
 
{
  "steps": [
    {
      "step-status": "",
      "step-text": "Stap 1",
      "step-description": "Periode afwezigheid"
    },
    {
      "step-status": "",
      "step-text": "Stap 2",
      "step-description": "Afwezigheid examens"
    },
    {
      "step-status": "current",
      "step-text": "Stap 3",
      "step-description": "Afwezigheid onderwijsactiviteit"
    },
    {
      "step-status": "",
      "step-text": "Stap 4",
      "step-description": "Attest toevoegen"
    },
    {
      "step-status": "",
      "step-text": "Stap 5",
      "step-description": "Overzicht"
    }
  ]
}
  • Content: 
    .mol-steps {
    @apply bg-white p-8 overflow-x-auto;

    .steps {
        @apply flex flex-row space-x-6;

        li {
            @apply relative block p-2 pr-6 pl-6 min-w-[280px]  border border-green bg-green bg-opacity-20;
            .vector-start {
                @apply absolute right-[-20px] top-0;

                svg {
                    transform: scale(1.05);
                }

                svg path {
                    @apply stroke-current text-green;

                    fill: #ccebe4;
                }
            }

            .vector-end {
                @apply absolute left-[-15px] top-0;

                svg {
                    transform: scale(1.05);
                }

                svg path {
                    @apply stroke-current text-green;

                    fill: #ccebe4;
                }
            }

            &#current {
                @apply border-red bg-red bg-opacity-20;

                strong {
                    @apply text-red;
                }

                svg path {
                    @apply stroke-current text-red;
                    fill: #f9d5d5;
                }
            }

            &#current ~ li {
                @apply border-gray-800 bg-white text-gray-800;

                strong {
                    @apply text-black font-medium;
                }

                svg path {
                    @apply stroke-current text-gray-800;
                    fill: #ffffff;
                }
            }

            strong {
                @apply text-green font-bold;
            }
        }
    }
}
  • URL: /components/raw/app-steps/app-steps.css
  • Filesystem Path: src\components\08-app-molecules\app-steps\app-steps.css
  • Size: 1.7 KB

No notes defined.