Asteria Dashboard Components

Discover 2 components available in Asteria Dashboard

Section Projects Cards

Component from Asteria Dashboard Builder
<div class="row removable mt-4">
    <div class="col-12 col-xl-4 drop-zone">
        <div class="card draggable mb-4" draggable="true">
            <div class="card-header p-3 pb-0">
            <div class="row">
                <div class="col-8 d-flex">
                <div>
                    <img src="https://images.unsplash.com/photo-1553640582-f9d3a73acb6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU2fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
                </div>
                <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">Lucas Prila</h6>
                    <p class="text-xs"><b>Fixed price</b> - posted 2h ago</p>
                </div>
                </div>
                <div class="col-4">
                <span class="badge bg-gradient-info ms-auto float-end">NEW</span>
                </div>
            </div>
            </div>
            <div class="card-body p-3 pt-1">
            <h6>Ruby developer needed.</h6>
            <p class="text-sm">The website was initially built in PHP, I need a professional ruby programmer to shift it.</p>
            <div class="d-flex bg-gray-100 border-radius-lg p-3">
                <h4 class="my-auto">
                <span class="text-secondary text-sm me-1">$</span>3,000<span class="text-secondary text-sm ms-1">/ month </span>
                </h4>
                <a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
            </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-4 drop-zone">
        <div class="card draggable mb-4" draggable="true">
            <div class="card-header p-3 pb-0">
            <div class="row">
                <div class="col-8 d-flex">
                <div>
                    <img src="https://images.unsplash.com/photo-1561828970-daff2303fe58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
                </div>
                <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">Miriam Jhonson</h6>
                    <p class="text-xs"><b>Hourly</b> - posted 3h ago</p>
                </div>
                </div>
            </div>
            </div>
            <div class="card-body p-3 pt-1">
            <h6>Website redesign needed.</h6>
            <p class="text-sm">We would like a progressive designer to create website designs for our new corporate website.</p>
            <div class="d-flex bg-gray-100 border-radius-lg p-3">
                <h4 class="my-auto">
                <span class="text-secondary text-sm me-1">$</span>24,5<span class="text-secondary text-sm ms-1">/ hour </span>
                </h4>
                <a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
            </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-4 drop-zone">
        <div class="card draggable mb-4" draggable="true">
            <div class="card-header p-3 pb-0">
            <div class="row">
                <div class="col-8 d-flex">
                <div>
                    <img src="https://images.unsplash.com/photo-1630594384259-aa5b88fb4a2a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjIyfHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
                </div>
                <div class="d-flex flex-column justify-content-center">
                    <h6 class="mb-0 text-sm">Andrew Michael</h6>
                    <p class="text-xs"><b>Hourly</b> - posted 4h ago</p>
                </div>
                </div>
            </div>
            </div>
            <div class="card-body p-3 pt-1">
            <h6>Looking for a Three.js Developer.</h6>
            <p class="text-sm">I'm looking for an expert three.js developer to develop our website.</p>
            <div class="d-flex bg-gray-100 border-radius-lg p-3">
                <h4 class="my-auto">
                <span class="text-secondary text-sm me-1">$</span>15<span class="text-secondary text-sm ms-1">/ hour </span>
                </h4>
                <a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
            </div>
            </div>
        </div>
    </div>
</div>

Section Projects Background Image

Component from Asteria Dashboard Builder