Template Basic

<sv-template id="user-card">
  <!-- Template markup -->
  <template>
    <div class="card">
      <div class="avatar-wrap">
        <img class="avatar" alt="[[ name ]]" src="[[ avatar ]]" />
        <span class="status-dot [[ online ? 'online' : 'offline' ]]"></span>
      </div>

      <div class="info">
        <div class="name-row">
          <span class="name">[[ name ]]</span>
          <span class="role [[ admin ? 'admin' : 'member' ]]">[[ admin ? "Admin" : "Member" ]]</span>
        </div>

        <span class="bio" template-remove="[[ bio == undefined ]]">[[ bio ]]</span>

        <div class="meta">
          <span class="joined">Joined [[ joined ]]</span>
          <span class="posts">[[ posts ]] posts</span>
        </div>
      </div>
    </div>
  </template>

  <!-- Scoped style -->
90 collapsed lines
  <style>
    .card {
      display: flex;
      gap: 0.875rem;
      align-items: center;
      padding: 0.75rem 1rem;
      background-color: var(--sb-color-gray-6);
      border: 1px solid var(--sb-color-gray-5);
      border-radius: 0.5rem;
    }

    .avatar-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .avatar {
      display: block;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      object-fit: cover;
      border-radius: 50%;
    }

    .status-dot {
      position: absolute;
      inset-block-end: 0;
      inset-inline-end: 0;
      inline-size: 0.625rem;
      block-size: 0.625rem;
      border: 2px solid var(--sb-color-black);
      border-radius: 50%;

      &.online {
        background: var(--sb-tip-border);
      }

      &.offline {
        background: var(--sb-color-gray-5);
      }
    }

    .info {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 0.2rem;
    }

    .name-row {
      display: flex;
      align-items: center;
    }

    .name {
      font-size: var(--sb-text-sm);
      font-weight: 600;
      color: var(--sb-heading-color);
    }

    .role {
      padding-inline: 0.55em;
      margin-inline-start: 0.55em;
      font-size: var(--sb-text-2xs);
      font-weight: 600;
      border-radius: 999px;

      &.admin {
        color: var(--sb-color-accent-high);
        background: var(--sb-color-accent-low);
      }

      &.member {
        color: var(--sb-color-gray-3);
        background: var(--sb-color-gray-6);
      }
    }

    .bio {
      font-size: var(--sb-text-xs);
      color: var(--sb-color-gray-3);
    }

    .meta {
      display: flex;
      gap: 0.75rem;
      font-size: var(--sb-text-2xs);
      color: var(--sb-color-gray-4);
    }
  </style>
</sv-template>

<h3 style="margin-block-start: 0.5em">Users</h3>

<!-- Use and render the template -->
<div class="user-list">
  <sv-template
    prop-admin:json="true"
    prop-avatar="https://placehold.co/200?text=Alice"
    prop-bio="Loves cats."
    prop-joined="Mar 2021"
    prop-name="Alice"
    prop-online:json="true"
    prop-posts:js="Math.floor(Math.random() * 500)"
    use="user-card"
  ></sv-template>

  <sv-template
    prop-admin:json="false"
    prop-avatar="https://placehold.co/200?text=Bob"
    prop-joined="Sep 2022"
    prop-name="Bob"
    prop-online:json="false"
    prop-posts:js="Math.floor(Math.random() * 500)"
    use="user-card"
  ></sv-template>

  <sv-template
    prop-admin:json="false"
    prop-avatar="https://placehold.co/200?text=Carol"
    prop-bio="Likes hiking."
    prop-joined="Jun 2023"
    prop-name="Carol"
    prop-online:json="true"
    prop-posts:js="Math.floor(Math.random() * 500)"
    use="user-card"
  ></sv-template>
</div>

<style>
7 collapsed lines
  .user-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block-start: 1em;
  }
</style>