Comment¶

Styles for a comment used in comment macro.

Structurally .comment contains following elements:

.comment__header
.comment__avatar
.comment__header-details
.comment__author
.comment__date
.comment__content

Example¶

Here is an example of comment element usage.

HTML

<article class="comment">
    <div class="comment__avatar">J</div>
    <header class="comment__header">
        <div class="comment_header-details">
            <p class="comment__author">John</p>
            <time
                class="comment__date"
                datetime="10-01-2022"
                title="thursday, 10 january 2022"
            >
                10 january 2022
            </span>
        </div>
    </header>
    <p class="comment__content">Lorem ipsum</p>
</article>

Comment tags¶

The .comment classes were designed to be used with block elements like <article>. However, you can use them with any other element and customize it to your own needs.

LESS¶

You can modify any comment less variable in your User Less section to change comment styles.

Comment variables¶

Variables used to style comments.

@commentMarginBottom: @globalSpacing * 2;
@commentPaddingBottom: @globalSpacing;
@commentBorderBottom: 1px solid @neutralColors100;

@commentSecondaryMaxWidth: 856px;

@commentHeaderMarginBottom: @globalSpacing;
@commentHeaderColumnGap: @globalSpacing * 0.75;

@commentHeaderAvatarFontSize: @fontSizeInPxXS;
@commentHeaderAvatarLineHeight: @lineHeightInPxS;
@commentHeaderAvatarFontWeight: @fontWeightSemibold;
@commentHeaderAvatarColor: @neutralColors0;
@commentHeaderAvatarSize: 32;
@commentHeaderAvatarBackgroundColor: @globalFontColor;
@commentHeaderAvatarBorderRadius: 22;

@commentAuthorFontSizePx: @fontSizeInPxS;
@commentAuthorLineHeightPx: @lineHeightInPxS;
@commentAuthorFontWeight: @fontWeightSemibold;
@commentAuthorColor: @globalFontColor;

@commentDateFontSizePx: @fontSizeInPxXS;
@commentDateColor: @globalFontColorSecondary;

@commentContentFontSizePx: @fontSizeInPxXS;
@commentContentColor: @globalFontColor;

If you want to change comment styles, you can just change the variables. To change a default color of the content just modify @commentContentColor variable.

@commentContentColor: red;

Comment styles¶

Here are standard comment styles.

.comment {
    &:not(:last-child) {
        margin-bottom: @commentMarginBottom;
        padding-bottom: @commentPaddingBottom;
        border-bottom: @commentBorderBottom;
    }

    &_secondary {
        max-width: @commentSecondaryMaxWidth;
    }

    &__header {
        margin-bottom: @commentHeaderMarginBottom;
        display: flex;
        align-items: center;
        column-gap: @commentHeaderColumnGap;
    }

    &__avatar {
        .font-size(@commentHeaderAvatarFontSize);
        .line-height(@commentHeaderAvatarLineHeight);
        font-weight: @commentHeaderAvatarFontWeight;
        color: @commentHeaderAvatarColor;

        .pixel-to-rem(width, @commentHeaderAvatarSize);
        .pixel-to-rem(height, @commentHeaderAvatarSize);
        display: flex;
        align-items: center;
        justify-content: center;

        background-color: @commentHeaderAvatarBackgroundColor;
        .pixel-to-rem(border-radius, @commentHeaderAvatarBorderRadius);
    }

    &__author {
        .font-size(@commentAuthorFontSizePx);
        .line-height(@commentAuthorLineHeightPx);
        font-weight: @commentAuthorFontWeight;
        color: @commentAuthorColor;

        &:not(:last-child) {
            margin-bottom: 0;
        }
    }

    &__date {
        .font-size(@commentDateFontSizePx);
        color: @commentDateColor;
    }

    &__content {
        .font-size(@commentContentFontSizePx);
        color: @commentContentColor;
    }
}

Macros reference¶

comment