This dropdown is a handy little feature that can be added to a character's profile to make it easy to understand how to use their pronouns without having to go to another page or look them up!

<div class="dropdown">
  <a class="btn btn-sm text-muted" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" style="text-decoration:none;border:none;background:none;box-shadow:none;"><i class="far fa-info-square"></i></a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <!--Replace the numbers with the corresponding pronouns and make any neccessary gramatical changes that may be desired for the set you are using-->
    <a class="dropdown-item"><b>Subject:</b> [1] laughed at the joke.</a>
    <a class="dropdown-item"><b>Object:</b> They talked to [2] about pets.</a>
    <a class="dropdown-item"><b>Possessive:</b> [3] favorite color is unknown.</a>
    <a class="dropdown-item"><b>Possessive Pronoun:</b> The card is [4].</a>
    <a class="dropdown-item"><b>Reflexive:</b> [1] think(s) highly of [5].</a>
    <hr style="margin:0.5em 0"/>
    <!--Full list option can be renamed to whatever you would like or completely removed. This is intended to be paired with the pronoun reference table if you use it-->
    <a class="dropdown-item" href="#">Full List</a>
    <!--Do not remove credit-->
    <small><a class="dropdown-item text-muted" href="/5803174.pronoun-snippets-html-ftu-">Snippet by MICROWBIRD</a></small>
  </div>
</div>

<div class="container w-auto">
  <div class="card mx-auto">
    <div class="card-header">
      <h1 class="p-1">Pronoun Reference <span class="pull-right"><i class="far fa-info-square"></i></span></h1>

    </div>
    <div class="card-body p-4 mx-3">
      <div class="mx-auto" style="font-size:1.2em;max-width:342px;">
        <p><b>Subject:</b><u><b>&nbsp 1 &nbsp</b></u> laughed at the joke.</p>
        <p><b>Object:</b> They talked to<u><b>&nbsp 2 &nbsp</b></u> about pets.</p>
        <p><b>Possessive:</b><u><b>&nbsp 3 &nbsp</b></u> favorite color is unknown.</p>
        <p><b>Possessive Pronoun:</b> The card is<u><b>&nbsp 4 &nbsp</b></u>.</p>
        <p><b>Reflexive:</b><u><b>&nbsp 1 &nbsp</b></u> think(s) highly of<u><b>&nbsp 5 &nbsp</b></u>.</p>
      </div>
      <hr>
      <div class="table-responsive">
        <table class="table table-hover text-monospace" style="border:none;">
          <tbody>
            <!--Reference number row-->
            <tr style="font-weight:bold;">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>links</td>
            </tr>
            <!--Pronoun rows start-->
            <tr>
              <td>He</td>
              <td>Him</td>
              <td>His</td>
              <td>His</td>
              <td>Himself</td>
              <td><a href="#characterlink" data-toggle="tooltip" data-placement="top" title="Character Name">[1]</a></td>
            </tr>
            <tr>
              <td>She</td>
              <td>Her</td>
              <td>Her</td>
              <td>Hers</td>
              <td>Herself</td>
              <td><a href="#characterlink" data-toggle="tooltip" data-placement="top" title="Character Name">[1]</a></td>
            </tr>
            <tr>
              <td>They</td>
              <td>Them</td>
              <td>Their</td>
              <td>Theirs</td>
              <td>Themself</td>
              <td><a href="#characterlink" data-toggle="tooltip" data-placement="top" title="Character Name">[1]</a></td>
            </tr>
            <!--Duplicate this table row as many times as desired to add additional pronoun sets-->
            <!--
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td><a href="#characterlink" data-toggle="tooltip" data-placement="top" title="Character Name">[1]</a></td>
            </tr> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--Do Not Remove Credits-->
  <div class="pull-right">
    <a href="/5803174.pronoun-snippets-html-ftu-" data-toggle="tooltip" data-placement="left" title="Check out the code here!"><i class="fal fa-link"></i></a>&nbsp;
    <a href="/coldioc" data-toggle="tooltip" data-placement="left" title="Concept by coldioc"><i class="fal fa-star"></i></a>&nbsp;
    <a href="/microwbird" data-toggle="tooltip" data-placement="left" title="Code by MICROWBIRD"><i class="fas fa-feather-alt"></i></a>
  </div>
</div>