crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 03:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: FeaturedBlogCard

Browse Source
This commit is contained in:
unknown 2021-09-02 20:10:55 +07:00
parent 384cbf342d
commit 27b452b0c0
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
View File

@ -2,14 +2,18 @@
.featuredCard{
@apply flex flex-row justify-center spacing-horizontal;
.featuredCardWrapper{
@apply flex flex-row justify-between;
max-width: 121.6rem;
}
}
.left{
max-width: 59.8rem;
min-height: 33.6rem;
}
.right{
padding-left: 6.4rem;
max-width: 61.8rem;
margin-left: 6.4rem;
max-width: 55.4rem;
min-height: 16.8rem;
}
.titleWrapper{

22
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
View File

@ -15,19 +15,19 @@ interface FeaturedCardBlogProps{
const FeaturedCardBlog = ({ title, content, imgSrc, imgAuthor, date, authorName }: FeaturedCardBlogProps) => {
return (
<section className={s.featuredCard}>
<div className={s.left}>
<Image src={imgSrc} alt="image feature card"/>
</div>
<div className={s.right}>
<div className={s.titleWrapper}>
<DateTime date={date}/>
<a className={s.title}>{title}</a>
<div className={s.featuredCardWrapper}>
<div className={s.left}>
<Image src={imgSrc} alt="image feature card"/>
</div>
<div className={s.right}>
<div className={s.titleWrapper}>
<DateTime date={date}/>
<a className={s.title}>{title}</a>
</div>
<Author name={authorName} image={imgAuthor}/>
<div className={s.content}>{content}</div>
</div>
<Author name={authorName} image={imgAuthor}/>
<div className={s.content}>{content}</div>
</div>
</section>
)
}