Dragon Vale: Off Canvas HTML

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">ICONS AND DESCRIPTIONS</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">

<div class="card" style="width: 18rem;">
<div class="card-body">


<table class="table">
<thead>
<tr>
<th scope="col">ICON</th>
<th scope="col">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<td>Strength</td>
</tr>
<tr>
<th scope="row"></th>
<td>Stamina</td>
</tr>
<tr>
<th scope="row"></th>
<td>Endurance</td>
</tr>
<tr>
<th scope="row"></th>
<td>Agility</td>
</tr>
<tr>
<th scope="row"></th>
<td>Gift Points</td>
</tr>
<tr>
<th scope="row"></th>
<td>Experience Points</td>
</tr>
<tr>
<th scope="row"></th>
<td>Nature</td>
</tr>
<tr>
<th scope="row"></th>
<td>Water</td>
</tr>
<tr>
<th scope="row"></th>
<td>Air</td>
</tr>
<tr>
<th scope="row"></th>
<td>Fire</td>
</tr>
<tr>
<th scope="row"></th>
<td>Light</td>
</tr>
<tr>
<th scope="row"></th>
<td>Dark</td>
</tr>
<tr>
<th scope="row"></th>
<td>Rainbow</td>
</tr>
<tr>
<th scope="row"></th>
<td>Fairy</td>
</tr>
<tr>
<th scope="row"></th>
<td>Iridescent</td>
</tr>
<tr>
<th scope="row"></th>
<td>Merged and Retained</td>
</tr>
<tr>
<th scope="row"></th>
<td>Merged and Dismissed</td>
</tr>
</tbody>
</table>


</div>
</div>

</div>
</div>