Media / Comments
John Doe
2h ago
This is a top-level comment.
Jane Smith
1h ago
This is a reply to the top-level comment.
Emily Johnson
30m ago
Thanks for the clarification!
Michael Lee
3h ago
Another top-level comment here.
<div id="comments" class="media" style="--media-nested-space: 0.7rem">
<!-- Top-level comment -->
<div class="media-item">
<div class="avatar">
<img src="https://i.pravatar.cc/400?img=58" alt="" />
</div>
<div class="media-body">
<div class="media-header">
<strong>John Doe</strong>
<small class="text-base-alt">2h ago</small>
</div>
<div class="media-content">This is a top-level comment.</div>
<div class="media-actions">
<button
class="button ghost xs"
onclick="openNestedMedia(this)"
>
<div class="icon">
<i class="fa-solid fa-caret-down"></i>
</div>
</button>
<button class="badge ghost primary">Reply</button>
<button class="badge ghost primary">Like</button>
</div>
<!-- Nested comment -->
<div class="media">
<div class="media-item">
<div class="avatar">
<img
src="https://i.pravatar.cc/400?img=12"
alt=""
/>
</div>
<div class="media-body">
<div class="media-header">
<strong>Jane Smith</strong>
<small class="text-base-alt">1h ago</small>
</div>
<div class="media-content">
This is a reply to the top-level comment.
</div>
<div class="media-actions">
<button
class="button ghost xs"
onclick="openNestedMedia(this)"
>
<div class="icon">
<i class="fa-solid fa-caret-down"></i>
</div>
</button>
<button class="badge ghost primary">
Reply
</button>
<button class="badge ghost primary">
Like
</button>
</div>
<!-- Nested reply -->
<div class="media">
<div class="media-item">
<div class="avatar">
<img
src="https://i.pravatar.cc/400?img=25"
alt=""
/>
</div>
<div class="media-body">
<div class="media-header">
<strong>Emily Johnson</strong>
<small class="text-base-alt"
>30m ago</small
>
</div>
<div class="media-content">
Thanks for the clarification!
</div>
<div class="media-actions">
<button
class="button ghost xs"
onclick="openNestedMedia(this)"
>
<div class="icon">
<i
class="fa-solid fa-caret-down"
></i>
</div>
</button>
<button class="badge ghost primary">
Reply
</button>
<button class="badge ghost primary">
Like
</button>
</div>
</div>
</div>
</div>
<!-- End nested reply -->
</div>
</div>
</div>
<!-- End nested comment -->
</div>
</div>
<!-- Another top-level comment -->
<div class="media-item">
<div class="avatar">
<img src="https://i.pravatar.cc/400?img=37" alt="" />
</div>
<div class="media-body">
<div class="media-header">
<strong>Michael Lee</strong>
<small class="text-base-alt">3h ago</small>
</div>
<div class="media-content">Another top-level comment here.</div>
<div class="media-actions">
<button
class="button ghost xs"
onclick="openNestedMedia(this)"
>
<div class="icon">
<i class="fa-solid fa-caret-down"></i>
</div>
</button>
<button class="badge ghost primary">Reply</button>
<button class="badge ghost primary">Like</button>
</div>
</div>
</div>
</div>