Create Post Card component

This commit is contained in:
2021-10-04 18:18:07 +02:00
parent 3b61ebd144
commit 7dbc7cdf73
4 changed files with 127 additions and 0 deletions

View File

@@ -0,0 +1,88 @@
.post-card {
width: 100%;
height: 100%;
max-width: 333px;
max-height: 222px;
background: $color-cream;
.wrap {
display: flex;
height: 100%;
padding: 40px 20px;
}
// Stamp
&__stamp {
position: absolute;
top: 20px;
right: 20px;
flex-shrink: 0;
img {
display: block;
width: 100%;
height: auto;
}
.flag {
position: absolute;
top: 10px;
left: -8px;
transform: rotate(-16deg);
width: 24px;
height: 24px;
box-shadow: 0 0 0 3px $color-cream;
border-radius: 100%;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
// Country Title
&__country {
position: relative;
min-width: 105px;
margin-top: auto;
margin-right: 15px;
font-size: rem(20px);
color: $color-primary;
font-family: $font-serif;
line-height: 1.1;
strong {
color: $color-secondary;
font-weight: 300;
}
}
// Border Line
&__border {
background-color: rgba(#000, 0.2);
height: 180px;
width: 1px;
margin-top: auto;
}
// Address
ul {
width: 60%;
margin-top: auto;
margin-left: 20px;
li {
display: block;
border-bottom: 1px solid #D9CABD;
margin-bottom: 2px;
}
p {
color: $color-text;
font-size: rem(14px);
line-height: 1.4;
}
}
}

View File

@@ -25,6 +25,7 @@
// Modules
@import "modules/globe";
@import "modules/post-card";
// Atomic Design System