List

<ul data-bitsy-list data-bitsy-variant="boxed">
  <li data-bitsy-list-item data-bitsy-list-link>
    <span data-bitsy-list-leading data-bitsy-avatar aria-hidden="true">GH</span>
    <div>
      <a data-bitsy-list-title href="/members/grace">Grace Hopper</a>
      <p data-bitsy-list-description>grace@atlas.app</p>
    </div>
    <div data-bitsy-list-trailing>
      <button data-bitsy-button data-bitsy-size="sm" type="button" aria-label="Remove Grace Hopper">Remove</button>
    </div>
  </li>
</ul>

• data-bitsy-variant="boxed" draws a bordered panel; data-bitsy-size="sm" makes rows denser.
• data-bitsy-list-link makes the title link cover the row; trailing controls stay clickable.
• Name trailing actions with the item, such as "Remove Grace Hopper".

The foundation styles ul as prose bullets. data-bitsy-list resets that and adds rows with slots, dividers, and full-row links, with no JavaScript. Use Table for data compared across columns and Menu for a list of actions.