Cards | Alina - Premium Admin Template

Allie Grater

allie.com

Card body

With supporting text below as a natural lead-in to additional content.

                                     
<div class="app-btn-list">
 <img class="card-cover" src="https://pinmeets.com/assets/images/card/card_bg.png">
    <div class="card-header d-flex justify-content-between">
    <div class="d-flex align-items-center gap-3 ">
        <span class="bg-dark h-50 w-50 d-flex-center b-r-17">
            <i class="ti ti-user f-s-20"></i>
        </span>
        <div>
            <h6 class="mb-0">Allie Grater</h6>
            <span class="text-muted">allie.com</span>
        </div>
    </div>
    <div class="form-check form-switch z-2 ">
        <input class="form-check-input toggle-code" type="checkbox" data-bs-target="#simpleCard">
    </div>
</div>

<div class="card-body">
    <h6>Card body</h6>
    <p>With supporting text below as a natural lead-in to additional content.</p>
</div>

Visit link our admin

Appointment Request

12 jan 2024 , 8am - 10am

Loice Patternson

With supporting text additional content.

                                     
<div class="app-btn-list">
 <div class="card-header bg-gradient-dark d-flex justify-content-between">
    <div class="d-flex align-items-center gap-3">
        <div class="text-white">
            <span class="text-white-500 ">Appointment Request</span>
            <h6 class="mb-0 text-white-900"><i class="ti ti-clock me-1"></i>12 jan 2024, 8am - 10am</h6>
        </div>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input toggle-code" type="checkbox" data-bs-target="#headarCard">
    </div>
</div>

<div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <span class="bg-gradient-dark h-50 w-50 overflow-hidden d-flex-center b-r-17">
                <img alt="avatar" class="img-fluid" src="https://pinmeets.com/assets/images/avatar/02.png">
            </span>
            <div class="ms-2">
                <h6 class="mb-0">Loice</h6>
                <h6 class="mb-0">Patternson</h6>
            </div>
        </div>
        <i class="ti ti-info-circle text-primary float-end f-s-24"></i>
    </div>
    <p class="mt-3 mb-0">With supporting text additional content.</p>
</div>

Insights

Last month expenses

Total Users

1000+

Active %

65%

Visits

12.4K

Alina

0025 4593 5763 4582

                                     
<div class="app-btn-list">
    <div class="card bg-white overflow-hidden position-relative equal-card border-0 ">
    <img class="card-cover" src="https://pinmeets.com/assets/images/card/card_bg.png">
    <div class="card-header d-flex justify-content-between">
        <div>
            <h4>Insights</h4>
            <p>Last month expenses</p>
        </div>
        <div class="form-check form-switch z-2">
            <input class="form-check-input toggle-code" type="checkbox" data-bs-target="#socialCard">
        </div>
    </div>

    <div class="card-body ">
        <div class="d-flex justify-content-between align-items-center">
            <div class="team-details mt-2">
                <div class="team-content-box">
                    <p class="f-w-400 text-muted mb-0">Total Users</p>
                    <p class="text-center mb-0">1000+</p>
                </div>
                <div class="team-content-box">
                    <p class="f-w-400 text-muted mb-0">Active %</p>
                    <p class="text-center mb-0">65%</p>
                </div>
                <div class="team-content-box">
                    <p class="f-w-400 text-muted mb-0">Visits</p>
                    <p class="text-center mb-0">12.4K</p>
                </div>
            </div>
        </div>

        <div class="payment-card w-100 px-2 py-2 b-r-5 position-relative overflow-hidden bg-light-200 text-dark">
            <div class="pc-top">
                <img src="" class="pc-logo ">
                <span class="text-primary f-s-16 f-w-600">Alina</span>
            </div>

            <div class="f-w-500 pt-3">
                0025 4593 5763 4582
            </div>

            <div class="pc-footer">
                <div class="text-muted">Jena Gaines</div>
            </div>
        </div>
    </div>
</div>

Hourly Forecast

05:00 AM

22°

05:00 AM

22°

05:00 AM

22°

05:00 AM

22°

Tomorrow

Light Rain Showers

