Line under avatar?

Hi guys, I was wondering if anyone knows how to display a line under the avatar. I saw that on Figma’s forum and I think it look quite dope.

1 Like

Welcome paranoya!

(a sigma example link for reference: 👋 Introduce yourself! - #2 by Josh - General Discussion - Figma Community Forum)

It’s indeed a nice customization.

You can see how they do that using this guide:

It will help you to make many visual customizations on your forum.

On Figma, we can target the line element like this:

They added this to their theme CSS:

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;

But some values need to be adjusted so it looks best on your own forum.

Their vertical line looks great because they also get rid of the horizontal line between each post.

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;

With a bit of tweak, you can achieve something like that:

1 Like

Was not expecting to get an answer so quickly. Thank you very much!


You’re welcome, we’re help to help! :hugs:


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.