<article class="pt-moderncard">
<section class="pt-moderncard__meta">
<img class="pt-moderncard__image" src="https://images.unsplash.com/photo-1507878866276-a947ef722fee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=30" alt="Image">
</section>
<section class="pt-moderncard__main">
<div class="pt-moderncard__body">
<header class="pt-moderncard__head">
<h1 class="pt-moderncard__headline">
Headline
</h1>
<p class="pt-moderncard__subhead">
Subline
</p>
</header>
<p class="pt-moderncard__excerpt">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<footer class="pt-moderncard__footer">
<ul class="pt-moderncard__list">
<li class="pt-moderncard__listitem">
<svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg> Location
</li>
<li class="pt-moderncard__listitem">
<svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg> Date
</li>
<li class="pt-moderncard__listitem">
<svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg> Time
</li>
<li class="pt-moderncard__listitem">
<svg class="pt-moderncard__icon" viewBox="0 0 384 512" id="map-marker" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M192 0C85.903 0 0 86.014 0 192c0 71.117 23.991 93.341 151.271 297.424 18.785 30.119 62.694 30.083 81.457 0C360.075 285.234 384 263.103 384 192 384 85.903 297.986 0 192 0zm0 464C64.576 259.686 48 246.788 48 192c0-79.529 64.471-144 144-144s144 64.471 144 144c0 54.553-15.166 65.425-144 272zm-80-272c0-44.183 35.817-80 80-80s80 35.817 80 80-35.817 80-80 80-80-35.817-80-80z"></path></svg> Category
</li>
</ul>
</footer>
</section>
</article>
.pt-moderncard {
display: flex;
background: white;
height: 335px;
}
.pt-moderncard__main {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 50%;
padding: 1em;
}
.pt-moderncard__meta {
flex-basis: 50%;
position: relative;
}
.pt-moderncard__headline {
margin-top: 0;
}
.pt-moderncard__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.pt-moderncard__list {
padding: 0;
margin: 0;
list-style-type: none;
}
.pt-moderncard__icon {
width: 20px;
height: 13px;
}
/* general page setup */
* {
box-sizing: border-box;
}
body {
background: grey;
display: grid;
grid-template-columns: 400px 400px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.