Skip to content

Blog Article Tags

Styles for blog article tags used in blog_article_tags module.

Structurally there is one main element blog-article-tags which contains one element:

  • .blog-article-tags__tag

Example

Here is an example of blog article tags element usage.

HTML
<div class="blog-article-tags">
    <a class="blog-article-tags__tag" href="/pl/n/tag/tag1">
        <h-tag class="tag tag_interactive tag_secondary" clickable="" tabindex="0" role="button">
            Tag1
        </h-tag>
    </a>

    <a class="blog-article-tags__tag" href="/pl/n/tag/tag2">
        <h-tag class="tag tag_interactive tag_secondary" clickable="" tabindex="0" role="button">
            Tag2
        </h-tag>
    </a>

    <a class="blog-article-tags__tag" href="/pl/n/tag/another-tag">
        <h-tag class="tag tag_interactive tag_secondary" clickable="" tabindex="0" role="button">
            Another tag
        </h-tag>
    </a>
</div>

Blog Article Tags tags

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

LESS

You can modify any blog article tags less variable in your User Less section to change blog article tags styles.

Blog Article Tags variables

Variables used to style blog article tags.

@blogArticleTagsRowGap: @globalSpacing * 0.75;
@blogArticleTagsColumnGap: @globalSpacing * 0.5;

@blogArticleTagsTagColor: @neutralColors800;
@blogArticleTagsTagColorHover: @neutralColors800;

If you want to change blog article tags styles, you can just change the variables. To change a default color of the tags just modify @blogArticleTagsTagColor variable.

@blogArticleTagsTagColor: red;

Blog Article Tags styles

Here are standard blog article tags styles.

.blog-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: @blogArticleTagsRowGap @blogArticleTagsColumnGap;

    &__tag {
        color: @blogArticleTagsTagColor;
        text-decoration: none;

        &:hover {
            color: @blogArticleTagsTagColorHover;
        }
    }
}

Modules reference

Macros reference