selected_item/index.html

<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <link href="../styles/sul.css" rel="stylesheet" />
  </head>
  <body class="p-4">
    <h1>Selected Item</h1>
    <ul class="list-unstyled">
      <li class="d-inline-flex gap-2 align-items-center my-2">
        <span class="bg-light badge rounded-pill border selected-item">
          <span class="selected-item-label">Pill Label</span>
          <button
            type="button"
            class="btn-close"
            aria-label="Remove XXXXXXX"
          ></button>
        </span>
      </li>
      <li class="d-inline-flex gap-2 align-items-center my-2">
        <span class="bg-light badge rounded-pill border selected-item">
          <span class="selected-item-label"> Pill Label 2 </span>
          <button
            type="button"
            class="btn-close"
            aria-label="Remove XXXXXXX"
          ></button>
        </span>
      </li>
    </ul>

    <h2>Selected Item HTML</h2>
    <pre><code class="d-block" style="white-space: pre-wrap; background-color: lightgray;">
      &lt;ul class="list-unstyled"&gt;
        &lt;li class="d-inline-flex gap-2 align-items-center my-2"&gt;
          &lt;span class="bg-light badge rounded-pill border selected-item"&gt;
            &lt;span class="selected-item-label"&gt;
              Pill Label
            &lt;/span&gt;
            &lt;button type="button" class="btn-close" aria-label="Remove XXXXXX"&gt;&lt;/button&gt;
          &lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    </code></pre>
  </body>
</html>