Article - CZECHGROUP.cz

Latte / Html

Non-integrated version

We use the spec.scss component for blog article specifications - section, reading time, date, etc.

We can also create a separate component for the author.

{default $type = "small"}
{default $img = false}

<article class="article article--{$type}">


    <div class="article__figure --flex --flex-column --flex-end-x">

        <a class="article__figure-link" href="#" n:if="$img">
            <img class="article__img" src="{$img}" alt="{$item|name|striptags}">
        </a>

        {var $img = false}
        <a href="#" class="article__author author --flex --flex-centre-y">
            <div class="author__figure" n:if="$img">
                <img class="author__img" src="{$img}" alt="Autor">
            </div>
            <div class="author__text">
                <span class="author__label">Article author</span>
                <span class="author__name">Author name</span>
            </div>
        </a>
    </div>

    <div class="article__text">
        <div class="article__spec spec">
            <span class="spec__item spec__item--date">20. 2. 2020</span>
            <a  href="#"
                    class="spec__item spec__item--rubric">
                Article rubric
            </a>
        </div>

        <h3 class="article__title --title-h2">
            <a href="#" class="article__link">
                Article name with longer text
            </a>
        </h3>
        <div class="article__perex">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Etiam sodales tellus non nisl vulputate faucibus. 
            Pellentesque id ipsum mattis sem mattis pulvinar.
        </div>
        <a class="article__link article__link--small"
           href="#">Show the whole article</a>
    </div>

</article>

Integrated version


{default $type = "small"}

<article class="article article--{$type}" n:if="isset($item)">

    {var $img = ("/blog/small/blg-{$item['id']}-11.jpg"|imageExist)}
    {if !$img}
        {var $img = ("/blog/middle/blg-{$item['id']}-11.jpg"|imageExist)}
    {/if}


    <div class="article__figure --flex --flex-column --flex-end-x">

        <a class="article__figure-link" href="{$item|link}" n:if="$img">
            <img class="article__img" src="{$img}" alt="{$item|name|striptags}">
        </a>
        {var $author = $item['author']}
        {if isset($author) && $author}
            {var $img = ("/autor/athr-{$author['id']}-12.jpg"|imageExist)}
            <a href="{$author|link}" class="article__author author --flex --flex-centre-y">
                <div class="author__figure" n:if="$img">
                    <img class="author__img" src="{$img|noescape}" alt="{$author|header|striptags}">
                </div>
                <div class="author__text">
                    <span class="author__label">{$web['BLOG_ARTICLE_AUTHOR']}</span>
                    <span class="author__name">{$author|header}</span>
                </div>
            </a>
        {/if}
    </div>

    <div class="article__text">
        {var $rubric = $item['rubric']}
        <div class="article__spec spec">
            <span class="spec__item spec__item--date">{$item['date_inserted']->format('j. n. Y')}</span>
            <a n:if="$rubric"
                    href="{$rubric|link|noescape}"
                    class="spec__item spec__item--rubric">
                {$rubric|header}
            </a>
        </div>

        <h3 class="article__title --title-h2">
            <a href="{$item|link}" class="article__link">
                {$item|header|noescape}
            </a>
        </h3>
        <div class="article__perex">
            {$item|perex:true|striptags}
        </div>
        <a class="article__link article__link--small"
           href="{$item|link}">{$web['BLOG_READ_MORE']}</a>
    </div>

</article>

CSS / SCSS

/* Article */

.article {
	flex-direction: column;
	display: flex;
	align-items: center;
	
	@include media($medium){
		flex-direction: row;
	}
}

.article--small{
	margin: auto;
	max-width: 700px;
	flex-direction: column;
	
	@include media($xlarge){
		flex-direction: row;
	}
}

.article--large{
	max-width: 945px;
	margin: 0 0 55px 0;
}

/* Article | Spec */

.article__spec {
	margin-bottom: 15px;
}


/* Article | Figure */