18°

                                     
 <div class="app-btn-list">
   <div class="d-flex align-content-center flex-wrap gap-4">
    <div class="text-center">
        <span class="bg-light-primary text-primary h-45 w-45 d-flex-center b-r-45">
            <i class="ti ti-sun f-s-24 "></i>
        </span>
        <p class="f-s-12 mt-1 mb-0 text-muted">05:00 AM</p>
        <h6>22°</h6>
    </div>

    <div class="text-center">
        <span class="bg-light-primary text-primary h-45 w-45 d-flex-center b-r-45">
            <i class="ti ti-cloud f-s-24"></i>
        </span>
        <p class="f-s-12 mt-1 mb-0 text-muted">05:00 AM</p>
        <h6>22°</h6>
    </div>

    <div class="text-center">
        <span class="bg-light-primary text-primary h-45 w-45 d-flex-center b-r-45">
            <i class="ti ti-cloud-rain f-s-24"></i>
        </span>
        <p class="f-s-12 mt-1 mb-0 text-muted">05:00 AM</p>
        <h6>22°</h6>
    </div>

    <div class="text-center">
        <span class="bg-light-primary text-primary h-45 w-45 d-flex-center b-r-45">
            <i class="ti ti-cloud-storm f-s-24"></i>
        </span>
        <p class="f-s-12 mt-1 mb-0 text-muted">05:00 AM</p>
        <h6>22°</h6>
    </div>
</div>

<div class="d-flex justify-content-between align-items-center bg-light-primary p-3 b-r-20 mt-2">
    <div class="d-flex align-items-center">
        <span class="bg-gradient-dark h-50 w-50 overflow-hidden d-flex-center b-r-50">
            <i class="ti ti-cloud-rain f-s-25"></i>
        </span>
        <div class="ms-2">
            <h6 class="mb-0">Tomorrow</h6>
            <p class="mb-0">Light Rain Showers</p>
        </div>
    </div>
    <div>
        <span><i class="ti ti-arrow-narrow-up"></i>18°</span>
    </div>
</div>

WEEKLY PLAYLIST

8 Tracks

Design Radio

WEEKLY PLAYLIST

8 Tracks

Design Radio

Coming Soon.

GENERATING...

This is a wider card with supporting text with supporting little bit longer below as a natural below as a natural lead-in to additional content. This content is a little bit longer.With supporting text below lead-in to additional content below as a natural.

                                     
<div class="card bg-gradient-primary overflow-hidden border-0">
    <div class="card-header d-flex justify-content-between">
        <div class="d-flex align-items-center gap-3">
            <div class="text-white d-flex align-items-center">
                <i class="ti ti-loader me-1 f-s-20 text-white-800"></i>
                <h6 class="text-white-800 mb-0">GENERATING...</h6>
            </div>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input toggle-code" type="checkbox" data-bs-target="#loadingCard">
        </div>
    </div>

    <div class="card mb-0 bg-white d-flex overflow-hidden b-r-20 z-2">
        <div class="card-body">
            <p class="mb-4 text-muted">
                This is a wider card with supporting text with supporting little bit longer below as a natural below as a natural lead-in to additional content.
                This content is a little bit longer. With supporting text below lead-in to additional content below as a natural.
            </p>
        </div>

        <div class="card-footer code-footer d-flex align-items-center">
            <button class="btn btn-sm btn-outline-light d-flex align-items-cente b-r-20 text-dark me-1" type="button">
                <i class="ti ti-sparkles f-s-18 me-1 text-primary"></i> ADD HASHTAG
            </button>
            <button class="btn btn-sm btn-outline-light d-flex align-items-center b-r-20 text-secondary" type="button">
                <i class="ti ti-sparkles f-s-18 me-1 text-primary"></i> GEN-Z LANGUAGE
            </button>
        </div>
    </div>
</div>

GENERATING...

                                     
<div class="card bg-gradient-dark overflow-hidden border-0">
    <div class="card-header d-flex justify-content-between">
        <div class="d-flex align-items-center gap-3">
            <div class="text-white d-flex align-items-center">
                <i class="ti ti-loader me-1 f-s-20 text-white-800"></i>
                <h6 class="text-white-800 mb-0">GENERATING...</h6>
            </div>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input toggle-code" type="checkbox" data-bs-target="#loadingCard">
        </div>
    </div>

    <div class="card mb-0 bg-white d-flex overflow-hidden b-r-20 z-2">
        <div class="card-body">
            <p class="mb-4 text-muted">
                This is a wider card with supporting text with supporting little bit longer below as a natural below as a natural lead-in to additional content.
                This content is a little bit longer. With supporting text below lead-in to additional content below as a natural.
            </p>
        </div>

        <div class="card-footer code-footer d-flex align-items-center">
            <button class="btn btn-sm btn-outline-light d-flex align-items-cente b-r-20 text-dark me-1" type="button">
                <i class="ti ti-sparkles f-s-18 me-1 text-primary"></i> ADD HASHTAG
            </button>
            <button class="btn btn-sm btn-outline-light d-flex align-items-center b-r-20 text-secondary" type="button">
                <i class="ti ti-sparkles f-s-18 me-1 text-primary"></i> GEN-Z LANGUAGE
            </button>
        </div>
    </div>
</div>