Ssstyles › Comment

Source

This component will let you display comments, but please keep it civil.

<article data-comment>
	<header>Chester Bennington</header>
	<p>It starts with one</p>
</article>

# Nested comments

Nested comments will show up as visually tiered.

<article data-comment>
	<header>Chester Bennington</header>
	<p>It starts with one</p>
	<article data-comment>
		<header>Mike Shinoda</header>
		<p>One thing: I don't know why. It doesn't really matter how hard you try. Keep that in mind I designed this rhyme to explain in due time.</p>
		<article data-comment>
			<header>Chester Bennington</header>
			<p>All I know</p>
		</article>
	</article>
</article>

You can also manually set the level:

<article data-comment style="--level: 3">
	<header>Mike Shinoda</header>
	<p>What it meant to me will eventually be a memory of a time...</p>
</article>

# Avatars and cards

You can integrate them with avatars and cards.

<article data-card data-comment data-shadow="1">
	<header>
		<a href=""
			><img data-avatar data-shadow="1-hover" src="https://randomuser.me/api/portraits/lego/1.jpg" alt=""
		/></a>
		<a href="">Lorem Ipsum</a>
	</header>
	<p>
		Quia voluptates architecto qui. Id maiores eum quis neque. Eligendi ut officiis eos laudantium dolorem eius et.
		Veniam sit illum ut sed maxime error eius. Est ducimus laudantium accusantium rerum. Qui sit sed porro ipsa
		culpa quibusdam laudantium.
	</p>
	<footer>
		<div data-group>
			<a href="" data-button="accent">Read more</a>
			<a href="" data-button="accent">Reply</a>
		</div>
	</footer>
</article>

Lorem Ipsum

Quia voluptates architecto qui. Id maiores eum quis neque. Eligendi ut officiis eos laudantium dolorem eius et. Veniam sit illum ut sed maxime error eius. Est ducimus laudantium accusantium rerum. Qui sit sed porro ipsa culpa quibusdam laudantium.