Blog Articles List¶

Styles for a blog articles list used in blog_articles_list module.

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

.blog-articles-list__header
.blog-articles-list__footer

Example¶

HTML

    <article class="blog-articles-list">
        <header class="blog-articles-list__header">
            Header
        </header>

        <div>Category product list content</div>

        <footer class="blog-articles-list__footer">
            Footer
        </footer>
    </article>

The .blog-articles-list class was designed to be used with block elements like <article>. However, you can use them with any element. Eg. <nav> or <section>.

LESS¶

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

Blog Articles List variables¶

Variables used to style blog-articles-list.

@blogArticlesListHeaderMarginBottom: calc(@globalSpacing * 2.5);
@blogArticlesListFooterMarginTop: calc(@globalSpacing * 1.5);

@blogArticlesListHeaderGapMobile: calc(@globalSpacing * 2);
@blogArticlesListHeaderMarginBottomMobile: calc(@globalSpacing * 2);
@blogArticlesListFooterMarginTopMobile: calc(@globalSpacing * 2);

If you want to change blog articles list styles, you can just change the variables. To change default margin-bottom for header just modify @blogArticlesListHeaderMarginBottom variable.

@blogArticleListHeaderMarginBottom: 4px;

Blog Articles List standard styles.¶

Here are standard blog-articles-list styles.

.blog-articles-list {
    display: flex;
    align-items: flex-end;
    flex-direction: column;

    &__header {
        width: 100%;

        display: flex;
        align-items: flex-end;
        justify-content: flex-end;

        margin-bottom: @blogArticlesListHeaderMarginBottom;
    }

    &__footer {
        margin-top: @blogArticlesListFooterMarginTop;
    }
}

@media screen and (max-width: @breakPointXs) {
    .blog-articles-list {
        &__header {
            flex-direction: column;
            align-items: flex-start;

            gap: @blogArticlesListHeaderGapMobile;
            margin-bottom: @blogArticlesListHeaderMarginBottomMobile;
        }

        &__footer {
            width: 100%;

            margin-top: @blogArticlesListFooterMarginTopMobile;
        }
    }
}

Modules reference¶

blog_articles_list