Dashboard widget component

<div class="component o-dashboardWidget h-100">
    <div class="component-content h-100">
        <div class="card rounded bg-white h-100 d-flex flex-column">
            <div class="d-flex align-items-center card-header">
                <div class="a-circle bg-green o-dashboardWidget__icon mr-2 mr-xl-3">
                    <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.90917 7.73023C6.86101 7.73023 7.68524 7.38884 8.35868 6.71529C9.03213 6.04184 9.37351 5.21784 9.37351 4.26588C9.37351 3.31426 9.03213 2.49015 8.35857 1.81648C7.68502 1.14314 6.8609 0.801758 5.90917 0.801758C4.95722 0.801758 4.13321 1.14314 3.45977 1.81659C2.78632 2.49004 2.44482 3.31415 2.44482 4.26588C2.44482 5.21784 2.78632 6.04195 3.45988 6.7154C4.13343 7.38873 4.95754 7.73023 5.90917 7.73023Z" fill="white" />
                        <path d="M11.9709 11.8614C11.9515 11.5811 11.9122 11.2754 11.8544 10.9525C11.796 10.6273 11.7208 10.3198 11.6308 10.0388C11.5379 9.74829 11.4115 9.46144 11.2552 9.18656C11.093 8.90124 10.9025 8.6528 10.6888 8.44837C10.4652 8.23449 10.1916 8.06254 9.87508 7.93711C9.5597 7.81234 9.2102 7.74913 8.83633 7.74913C8.6895 7.74913 8.54751 7.80938 8.27328 7.98792C8.1045 8.09798 7.90709 8.22527 7.68674 8.36607C7.49833 8.48612 7.24308 8.59859 6.92781 8.70043C6.62022 8.79996 6.30792 8.85044 5.99967 8.85044C5.69142 8.85044 5.37923 8.79996 5.07131 8.70043C4.75637 8.5987 4.50112 8.48623 4.31293 8.36618C4.09467 8.2267 3.89714 8.09941 3.72584 7.98781C3.45195 7.80927 3.30984 7.74902 3.16301 7.74902C2.78903 7.74902 2.43964 7.81234 2.12437 7.93722C1.80811 8.06243 1.53432 8.23438 1.31057 8.44848C1.09691 8.65302 0.906304 8.90135 0.744335 9.18656C0.588181 9.46144 0.461766 9.74818 0.368711 10.0389C0.278838 10.3199 0.203669 10.6273 0.14529 10.9525C0.0874591 11.2749 0.0481738 11.5808 0.0287507 11.8617C0.00965671 12.1369 0 12.4225 0 12.711C0 13.4618 0.238674 14.0697 0.709329 14.5179C1.17417 14.9603 1.78923 15.1847 2.53719 15.1847H9.46281C10.2108 15.1847 10.8256 14.9604 11.2906 14.5179C11.7613 14.07 12 13.4621 12 12.7109C11.9999 12.4211 11.9901 12.1353 11.9709 11.8614Z" fill="white" />
                    </svg>
                </div>
                <div>
                    <h5 class="o-dashboardWidget__title mb-0">Mijn nieuwe woning</h5>
                    <small class="text-muted d-none d-xl-block">Fase 2/6</small>
                </div>
            </div>
            <div class="d-flex align-items-center flex-column card-body -xp flex-grow-1 d-flex flex-column justify-content-between">
                <div class="d-flex align-items-center flex-column">
                    <div class="o-dashboardWidget__image position-relative mb-2 mb-xl-3">
                        <img class="rounded-circle cover" src="../../img/img12.jpg">
                    </div>
                    <h5 class="o-dashboardWidget__title mb-0 mb-xl-1">Fijn Wonen 101</h5>
                    <p class="o-dashboardWidget__title mb-3 mb-xl-4">De Klamp, Leeuwarden</p>
                </div>
                <ul class="d-flex m-phaseBar w-100">
                    <li class="-done -first"></li>
                    <li class="-done"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="-last"></li>
                </ul>
                <div class="w-75 d-none d-xl-block align-self-start">
                    <small class="text-muted -medium">Fase 2: Opties configureren</small>
                </div>
                <span class="text-muted o-dashboardWidget__text d-flex d-xl-none align-self-start">Fase 2/6</span>
            </div>
            <a href="" class="d-none d-xl-flex justify-content-center card-footer p-3">
                <span class="mb-0 pr-2 o-dashboardWidget__title">Naar bouwproces</span>
                <i class="icon-arrow-right"></i>
            </a>
        </div>
    </div>
</div>