.article__figure {
	max-width: 340px;
	width: 100%;
	height: 344px;
	position: relative;
	flex-shrink: 0;
	z-index: 1;
	padding: 18px 25px;
	
	@include media($xlarge){
		width: 344px;
		height: 344px;
	}
	
	&::after{
		@include pseudo(block, absolute);
		background: linear-gradient(to top, #000 0%, transparent 60%);
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		pointer-events: none;
	}
	
	
	.article--small &{
		height: 255px;
		
		@include media($xlarge){
			width: 255px;
			height: 255px;
		}
	}
	
}


/* Article | Author */

.article__author{
	z-index: 2;
}

/* Article | Img */

.article__img{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Article | Title */

.article__title {
	font-weight: bold;
	margin: 0 0 10px 0;
	
	@include media($large) {
		font-size: 2.5rem;
	}
}

/* Article | Perex */

.article__perex {
	font-size: 1.5rem;
	margin: 0 0 15px 0;
}

/* Article | Link */

.article__link {
	text-decoration: underline;
	
	.article__title & {
		text-decoration: none;
		color: $color__text;
		
		&:hover, &:focus {
			color: $color__primary;
		}
	}
}

.article__link--small{
	font-size: 1.5rem;
}

/* Article | Text */

.article__text{
	padding: 14px 0px;
	max-width: 340px;
	
	
	.article--large &{
		@include media($medium){
			padding: 14px 34px;
			max-width: none;
		}
	}
	
	
	.article--small &{
		@include media($xlarge){
			padding: 14px 34px;
			max-width: none;
		}
	}
}

/* Spec */

.spec {
	margin: -2px -8px;
}


.spec--header-top{
	margin: -2px -8px -2px -33px;
}

/* Spec | Item */

.spec__item {
	color: $color__gray-darker;
	font-size: 15px;
	margin: 2px 8px;
	display: inline-flex;
}

.spec__item--date{
	font-size: 1.3rem;
	padding: 6px 14px;
	color: #fff;
	font-weight: 700;
	background: $color__primary;
}

.spec__title--hide {
	display: none;
}

/* Author */


.author{
	flex-shrink: 0;
	
	.about-author &{
		margin: 0 20px 15px 0;
	}
}

.author__figure {
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: 50%;
	margin: 0 10px 0 0 ;
	border: 1px solid $color__gray;
}

.author__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author__text{
	line-height: 1.2;
}


.author__label {
	display: block;
	font-size: 13px;
	color: $color__gray-darker;
}

.author__name {
	font-size: 1.5rem;
	color: #fff;
	font-weight: 700;
	
	.author--dark &{
		color: $color__text;
	}
}

{default $type = "small"}

<article class="article article--{$type}" n:if="isset($item)">

    {var $img = ("/blog/small/blg-{$item['id']}-11.jpg"|imageExist)}
    {if !$img}
        {var $img = ("/blog/middle/blg-{$item['id']}-11.jpg"|imageExist)}
    {/if}


    <div class="article__figure --flex --flex-column --flex-end-x">

        <a class="article__figure-link" href="{$item|link}" n:if="$img">
            <img class="article__img" src="{$img}" alt="{$item|name|striptags}">
        </a>
        {var $author = $item['author']}
        {if isset($author) && $author}
            {var $img = ("/autor/athr-{$author['id']}-12.jpg"|imageExist)}
            <a href="{$author|link}" class="article__author author --flex --flex-centre-y">
                <div class="author__figure" n:if="$img">
                    <img class="author__img" src="{$img|noescape}" alt="{$author|header|striptags}">
                </div>
                <div class="author__text">
                    <span class="author__label">{$web['BLOG_ARTICLE_AUTHOR']}</span>
                    <span class="author__name">{$author|header}</span>
                </div>
            </a>
        {/if}
    </div>

    <div class="article__text">
        {var $rubric = $item['rubric']}
        <div class="article__spec spec">
            <span class="spec__item spec__item--date">{$item['date_inserted']->format('j. n. Y')}</span>
            <a n:if="$rubric"
                    href="{$rubric|link|noescape}"
                    class="spec__item spec__item--rubric">
                {$rubric|header}
            </a>
        </div>

        <h3 class="article__title --title-h2">
            <a href="{$item|link}" class="article__link">
                {$item|header|noescape}
            </a>
        </h3>
        <div class="article__perex">
            {$item|perex:true|striptags}
        </div>
        <a class="article__link article__link--small"
           href="{$item|link}">{$web['BLOG_READ_MORE']}</a>
    </div>

</article>