Skip to content

Blog Article

Styles for a blog article used in blog_article module.

Structurally there are two main elements .blog-article and .blog-article-details. .blog-article contains of the following three elements:

  • .blog-article__short-content
  • .blog-article__image
  • .blog-article__content

And .blog-article-details contains of the following four elements:

  • .blog-article-details__item
  • .blog-article-details__detail
  • .blog-article-details__link
  • .blog-article-details__icon

Example

Here is an example of blog article element usage. For presentation purposes we also used separator styles.

HTML
<article class="blog-article">
    <section class="blog-article__short-content">
        <h5>Here is some short content</h5>
        <p>short content short content short content short content </p>
    </section>

    <ul class="blog-article-details">
        <li class="blog-article-details__item">
            author <span class="blog-article-details__detail">John Doe</span>
        </li>

        <li class="blog-article-details__item">
            <hr class="separator separator-horizontal separator-horizontal_m hidden-xs-only"></hr>
        </li>

        <li class="blog-article-details__item">added: 12.04.2014</li>

        <li class="blog-article-details__item">
            <hr class="separator separator-horizontal separator-horizontal_m hidden-xs-only"></hr>
        </li>

        <li class="blog-article-details__item">
            <a href="/comments-section" class="blog-article-details__link">
                <svg class="icon blog-article-details__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-message-square"></use>
                </svg>

                <span>
                    <span class="blog-article-details__detail">12</span>
                    comments
                </span>
            </a>
        </li>

        <li class="blog-article-details__item">
            <hr class="separator separator-horizontal separator-horizontal_m hidden-xs-only"></hr>
        </li>

        <li class="blog-article-details__item">
            in category
            <a href="/category1" class="blog-article-details__detail blog-article-details__link">
                Category 1
            </a>
            ,
            <a href="/category2" class="blog-article-details__detail blog-article-details__link">
                Category 2
            </a>
            ,
            <a href="/category3" class="blog-article-details__detail blog-article-details__link">
                Category 3
            </a>
        </li>
    </div>

    <picture class="image">
        <img src="/path/to/main-image" class="blog-article__image">
    </picture>

    <section class="blog-article__content grid__row grid__row_xs-hcenter">
        <div class="grid__col grid__col_lg-8">
            <h5>Here is a full content of the blog article</h5>
            <p>It is a TinyMCE element so it an contain various elements like images:<p>
            <img src="path/to/example/image" />
            <span>Imagination is your limitation really</span>
        </div>
    </section>
</article>

Blog Article tags

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

Blog Article variables

Variables used to style a blog article.

@blogArticleGap: @globalSpacing * 1.5;

@blogArticleDetailsRowGap: @globalSpacing;

@blogArticleDetailsItemGap: @globalSpacing * 0.25;

@blogArticleDetailsItemFontSize: @fontSizeInPxS;
@blogArticleDetailsItemLineHeight: @lineHeightInPxS;

@blogArticleDetailsDetailFontWeight: bold;

@blogArticleDetailsLinkColor: @globalFontColor;
@blogArticleDetailsLinkTextDecoration: none;
@blogArticleDetailsLinkColorHover: @globalFontColor;
@blogArticleDetailsLinkTextDecorationHover: underline;

@blogArticleImageMaxHeight: 677;
@blogArticleImageWidth: 100%;

@blogArticleImageMaxHeightMd: 355;

@blogArticleImageMaxHeightXs: 469;

If you want to change blog article styles, you can just change the variables. To change a default max-height of the main image just modify @blogArticleImageMaxHeight variable.

@blogArticleImageMaxHeight: 200;

Blog Article styles

Here are standard blog article styles.

.blog-article {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: @blogArticleGap;

    &-details {
        display: flex;
        flex-wrap: wrap;
        row-gap: @blogArticleDetailsRowGap;

        &__item {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: @blogArticleDetailsItemGap;
            .font-size(@blogArticleDetailsItemFontSize);
            .line-height(@blogArticleDetailsItemLineHeight);
        }

        &__detail {
            font-weight: @blogArticleDetailsDetailFontWeight;
        }

        &__link {
            color: @blogArticleDetailsLinkColor;
            text-decoration: @blogArticleDetailsLinkTextDecoration;

            &:hover {
                color: @blogArticleDetailsLinkColorHover;
                text-decoration: @blogArticleDetailsLinkTextDecorationHover;
            }
        }
    }

    &__image {
        .pixel-to-rem(max-height, @blogArticleImageMaxHeight);
        width: @blogArticleImageWidth;
        object-fit: cover;
    }
}

@media screen and (max-width: @breakPointMd) {
    .blog-article {
        &-details {
            justify-content: flex-start;
        }

        &__image {
            .pixel-to-rem(max-height, @blogArticleImageMaxHeightMd);
        }
    }
}

@media screen and (max-width: @breakPointXs) {
    .blog-article {
        &-details {
            flex-direction: column;
        }

        &__image {
            .pixel-to-rem(max-height, @blogArticleImageMaxHeightXs);
        }
    }
}

Styles reference

Modules reference