Blog Articles List Tags¶

Styles for blog articles list tags used in blog_articles_list_tags module.

Structurally .blog-articles-list-tags contains following elements:

.blog-articles-list-tags__header
.blog-articles-list-tags__tag

Example¶

Here is an example of blog articles list tags element usage. For presentation purposes we also used h-accordion webcomponent along with its styles as well as tag styles.

HTML

    <h-accordion class="accordion" disabled>
        <h-accordion-group opened>
            <h2 class="module__header module__header_no-padding blog-articles-list-tags__header">
                <h-accordion-toggler class="accordion__toggler">
                    <span class="module__header_highlight">Tagi</span>
                </h-accordion-toggler>
            </h2>

            <h-accordion-content class="accordion-toggle-transition-end">
                <div class="blog-articles-list-tags">
                    <a class="blog-articles-list-tags__tag" href="/pl/n/list">
                        <h-tag class="tag tag_interactive tag_secondary" clickable tabindex="0" role="button">
                            All
                        </h-tag>
                    </a>
                    <a class="blog-articles-list-tags__tag" href="/pl/n/tag/tag-example-1">
                        <h-tag class="tag tag_interactive tag_secondary" clickable tabindex="0" role="button">
                            Tag example 1
                        </h-tag>
                    </a>
                    <a class="blog-articles-list-tags__tag" href="/pl/n/tag/tag-example-2">
                        <h-tag class="tag tag_interactive tag_secondary" clickable tabindex="0" role="button">
                            Tag example 2
                        </h-tag>
                    </a>
                    <a class="blog-articles-list-tags__tag" href="/pl/n/tag/tag-example-3">
                        <h-tag class="tag tag_interactive tag_secondary" clickable tabindex="0" role="button">
                            Tag example 3
                        </h-tag>
                    </a>
                </div>
            </h-accordion-content>
        </h-accordion-group>
    </h-accordion>

The .blog-articles-list-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 articles list tags less variable in your User Less section to change blog articles list tags styles.

Variables used to style blog articles list tags.

@blogArticlesListTagsGapMobile: @globalSpacing * 0.5 @globalSpacing * 0.25;

@blogArticlesListTagsHeaderMobilePaddingBottom: 16;

@blogArticlesListTagsTagColor: @neutralColors800;
@blogArticlesListTagsTagColorHover: @neutralColors800;

If you want to change blog articles list tags styles, you can just change the variables. To change a default color of the tag in this module just modify @blogArticlesListTagsTagColor variable.

@blogArticlesListTagsTagColor: red;

Here are standard blog articles list tags styles.

.blog-articles-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: @blogArticlesListTagsGapMobile;

    &__header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-mobile {
            .pixel-to-rem(padding-bottom, @blogArticlesListTagsHeaderMobilePaddingBottom);
        }
    }

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

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

Styles reference¶

Webcomponents reference¶

h-accordion

Blog Articles List Tags¶

Example¶