<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="row row-cards">
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<h1>제목 예시 <span class="badge">새로운</span></h1>
<h2>제목 예시 <span class="badge">새로운</span></h2>
<h3>제목 예시 <span class="badge">새로운</span></h3>
<h4>제목 예시 <span class="badge">새로운</span></h4>
<h5>제목 예시 <span class="badge">새로운</span></h5>
<h6>제목 예시 <span class="badge">새로운</span></h6>
</div>
</div>
</div>
<div class="col-12">
<div class="row row-cards">
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="badges-list">
<span class="badge bg-blue text-blue-fg">파랑</span>
<span class="badge bg-azure text-azure-fg">하늘</span>
<span class="badge bg-indigo text-indigo-fg">남색</span>
<span class="badge bg-purple text-purple-fg">보라</span>
<span class="badge bg-pink text-pink-fg">분홍</span>
<span class="badge bg-red text-red-fg">빨강</span>
<span class="badge bg-orange text-orange-fg">주황</span>
<span class="badge bg-yellow text-yellow-fg">노랑</span>
<span class="badge bg-lime text-lime-fg">라임</span>
<span class="badge bg-green text-green-fg">초록</span>
<span class="badge bg-teal text-teal-fg">청록</span>
<span class="badge bg-cyan text-cyan-fg">청자</span>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="badges-list">
<span class="badge bg-blue-lt">파랑</span>
<span class="badge bg-azure-lt">하늘</span>
<span class="badge bg-indigo-lt">남색</span>
<span class="badge bg-purple-lt">보라</span>
<span class="badge bg-pink-lt">분홍</span>
<span class="badge bg-red-lt">빨강</span>
<span class="badge bg-orange-lt">주황</span>
<span class="badge bg-yellow-lt">노랑</span>
<span class="badge bg-lime-lt">라임</span>
<span class="badge bg-green-lt">초록</span>
<span class="badge bg-teal-lt">청록</span>
<span class="badge bg-cyan-lt">청자</span>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="badges-list">
<span class="badge badge-outline text-blue">파랑</span>
<span class="badge badge-outline text-azure">하늘</span>
<span class="badge badge-outline text-indigo">남색</span>
<span class="badge badge-outline text-purple">보라</span>
<span class="badge badge-outline text-pink">분홍</span>
<span class="badge badge-outline text-red">빨강</span>
<span class="badge badge-outline text-orange">주황</span>
<span class="badge badge-outline text-yellow">노랑</span>
<span class="badge badge-outline text-lime">라임</span>
<span class="badge badge-outline text-green">초록</span>
<span class="badge badge-outline text-teal">청록</span>
<span class="badge badge-outline text-cyan">청자</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
<a class="dropdown-item" href="#">
액션
<span class="badge bg-primary text-primary-fg ms-auto">12</span>
</a>
<a class="dropdown-item" href="#">
다른 액션
<span class="badge bg-green ms-auto"></span>
</a>
</div>
</div>
<div class="col-12">
<div class="row row-cards">
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="btn-list">
<button class="btn">파랑 배지 <span class="badge bg-blue text-blue-fg ms-2">1</span></button>
<button class="btn">하늘 배지 <span class="badge bg-azure text-azure-fg ms-2">2</span></button>
<button class="btn">남색 배지 <span class="badge bg-indigo text-indigo-fg ms-2">3</span></button>
<button class="btn">보라 배지 <span class="badge bg-purple text-purple-fg ms-2">4</span></button>
<button class="btn">분홍 배지 <span class="badge bg-pink text-pink-fg ms-2">5</span></button>
<button class="btn">빨강 배지 <span class="badge bg-red text-red-fg ms-2">6</span></button>
<button class="btn">주황 배지 <span class="badge bg-orange text-orange-fg ms-2">7</span></button>
<button class="btn">노랑 배지 <span class="badge bg-yellow text-yellow-fg ms-2">8</span></button>
<button class="btn">라임 배지 <span class="badge bg-lime text-lime-fg ms-2">9</span></button>
<button class="btn">초록 배지 <span class="badge bg-green text-green-fg ms-2">10</span></button>
<button class="btn">청록 배지 <span class="badge bg-teal text-teal-fg ms-2">11</span></button>
<button class="btn">청자 배지 <span class="badge bg-cyan text-cyan-fg ms-2">12</span></button>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="btn-list">
<button class="btn position-relative">파랑 배지 <span class="badge bg-blue text-blue-fg badge-notification badge-pill">1</span></button>
<button class="btn position-relative">하늘 배지 <span class="badge bg-azure text-azure-fg badge-notification badge-pill">2</span></button>
<button class="btn position-relative">남색 배지 <span class="badge bg-indigo text-indigo-fg badge-notification badge-pill">3</span></button>
<button class="btn position-relative">보라 배지 <span class="badge bg-purple text-purple-fg badge-notification badge-pill">4</span></button>
<button class="btn position-relative">분홍 배지 <span class="badge bg-pink text-pink-fg badge-notification badge-pill">5</span></button>
<button class="btn position-relative">빨강 배지 <span class="badge bg-red text-red-fg badge-notification badge-pill">6</span></button>
<button class="btn position-relative">주황 배지 <span class="badge bg-orange text-orange-fg badge-notification badge-pill">7</span></button>
<button class="btn position-relative">노랑 배지 <span class="badge bg-yellow text-yellow-fg badge-notification badge-pill">8</span></button>
<button class="btn position-relative">라임 배지 <span class="badge bg-lime text-lime-fg badge-notification badge-pill">9</span></button>
<button class="btn position-relative">초록 배지 <span class="badge bg-green text-green-fg badge-notification badge-pill">10</span></button>
<button class="btn position-relative">청록 배지 <span class="badge bg-teal text-teal-fg badge-notification badge-pill">11</span></button>
<button class="btn position-relative">청자 배지 <span class="badge bg-cyan text-cyan-fg badge-notification badge-pill">12</span></button>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card overflow-auto">
<div class="card-body">
<div class="btn-list">
<button class="btn position-relative">파랑 배지 <span class="badge bg-blue badge-notification badge-blink"></span></button>
<button class="btn position-relative">하늘 배지 <span class="badge bg-azure badge-notification badge-blink"></span></button>
<button class="btn position-relative">남색 배지 <span class="badge bg-indigo badge-notification badge-blink"></span></button>
<button class="btn position-relative">보라 배지 <span class="badge bg-purple badge-notification badge-blink"></span></button>
<button class="btn position-relative">분홍 배지 <span class="badge bg-pink badge-notification badge-blink"></span></button>
<button class="btn position-relative">빨강 배지 <span class="badge bg-red badge-notification badge-blink"></span></button>
<button class="btn position-relative">주황 배지 <span class="badge bg-orange badge-notification badge-blink"></span></button>
<button class="btn position-relative">노랑 배지 <span class="badge bg-yellow badge-notification badge-blink"></span></button>
<button class="btn position-relative">라임 배지 <span class="badge bg-lime badge-notification badge-blink"></span></button>
<button class="btn position-relative">초록 배지 <span class="badge bg-green badge-notification badge-blink"></span></button>
<button class="btn position-relative">청록 배지 <span class="badge bg-teal badge-notification badge-blink"></span></button>
<button class="btn position-relative">청자 배지 <span class="badge bg-cyan badge-notification badge-blink"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>