Posted in
8922
12:12 pm, December 6, 2021
Rounded Card Design with Shadow Palette
What is it?
a nice rounded card design with a hero image on top, description text, hero title, more links and a shared by text area.
Preview
a preview of Rounded Card Design with Shadow Palette
What can i use this for?
You can use this in a listing page with blog articles, or listing for other types of content of this nature.
Original Source
Thanks to the author Burmese Potato , this code comes from the Card w/ Shadow Palette pen on Codepen.
Rounded Card Design with Shadow Palette Demo
View Demo Full Screen View Demo New Tab
Rounded Card Design with Shadow Palette Code
HTML
<section class="card">
<div class="card__img">
<img src="https://images.unsplash.com/photo-1587578855406-891fbbc8949e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="">
</div>
<div class="card__body">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolorsit, amet consectetur adipisicing elit corrupti delectus rep rehenderit.</p>
<div class="info">
<p class="info__highlight">Some Info</p>
<p>Here's More</p>
</div>
</div>
<div class="card__footer">
<p>Shared by <span>Username</span></p>
</div>
</section>
CSS
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700");
:root {
--color-primary-100: #0E2131;
--color-primary-200: #153149;
--color-neutral-100: #B4D2EA;
--color-neutral-200: #E6F0F8;
--gap: 1rem;
--gap-sm: 0.5rem;
--radius: 1rem;
--radius-sm: 0.5rem;
--shadow-color: 208deg 87% 4%;
--shadow-elevation-high:
0px 0.1px 0.1px hsl(var(--shadow-color) / 1),
0.1px 2.1px 2px -1.9px hsl(var(--shadow-color) / 1),
0.4px 11.5px 10.8px -3.7px hsl(var(--shadow-color) / 0.78);
}
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: var(--color-primary-100);
font-family: "Open Sans", sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
padding: 2rem;
}
.card {
background-color: var(--color-primary-200);
border-radius: var(--radius);
box-shadow: var(--shadow-elevation-high);
color: var(--color-neutral-100);
width: 95vw;
max-width: 20rem;
padding: var(--gap);
}
.card__img {
position: relative;
aspect-ratio: 10 / 9;
}
.card__img img {
border-radius: var(--radius-sm);
object-fit: cover;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.card__body {
font-weight: 300;
line-height: 1.6;
padding: var(--gap) 0;
text-align: justify;
}
.card__body h1 {
color: var(--color-neutral-200);
font-size: 1.3rem;
margin-bottom: var(--gap-sm);
}
.card__body .info {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.9rem;
margin-top: var(--gap);
}
.card__body .info .info__highlight {
color: #B3EADE;
font-weight: 700;
}
.card__footer {
border-top: 1px solid var(--color-neutral-100);
font-size: 0.9rem;
padding: var(--gap) 0 var(--gap-sm) 0;
}
.card__footer span {
color: var(--color-neutral-200);
display: inline-block;
font-weight: 700;
margin-left: 0.25rem;
}
Related Tags
Add Comment
Other Items in Boxes
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript