Comment Component

Comment list with nested threads, avatars, badges, media content (images/video/audio), quotes, polls, and link cards.

Notes

Basic usage

Single comment

#1
Overall, worthy of the status. Strong comprehensive capability.
10 hours agoGuangdong
♥ 12

With badge

Song JianDiamond
#1
Overall, worthy of the status. Strong comprehensive capability.
10 hours agoGuangdong
♥ 12

With separator

#2
Thanks for the replies. Adding some additional details.
5 hours agoBeijing
♥ 8

Nested replies

Song JianDiamond
#1
Overall, worthy of the status. Strong comprehensive capability.
10 hours agoGuangdong
♥ 12
#2
Reply to Song Jian: Totally agree, especially the analysis.
8 hours agoShanghai
♥ 5
#3
Overall, worthy of the status. Strong comprehensive capability.
6 hours agoShenzhen
♥ 3

Media content

Images

Photographer WangPhotographer
#5
Sharing some landscape photos from today!
Landscape 1 Landscape 2 Landscape 3 Landscape 4
3 hours agoYunnan
♥ 28

Video

#6
This video is hilarious! Check it out.
2 hours agoBeijing
♥ 15

Audio

#7
Sharing a song I have on repeat 🎵
1 hour agoGuangzhou
♥ 9

Quoted reply

#8
What do you think of this plan? Seems very feasible to me.
30 min agoHangzhou
♥ 6
#9

Manager Zhang: What do you think of this plan? Seems very feasible to me.

Reply to Manager Zhang: Overall good, but a few technical points to discuss.
20 min agoChengdu
♥ 4

Rich content

Poll card

#10
Let's vote on where to go for the team building!
Team building destination
Hiking
45%
Beach
30%
Board games
25%
1 day agoBeijing
♥ 20

Link card

#11
Great article recommendation 👇
📄
How to Write Elegant CSS
A comprehensive guide on CSS best practices
blog.example.com
2 days agoShanghai
♥ 16

Code share

#12
Sharing some useful CSS: 
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
3 days agoShenzhen
♥ 22