알림 정보

미리보기

소스

<div class="card overflow-auto mt-3">
    <div class="card-status-top bg-dark-overlay"></div>
    <div class="card-header">
        <h3 class="card-title">알림 정보</h3>
    </div>
    <div class="card-body">
        <div class="alert alert-success alert-dismissible" role="alert">
            <div class="d-flex">
                <div class="mr-2">
                    <i class="f:20 ti ti-check"></i>
                </div>
                <div>
                    와! 모든 것이 정상적으로 작동했습니다!
                </div>
            </div>
            <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
        </div>
        <div class="alert alert-warning alert-dismissible" role="alert">
            <div class="d-flex">
                <div class="mr-2">
                    <i class="f:20 ti ti-alert-triangle"></i>
                </div>
                <div>
                    이런, 문제가 발생했습니다.
                </div>
            </div>
            <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
        </div>
        <div class="alert alert-danger alert-dismissible" role="alert">
            <div class="d-flex">
                <div class="mr-2">
                    <i class="f:20 ti ti-alert-circle"></i>
                </div>
                <div>
                    정말 죄송합니다…
                </div>
            </div>
            <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
        </div>
        <div class="alert alert-info alert-dismissible" role="alert">
            <div class="d-flex">
                <div class="mr-2">
                    <i class="f:20 ti ti-info-circle"></i>
                </div>
                <div>
                    알고 계셨나요?
                </div>
            </div>
            <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
        </div>
    </div>
</div>