<div class=“blog-img”>
<img [src]=“data?.pictureUrl” alt=“” />
</div>
<div class=“blog-card-body”>
<div class=“blog-date”>
<span>{{ data?.startDate }}</span>
</div>
<div class=“blog-title”>
<h3>{{ data?.title }}</h3>
</div>
<div class=“blog-des”>
<p>{{ data?.summary }}</p>
</div>
<div class=“blog-read”>
<a href=“#”>Read More</a>
</div>
</div>
</div>
.blog-card {
overflow: hidden;
cursor: pointer;
.blog-img {
img {
height: 210px;
border-radius: 10px;
}
}
.blog-card-body {
padding: 15px 20px 35px 20px;
box-sizing: border-box;
.blog-date {
margin-bottom: 15px;
span {
color: $text-color;
font-family: $font-en-primary;
font-style: normal;
font-weight: 400;
font-size: $font-size-14;
display: block;
line-height: 26px;
}
}
.blog-title {
margin-bottom: 15px;
h3 {
color: $color-black-sec;
font-size: 28px;
line-height: 34px;
display: block;
font-style: normal;
font-family: $font-en-primary;
font-weight: 600;
transition: all 0.3s linear;
height: 68px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
&:hover {
color: $color-nill;
text-decoration: underline;
}
}
}
.blog-des {
margin-bottom: 30px;
p {
font-size: $font-size-16;
line-height: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-family: $font-en-primary;
font-weight: 400;
opacity: 0.7;
}
}
.blog-read {
a {
color: $color-nill;
font-family: $font-en-primary;
font-weight: 600;
font-size: $font-size-16;
text-decoration: underline;
cursor: pointer;
transition: all 0.3s linear;
&:hover {
color: $primary-color;
}
}
}
}
}
@media (max-width: 1429px) {
.blog-card {
.blog-card-body {
.blog-title {
h3 {
font-size: 23px;
line-height: 29px;
}
}
}
}
}
@media (max-width: 556px) {
.blog-card {
.blog-img {
img {
height: 240px;
}
}
.blog-card-body {
.blog-title {
h3 {
font-size: 28px;
line-height: 34px;
}
}
.blog-des {
p {
font-size: 18px;
line-height: 26px;
}
}
.blog-read {
a {
font-size: 18px;
line-height: 26px;
}
}
}
}
}
