Friend List Component Generated HTML

Friends component dynamically generated html:

<div class="component friend_component">
  <h2>
    <span>Friends Component Title</span>
  </h2>
  <div class="component_content">
    <ul class="friends">
      <li>
        <a href="">
          <img width="48" height="48" src="" />
          <div class="friend_name">Friend Name</div>
        </a>
      </li>
    </ul>
  </div>
</div>

When a user adds a friends component to their Viviti site, this is the html that is dynamically generated.

You can also disable the buddy icons for the friends in the friends component and it will alter the html that is outputted.

---

Friends component with buddy icons disabled:

<div class="component friend_component">
  <h2>
    <span>Friends Component Title</span>
  </h2>
  <div class="component_content">
    <ul>
      <li>
        <a href="">Friend Name</a>
      </li>
    </ul>
  </div>
</div>

When a user adds a friends component to their Viviti site, this is the html that is dynamically generated if they have buddy icons disabled.