CSS Recipe Cards
CSS recipe cards are an productive way to showcase your delicious food content on your website. They can be customized to highlight new recipe card using html and css. You can also add features like serving time and total calories informations.
Recipe card HTML CSS
Avacado
Toast
5min
1 serve
<div class="recipe-card-1" style="
background-image: url('https://source.unsplash.com/MhpxHv0FKtE');
">
<div class="recipe-details-container">
<div class="recipe-info">
<h3>Avacado <br />Toast</h3>
<div class="recipe-ratings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="20" height="20"
stroke-width="1.5" stroke="#ffdd6f">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</div>
<div class="recipe-overview">
<div class="recipe-time">5min</div>
<div class="recipe-serve">1 serve</div>
</div>
</div>
</div>
</div>.recipe-card-1 {
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.recipe-card-1 .recipe-details-container {
height: 100%;
min-height: 500px;
}
.recipe-card-1 .recipe-info {
width: 100%;
padding: 2rem 1.4rem;
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
color: white;
z-index: 9999;
}
.recipe-card-1 .recipe-info h3 {
font-size: 2rem;
}
.recipe-card-1 .recipe-info::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
.recipe-card-1 .recipe-ratings {
margin-top: 10px;
}
.recipe-card-1 .recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-card-1 .recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
}
.recipe-card-1 .recipe-time::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
.recipe-card-1 .recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
}
.recipe-card-1 .recipe-serve::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23fff'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}.recipe-card-1 {
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
position: relative;
border-radius: 20px;
overflow: hidden;
.recipe-details-container {
height: 100%;
min-height: 500px;
}
.recipe-info {
width: 100%;
padding: 2rem 1.4rem;
position: absolute;
bottom: 0;
left: 0;
box-sizing: border-box;
color: white;
z-index: 9999;
h3 {
font-size: 2rem;
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
}
.recipe-ratings {
margin-top: 10px;
}
.recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
&::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
}
.recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
&::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23fff'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}
}
}Recipe card with icons
Cream of Tomato Soup
Meal with Tomato Soup
10min
1-2 serving
248
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, fuga nihil. Asperiores deserunt omnis tempora beatae dolore quaerat.
<div class="recipe-card-3">
<div class="recipe-cover">
<img src="https://source.unsplash.com/FaJb5Cygyvw" alt="cover img" />
</div>
<div class="recipe-info">
<span>Cream of Tomato Soup</span>
<h4>Meal with Tomato Soup</h4>
<div class="recipe-ratings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffb600">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffb600">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffb600">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffb600">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="20" height="20"
stroke-width="1.5" stroke="#ffb600">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</div>
<div class="recipe-overview">
<div class="recipe-time">10min</div>
<div class="recipe-serve">1-2 serving</div>
<div class="recipe-calories">248</div>
</div>
<div class="recipe-about">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam, fuga nihil. Asperiores deserunt omnis
tempora beatae dolore quaerat.</p>
</div>
</div>
</div>.recipe-card-3 {
position: relative;
border-radius: 15px;
overflow: hidden;
background-color: #fff;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.recipe-card-3 .recipe-cover {
max-height: 160px;
overflow: hidden;
}
.recipe-card-3 .recipe-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
.recipe-card-3 .recipe-info {
padding: 20px;
}
.recipe-card-3 .recipe-info h4{
color: #000;
font-weight: bold;
}
.recipe-card-3 .recipe-info span{
color: #000;
}
.recipe-card-3 .recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-card-3 .recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
}
.recipe-card-3 .recipe-time::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23808080' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
.recipe-card-3 .recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
}
.recipe-card-3 .recipe-serve::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23808080'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}
.recipe-card-3 .recipe-calories {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
}
.recipe-card-3 .recipe-calories::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23808080'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z' /%3E%3C/svg%3E%0A");
width: 22px;
height: 22px;
margin-right: 4px;
}
.recipe-card-3 .recipe-about {
margin-top: 16px;
}
.recipe-card-3 .recipe-about p{
font-size: 14px;
color: gray;
}
.recipe-card-3 .recipe-about p:nth-last-child(1){
margin-bottom: 0;
}.recipe-card-3 {
position: relative;
border-radius: 15px;
overflow: hidden;
background-color: #fff;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
.recipe-cover {
max-height: 160px;
overflow: hidden;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
}
.recipe-info {
padding: 20px;
h4 {
color: #000;
font-weight: bold;
}
span {
color: #000;
}
}
.recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
&::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23808080' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
}
.recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
&::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23808080'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}
}
.recipe-calories {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
color: #808080;
&::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23808080'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z' /%3E%3C/svg%3E%0A");
width: 22px;
height: 22px;
margin-right: 4px;
}
}
.recipe-about {
margin-top: 16px;
p {
font-size: 14px;
color: gray;
&:nth-last-child(1) {
margin-bottom: 0;
}
}
}
}Dark theme recipe card
Meal with salmon and zucchini
5min
1 serve
<div class="recipe-card-2" style="
background-image: url('https://source.unsplash.com/y6zQ3pP9dss');
">
<div class="recipe-details-container">
<div class="recipe-info">
<h3>Meal with salmon and zucchini</h3>
<div class="recipe-ratings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="20" height="20"
stroke-width="1.5" stroke="#ffdd6f">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</div>
<div class="recipe-overview">
<div class="recipe-time">5min</div>
<div class="recipe-serve">1 serve</div>
</div>
</div>
<div class="recipe-footer">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
</svg>
</a>
</div>
</div>
</div>.recipe-card-2 {
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.recipe-card-2 .recipe-details-container {
height: 100%;
min-height: 500px;
}
.recipe-card-2 .recipe-info {
width: 100%;
padding: 2rem 1.4rem;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
color: white;
z-index: 9999;
}
.recipe-card-2 .recipe-info h3 {
font-size: 2rem;
}
.recipe-card-2 .recipe-info::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
.recipe-card-2 .recipe-ratings {
margin-top: 10px;
}
.recipe-card-2 .recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-card-2 .recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
}
.recipe-card-2 .recipe-time::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
.recipe-card-2 .recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
}
.recipe-card-2 .recipe-serve::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23fff'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}
.recipe-card-2 .recipe-footer {
position: absolute;
bottom: 12px;
right: 12px;
width: 35px;
height: 35px;
transition: 0.3s ease-in-out;
}
.recipe-card-2 .recipe-footer:hover {
transform: scale(1.1);
}.recipe-card-2 {
background-repeat: no-repeat;
background-size: cover;
background-position: top left;
position: relative;
border-radius: 20px;
overflow: hidden;
.recipe-details-container {
height: 100%;
min-height: 500px;
}
.recipe-info {
width: 100%;
padding: 2rem 1.4rem;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
color: white;
z-index: 9999;
h3 {
font-size: 2rem;
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
}
.recipe-ratings {
margin-top: 10px;
}
.recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
&::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
}
.recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
&::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23fff'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}
}
.recipe-footer {
position: absolute;
bottom: 12px;
right: 12px;
width: 35px;
height: 35px;
transition: 0.3s ease-in-out;
&:hover {
transform: scale(1.1);
}
}
}Simple recipe card HTML
Meal with salmon and zucchini
5min
1 serve
<div class="recipe-card-4">
<div class="recipe-cover">
<img src="https://source.unsplash.com/Za_haKkO0ns" alt="cover img" />
</div>
<div class="recipe-info">
<h4>Meal with salmon and zucchini</h4>
<div class="recipe-ratings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#ffdd6f">
<path fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" width="20" height="20"
stroke-width="1.5" stroke="#ffdd6f">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</div>
<div class="recipe-overview">
<div class="recipe-time">5min</div>
<div class="recipe-serve">1 serve</div>
</div>
</div>
</div>.recipe-card-4 {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
cursor: pointer;
}
.recipe-card-4 .recipe-cover {
height: 200px;
overflow: hidden;
}
.recipe-card-4 .recipe-cover img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
.recipe-card-4 .recipe-info {
width: 100%;
height: 100%;
padding: 1.5rem;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
color: white;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
}
.recipe-card-4 .recipe-info::before{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 50%;
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
.recipe-card-4 .recipe-info::after{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 50%;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
.recipe-card-4 .recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-card-4 .recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
}
.recipe-card-4 .recipe-time::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
.recipe-card-4 .recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
}
.recipe-card-4 .recipe-serve::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23fff'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}.recipe-card-4 {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
cursor: pointer;
.recipe-cover {
height: 200px;
overflow: hidden;
img {
object-fit: cover;
object-position: center center;
max-width: 100%;
height: 200px;
width: 100%;
}
}
.recipe-info {
width: 100%;
height: 100%;
padding: 1.5rem;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
color: white;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 50%;
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 50%;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
}
}
.recipe-overview {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 1.4rem;
margin-top: 10px;
}
.recipe-time {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
&::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z' /%3E%3C/svg%3E");
width: 20px;
height: 20px;
margin-right: 4px;
}
}
.recipe-serve {
display: flex;
align-items: center;
flex-direction: row;
font-size: 12px;
&::before {
overflow: hidden;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 512 512' width='24' height='24' fill='%23fff'%3E%3Cpath d='M48,272H90.523a23.832,23.832,0,0,0,6.393,25.692l65.678,60.2.006-.006c.055.05.1.106.161.154L266.554,448H264a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8h96a8,8,0,0,0,8-8V456a8,8,0,0,0-8-8V435.313l4.284-4.284A39.735,39.735,0,0,0,376,402.745V353.733l29-63.8A23.884,23.884,0,0,0,405.776,272H464a24.028,24.028,0,0,0,24-24V232a8,8,0,0,0-8-8H448v-8c0-92.636-75.364-168-168-168V32h8a8,8,0,0,0,0-16H224a8,8,0,0,0,0,16h8V48C139.364,48,64,123.364,64,216v8H32a8,8,0,0,0-8,8v16A24.028,24.028,0,0,0,48,272Zm57.677,5.1a7.823,7.823,0,0,1,7.456-5.1H117.7a8.016,8.016,0,0,1,7.283,4.689l6.014,13.23,0,.012,13.48,29.655L107.727,285.9A7.823,7.823,0,0,1,105.677,277.1ZM352,480H272V464h80Zm37.878-204.331a7.864,7.864,0,0,1,.557,7.641l-29.718,65.379A8.013,8.013,0,0,0,360,352v50.745a23.847,23.847,0,0,1-7.029,16.971l-6.628,6.627A8,8,0,0,0,344,432v16H290.984L174.56,347.1l-29-63.789A8,8,0,0,1,152.848,272h5.263a7.956,7.956,0,0,1,7.156,4.422l27.578,55.156a8,8,0,0,0,4.184,3.85l80,32a8,8,0,0,0,4.911.333l32-8a8,8,0,0,0,5.083-3.93l43.452-79.662A8,8,0,0,1,369.5,272h13.654A7.864,7.864,0,0,1,389.878,275.669ZM180.944,272h165.58l-39.867,73.09-26.088,6.521L205.8,321.7ZM248,32h16V48H248ZM80,216c0-83.813,68.187-152,152-152h48c83.813,0,152,68.187,152,152v8H80ZM40,240H472v8a8.009,8.009,0,0,1-8,8H48a8.009,8.009,0,0,1-8-8Z'%3E%3C/path%3E%3C/svg%3E");
width: 24px;
height: 20px;
margin-right: 4px;
}
}
}Recipe card codepen
Author: klesht