<div class="card overflow-auto">
    <div class="card-status-top bg-dark-overlay"></div>
    <div class="card-header">
        <h3 class="card-title">고스트 버튼</h3>
    </div>
    <div class="card-body">
        <p>
            고스트 버튼을 사용하려면 <code>.btn-ghost-*</code> 클래스를 사용하세요.
        </p>
        <div class="row g-2 align-items-center">
            <div class="col-12 col-xl-2 font-weight-semibold">일반</div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-primary w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-secondary w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-success w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-warning w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-danger w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-info w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-dark w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
                <a href="#" class="btn btn-ghost-light w-100">
                    라이트
                </a>
            </div>
        </div>
        <div class="row g-2 align-items-center">
            <div class="col-12 col-xl-2 font-weight-semibold">활성 상태</div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-primary active w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-secondary active w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-success active w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-warning active w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-danger active w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-info active w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-dark active w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
                <a href="#" class="btn btn-ghost-light active w-100">
                    라이트
                </a>
            </div>
        </div>
        <div class="row g-2 align-items-center">
            <div class="col-12 col-xl-2 font-weight-semibold">비활성화</div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-primary disabled w-100">
                    프라이머리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-secondary disabled w-100">
                    세컨더리
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-success disabled w-100">
                    성공
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-warning disabled w-100">
                    경고
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-danger disabled w-100">
                    위험
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-info disabled w-100">
                    정보
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl py-3">
                <a href="#" class="btn btn-ghost-dark disabled w-100">
                    다크
                </a>
            </div>
            <div class="col-6 col-sm-4 col-md-2 col-xl bg-dark py-3">
                <a href="#" class="btn btn-ghost-light disabled w-100">
                    라이트
                </a>
            </div>
        </div>
    </div>
</div>