Components used on the Conversations page.

Conversations Navigation

<div class="conversations-nav">
	<h3>Looking for something?</h3>
	<ul>
		<li class="selected"><a href="#">All conversations</a></li>
		<li><a href="#">Conversations on my files</a></li>
		<li><a href="#">Conversations I’ve commented in</a></li>
		<li><a href="#">Mentions</a></li>
	</ul>
</div>

Conversation

Note that the Image Comments component is used for the comments themselves. This component handles the layout of the conversation overall.

Don't Quit

source: https://example.com

Vidiot
and for God’s sake, cut out that avocado toast. You spend a lot of money that way.
spaceninja
link for likes and retweets: https://mobile.twitter.com/shaun_vi...
<div class="conversation">
	<a class="thumb" href="/p/1IFD4">
		<img src="https://mltshp-cdn.com/r/1QE6J?width=100" />
	</a>
	<div class="details-wrapper">
		<h3 class="sharedfile-title">Don't Quit</h3>
		<p class="sharedfile-description">
			source:
			<a href="#" target="_blank" rel="nofollow">https://example.com</a>
		</p>
		<div class="image-comments">
			<div class="comment">
				<div class="avatar">
					<a href="#">
						<img
							class="avatar--img"
							src="https://mltshp-cdn.com/s3/account/1031/profile.jpg"
							height="48"
							width="48"
						/>
					</a>
				</div>
				<div class="body">
					<div class="meta">
						<a href="#" class="user-name">Vidiot</a>
						<span class="created-at">
							<time
								datetime="2020-04-14 22:22:52"
								title="Tue, 14 Apr 2020 22:22:52 "
							>
								1 week ago
							</time>
						</span>
					</div>
					and for God’s sake, cut out that avocado toast. You spend a lot of
					money that way.
				</div>
			</div>
			<div class="comment">
				<div class="avatar">
					<a href="#">
						<img
							class="avatar--img"
							src="https://mltshp-cdn.com/s3/account/7367/profile.jpg"
							height="48"
							width="48"
						/>
					</a>
				</div>
				<div class="body">
					<div class="meta">
						<a href="#" class="user-name">spaceninja</a>
						<span class="created-at">
							<time
								datetime="2020-04-15 18:49:39"
								title="Wed, 15 Apr 2020 18:49:39 "
							>
								1 week ago
							</time>
						</span>
					</div>
					link for likes and retweets:
					<a
						href="#"
						rel="nofollow"
						target="_blank"
						title="https://mobile.twitter.com/shaun_vids/status/1241199642777452544"
						>https://mobile.twitter.com/shaun_vi...</a
					>
				</div>
			</div>
		</div>
		<div class="conversation-meta">
			<a class="btn btn-small btn-pastel btn-secondary post-a-comment" href="#"
				>post a comment »</a
			>
			<a
				class="btn btn-small btn-pastel btn-warning mute-this-conversation"
				href=""
				>mute this conversation »</a
			>
		</div>
	</div>
</div>

Mention

Note that the Image Comments component is used for the comments themselves. This component handles the layout of the conversation overall.

spaceninja
@spaceninja one more test for good measure
Posted on “Pascal Blanché - BELT 71
<div class="mentions">
	<div class="conversation">
		<div class="details-wrapper">
			<div class="image-comments">
				<div class="comment">
					<div class="avatar">
						<a href="#">
							<img
								class="avatar--img"
								src="https://mltshp-cdn.com/s3/account/7367/profile.jpg"
								height="48"
								width="48"
							/>
						</a>
					</div>
					<div class="body">
						<div class="meta">
							<a class="user-name" href="#">spaceninja</a>
							<span class="created-at">
								<time
									datetime="2020-03-01 23:51:27"
									title="Sun, 01 Mar 2020 23:51:27 "
								>
									1 month ago
								</time>
							</span>
						</div>
						@spaceninja one more test for good measure
						<div class="where-from">
							Posted on “<a href="#">Pascal Blanché - BELT 71</a></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="conversation-meta">
				<a
					class="btn btn-small btn-pastel btn-secondary post-a-comment"
					href="#"
					>reply to this comment »</a
				>
			</div>
		</div>
	</div>
</div>