Article¶
Use article element for displaying the article anywhere on the page. It is used in blog_article_tile macro.
Structurally .article element contains following elements:
.article__hint.article__hint-content.article__image.article__main-section.article__header.article__category.article__date.article__title.article__content.article__link.article__info.article__author.article-comments.article-comments__quantity.article-comments__icon.article__separator.article-tags.article-tags__content.article-tags__tag
And one class modifier:
.article__main-section_full-padding
Examples¶
Here is an example of article element usage.
HTML
<article class="article" id="article-1">
<h-hint class="article__hint">
<a href="/link/to/article">
<picture class="image">
<img src="/link/to/image" class="article__image">
</picture>
</a>
<h-hint-content class="article__hint-content">
Go to entry My entry
</h-hint-content>
</h-hint>
<section class="article__main-section">
<header class="article__header">
<a href="/link/to/category" class="article__category overline overline_no-margin">
Name of the category
</a>
<span class="article__date">12.06.2023</span>
</header>
<h-hint class="article__hint">
<a href="/link/to/article" class="article__title h6">My entry</a>
<h-hint-content class="article__hint-content">
Go to entry My entry
</h-hint-content>
</h-hint>
<div class="article__content">Short content of the article</div>
<h-hint class="article__hint">
<a href="/link/to/article" class="article__link link">Read more</a>
<h-hint-content class="article__hint-content">
Go to entry My entry
</h-hint-content>
</h-hint>
<div class="article__info">
<span class="article__author">John Snow</span>
<div class="article-comments">
<span class="article-comments__quantity">2</span>
<svg class="article-comments__icon icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-message-square"></use>
</svg>
</div>
</div>
</section>
<div class="article-tags">
<div class="article__separator separator"></div>
<div class="article-tags__content">
<a href="/link/to/tag1" class="article-tags__tag tag tag_interactive" id="article-tag-1">Tag 1</a>
<a href="/link/to/tag2" class="article-tags__tag tag tag_interactive" id="article-tag-2">Tag 2</a>
<a href="/link/to/tag3" class="article-tags__tag tag tag_interactive" id="article-tag-3">Tag 3</a>
<div>
</div>
</article>
Article tags¶
The .article classes were designed to be used with block elements like <article> or <div>. However, you can use them with any other element and customize it to your own needs.
LESS¶
You can modify any article less variable in your User Less section to change article styles.
Article variables¶
Variables used to style article.
@articleBorderWidth: 1px;
@articleBorderStyle: solid;
@articleBorderColor: @neutralColors200;
@articleBorderRadius: 4;
@articleNoTagsPaddingBottom: @globalSpacing * 0.75;
@articleImageBorderTopRadius: @articleBorderRadius;
@articleImageHeightMobile: 288px;
@articleImageHeight: 424px;
@articleMainSectionGap: @globalSpacing * 0.75;
@articleMainSectionPaddingTop: @globalSpacing * 0.75;
@articleMainSectionPaddingHorizontal: @globalSpacing;
@articleMainSectionFullPaddingPaddingBottom: @globalSpacing;
@articleCategoryColor: @globalFontColor;
@articleDateFontSize: @fontSizeInPxS;
@articleDateLineHeight: @lineHeightInPxS;
@articleDateColor: @globalFontColor;
@articleTitleFontSize: @fontSizeInPxXl;
@articleTitleLineHeight: @lineHeightInPxL;
@articleTitleFontWeight: bold;
@articleTitleColor: @globalFontColor;
@articleContentFontSize: @fontSizeInPxS;
@articleContentLineHeight: @lineHeightInPxS;
@articleContentColor: @globalFontColorSecondary;
@articleAuthorFontSize: @fontSizeInPxS;
@articleAuthorLineHeight: @lineHeightInPxS;
@articleAuthorFontWeight: bold;
@articleCommentsGap: @globalSpacing * 0.375;
@articleCommentsColor: @globalFontColor;
@articleCommentsQuantityFontSize: @fontSizeInPxS;
@articleCommentsQuantityLineHeight: @lineHeightInPxS;
@articleCommentsQuantityFontWeight: bold;
@articleSeparatorPadding: @globalSpacing * 2;
@articleTagsMarginTop: @globalSpacing;
@articleTagsPaddingHorizontal: @articleMainSectionPaddingHorizontal;
@articleTagsPaddingBottom: @articleMainSectionPaddingTop;
@articleTagsGap: @globalSpacing * 0.5;
@articleTagsContentBorderTopWidth: 1px;
@articleTagsContentBorderTopStyle: solid;
@articleTagsContentBorderTopColor: @neutralColors300;
@articleTagsContentPaddingTop: @globalSpacing;
@articleTagsTagTextDecoration: none;
@articleTagsTagColor: @neutralColors800;
If you want to change article styles, you can just change the variables. To change default border-color just modify @articleBorderColor variable.
Article styles¶
Here are standard article styles.
.article {
border: @articleBorderWidth @articleBorderStyle @articleBorderColor;
.pixel-to-rem(border-radius, @articleBorderRadius);
&_no-tags {
padding-bottom: @articleNoTagsPaddingBottom;
}
&__slide {
height: 100%;
}
&__image {
.pixel-to-rem(border-top-left-radius, @articleImageBorderTopRadius);
.pixel-to-rem(border-top-right-radius, @articleImageBorderTopRadius);
width: 100%;
height: @articleImageHeightMobile;
object-fit: cover;
&-hint {
width: auto;
}
@media screen and (min-width: @breakPointXs) {
height: @articleImageHeight;
}
}
&__main-section {
height: 100%;
display: flex;
flex-direction: column;
gap: @articleMainSectionGap;
padding: @articleMainSectionPaddingTop @articleMainSectionPaddingHorizontal 0;
&_full-padding {
padding-bottom: @articleMainSectionFullPaddingPaddingBottom;
}
}
&__header {
display: flex;
align-items: center;
justify-content: space-between;
}
&__category {
flex: 1;
color: @articleCategoryColor;
text-decoration: none;
&:hover {
color: @articleCategoryColor;
}
}
&__date {
.font-size(@articleDateFontSize);
.line-height(@articleDateLineHeight);
color: @articleDateColor;
}
&__title {
.font-size(@articleTitleFontSize);
.line-height(@articleTitleLineHeight);
font-weight: @articleTitleFontWeight;
color: @articleTitleColor;
text-decoration: none;
&:hover {
color: @articleTitleColor;
}
}
&__content {
.font-size(@articleContentFontSize);
.line-height(@articleContentLineHeight);
color: @articleContentColor;
}
&__info {
display: flex;
align-items: center;
justify-content: space-between;
}
&__author {
.font-size(@articleAuthorFontSize);
.line-height(@articleAuthorLineHeight);
font-weight: @articleAuthorFontWeight;
}
&-comments {
display: flex;
align-items: center;
gap: @articleCommentsGap;
color: @articleCommentsColor;
text-decoration: none;
&__quantity {
.font-size(@articleCommentsQuantityFontSize);
.line-height(@articleCommentsQuantityLineHeight);
font-weight: @articleCommentsQuantityFontWeight;
}
}
&-tags {
margin-top: @articleTagsMarginTop;
padding: 0 @articleTagsPaddingHorizontal @articleTagsPaddingBottom;
&__content {
display: flex;
flex-wrap: wrap;
gap: @articleTagsGap;
border-top: @articleTagsContentBorderTopWidth @articleTagsContentBorderTopStyle @articleTagsContentBorderTopColor;
padding-top: @articleTagsContentPaddingTop;
}
&__tag {
text-decoration: @articleTagsTagTextDecoration;
color: @articleTagsTagColor;
&:hover {
color: @articleTagsTagColor;
}
}
}
}