Sign in Get Started

css cards

Ioannis Vrontinos 
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 15%;
  height: 200px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5%;
  }
  
  .card:hover {
    cursor: pointer;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    width: 20%;
    height: 250px;
  }
View another examples Add Own solution
Log in, to leave a comment

3.67
3
Newt 105 points 

                                    <div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

3.67 (3 Votes)
0
4
4
Frackle 115 points 

                                    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px, 0px, 50px rgba(0, 0, 0, 0.2)

4 (4 Votes)
0
3.8
5
Nate Diamond 95 points 

                                    // Hello Friends, I have listed over 30+ best card designs made with HTML, CSS, and JS. Check out these excellent CSS card design examples which are available on Codepen.

<div class="container">
    <div class="cards grid-row">
      <div class="card">
        <div class="card-top">
          <img src="img1.jpg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>JavaScript Quote Generator</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-yellow">Blog</a>
        </div>
      </div>
      <div class="card">
        <div class="card-top">
          <img src="img2.jpg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>How to Build HTML Minifier</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-sky">Blog</a>
        </div>
      </div>
      <div class="card">
        <div class="card-top">
          <img src="img3.jpg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>How to Build Signature Pad</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-dpink">Blog</a>
        </div>
      </div>
      <div class="card">
        <div class="card-top">
          <img src="img4.jpeg" alt="Blog Name">
        </div>
        <div class="card-info">
          <h2>How to Build Gsap Gallery</h2>
          <span class="date">Monday, Jan 20, 2021</span>
          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        </div>
        <div class="card-bottom flex-row">
          <a href="#" class="read-more">Read Full Blog</a>
          <a href="#" class="button btn-dpink">Blog</a>
        </div>
      </div>
    </div>    
  </div>
  
  
  
  //CSS
  
  
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  background: #e8eff7;
}
.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  margin: 20px 0;
}
.card-top img {
  display: block;
  width: 100%;
}
.container {
  width: 95%;
  margin: auto;
}
.card {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
}
.card-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}
.card-info h2 {
  font-size: 18px;
  margin: 10px 0 5px 0;
}
.date {
  margin-bottom: 10px;
}
span,p {
  font-size: 15px;
  display: block;
}
.excerpt {
  color: #aeaeae;
}
.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-bottom {
  margin-top: 20px;
}
.button {
  text-decoration: unset;
  font-weight: 600;
  text-transform: uppercase;
  color: #4e4e4e;
  width: 80px;
  text-align: center;
  font-size: 15px;
  line-height: 30px;
  border-radius: 5px;
  background: #f2f4f6;
}
.read-more {
  text-decoration: unset;
  color: #000;
  font-weight: 600;
}
.btn-yellow {
  background: #ffb91d;
}
.btn-sky {
  background: #d2f9fe;
}
.btn-dpink {
  background: #e8d3fc;
}

3.8 (5 Votes)
0
4.38
8
Mohammed Kalim 95 points 

                                    <!DOCTYPE html>
<html>
<head>
 <title>Cards</title>
</head>

<style type="text/css">


*{
 margin: 0px;
 padding: 0px;
}
body{
 font-family: arial;
}
.main{

 margin: 2%;
}

.card{
     width: 20%;
     display: inline-block;
     box-shadow: 2px 2px 20px black;
     border-radius: 5px; 
     margin: 2%;
    }

.image img{
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  

 
 }

.title{
 
  text-align: center;
  padding: 10px;
  
 }

h1{
  font-size: 20px;
 }

.des{
  padding: 3px;
  text-align: center;
 
  padding-top: 10px;
        border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
button{
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding:10px;
}
button:hover{
  background-color: black;
  color: white;
  transition: .5s;
  cursor: pointer;
}

</style>
<body>

<div class="main">

 <!--cards -->

<div class="card">

<div class="image">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->

<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->

<div class="card">

<div class="image">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>

</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
</div>
</body>
</html>

4.38 (8 Votes)
0
3.67
3
Lahza 80 points 

                                    
  <div class="card">
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a href="https://amzn.to/3jOaZKL">Test 1</a></li>
        <li class="tab"><a class="active" href="#test5">Test 2</a></li>
        <li class="tab"><a href="#test6">Test 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4">Test 1</div>
      <div id="test5">Test 2</div>
      <div id="test6">Test 3</div>
    </div>
  </div>

3.67 (3 Votes)
0
Are there any code examples left?
Find Add Code snippet
New code examples in category CSS
SHOW MORE
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
buy card using html and css how to create a card using css html css card w3school how to style cards css card properties in css card details css card with a form html and css list of cards html css css card view simple card html css Card section css css cards w3schools small card html and css create a card class html css how to make cards making a card in css Add a card to the right in HTML build card in html create cards in html css card immages html css for card with photo image on card css w3schools card css images in card css css card example how to make a card in html with link and image cards in html and css css card view card with picture css card code html css card layout cards using html css div card make a card with html create card with image css create a card item html image card view css card with image left html and css card with image left html and scss css for card how to position cards in html card details html css 3 cards html w3schools image card what to put on about card css html code for card component how to make css cards card with img css simple cards in html and css cards in html and css simple css about card inserting image in cards in html css how to make a card in html css w3schools about card css cards div css display card elements css card__image css information card css cards figure css creat css cards css code for cards html css custom card How to style card in css css card with image design creating cards using html and css card html and css card view css cards css details card html and css code add new css card how to make a card form in html simple card in css card en css simple card en css design ways to display cards in css ways to display cards in css details card css about us card html css card images css image card html cards display in css card css style displaying in cards css small card html css example infromation card css how to make cards using css making cards using css how to generate card from html definition card html cards list html css card css examples html code cards how to make a card whith html and css how to display information in card css html button into a card image in card in w3 schools about cards html make a card with html and css masion cards in css style a card css w3 CSS Cards w3school cards css w3 css image card how to make a card css card css example how to make card layout using html and css how to make card layout use html and css show images on cards css putting images on cards html card tag html how to create meaningful card syntax in html css tutorial on card images html css image card html code to show card what html element for cards html / css card html how to write on a card simple card using css creating a writing card in html image card w3schools how do i code card in html how to do a card in css card html w3schools cards in css 10 card in html cards using css how to make a card in html html cards image how to create card with image css number of cards in html card css with image with code how to make html card cards with css card tags html card and photo css how to add card in html creating card with html css and javascript how to create card html cards in html css create card html card within a card html html 5 cards cards html exemples card css img card using html and css image cards html html and css cards create card with html and css card image html css simple card image with description html css how to make a card html how to set images in card in css cards html css image card css with image creating cards with html and css make a simple card in html making a image card in css put image in a card in css put image in aa card in css cards plain html cards with css how to create cards html css css code for making card html card w3schools css create card with info html card component html cool cards card box html html card layout div card html create cards with css image display card html example image display card html card tag using html build a plain card with box in html about card html css js css img card how to make the card by css how to card in html images card css html siple card card css image card img css how to create cards in html and linkiing them to documents creating a card in css html div card example image in card css images card with css CARD IMG CSS card with image w3 schools make cards in css css image cards html and css card with image left html and css card card in card css how to make a card in css how to make image cards html css css html simple cards css html cards small card in html html css create cards how to create image css card card with image design css iamages as cards css creating a card element in html/css images for card in html images for card in in html html cards how to style html cards card in html css how to create a card in css simple html card div create a card css card with photo html css code card css make card list html css interactive card html create a card in html basic card css css simple card how to create an image card css html card element how to do cards in css html simple card card html how to make cards html info card in html css html image card html css for card css img in card card in css card css html image card in css css to make a card how to make cards by css card element html example for card to card in html add cards in html css image in card html list card stacked card css info card html how to make card as button html how to add image to card html css show cards css html w3 CSS card how to create cards CSS photos card html css add card en html css html cards with image css js cards for html how to create a card layout in html and css generate card from html style to display card html html for simple card html and css card with image on the left css cards with images html cardd card hmtl css for image create css image card card with image html how to link cards in html creating card in css how to make card in html card css card with image and text html css item card html how to putt html in a card cards in html card images html addon card html image card style css how to crae cards html css how to make a card by using simple css html card html card html card html card html card html card html card html card html card html card card syntax in html how to create cards in html how to make a card in html and css html css div cards how to make cards in css html card examples card in html MAKE A CARD CSS small card html code example create card with image html css card example css simple card css how to set card image html' html how to make a card card css e html card form html css image in a card how to add cards in css create a card useing html css howto create card in css img card css card form html css create card css w3 image cards cards html css educational card html id card css card view in html and css how to get card effect in icss post card css cards html card html html card html instance show cards cards html cards style css card html design card exampe css html get a card under a card card image in css how to create cards with image in html html cards no css image card in html create details card html making card in css diffrent card styles html css card like effect css show tags on cards css card css w3schools make a card html w3schools card html how to make a postcard like table using css create card with css card en html image card design multiple cards using w3.css card html css tag html for card how to take an image and make it as a card html css how to put an html code in a card using css how to mkae a css card html tag for card content cards with style css create crad using ul li create card htnl css how to make a project card in html css card example in css create own card html css make a card html css card css card component html card style how to add hover in blog card using css w3scholl html cards css card html tag w3schools card bootstrap cards with images css using card w3schools como fazer cards em html e css how to use card in html recommended tag on card css 5 cards in container css different cards design html css cusing card html and css card component html card style in css html css cards html simple card css elevation in card in css how to make a card in html css make a card in html How to add a template card using HTML and CSS inline card styling css creaet a simple card in css html w3 card bootstrap4 w3 card bootstrap html page with cards cards design in html jquery image 3 card meeting card css html html card sstyle make css cards Css and HTML Cards how make container to put cards css html create a card in html css css image for cards card component css card info html html card with icon and text make card with css cards javascript card css properties card html css example w3 bootstrap cards with image small box card css card with image css html card css differnet card sections css card background image css card box w3schools vanilla CSS card list responsive cards card dimensions css card icons css card designs html quote card css elevated card html make a card html css horizontal card html card animation in css styling a card div css styling div cards cards css examples card ave image html css create card using css card horizontal css card styling html form with cards php horizontal card css image cards card with details html css html tag for a card responsive cards in css card image for html different types of css cards how to create card in html codepen html greeting card how to make card css responsive card view in html image card with css and html css div card style create custom card css html for adding card w3schools responsive cards row css cards responsive shadow best way to write cards html css html cards effect html responsive cards card works html css cards effect css html information card create a custom card html w3schools cards bootstrap cards examples css cards effect in html simple card with avatar in html html simple horizontal card simple css card design display cards using javascript how to use my card template in html simple vertical card html css w3schools com photo card tag on card html css card he html card with css css info card hover on cards using shadows w3schools how do create a card with image using css w3schools card slider how to make a card using css media card css examples card example html css w3school css card hmtl and css dsiplay card cards design html four cards design html html cards examples 3 layeer card backgroudn css image cards with text css card in html and css card html element image in card javascript create cards on css card css card box shadow css display cards card without bootstrap how to make the the whole card layout responsive div in php 3 cards html css html css info card responsive card cards with images html css 3 cards in a row with images html css card for html card view in css customize cards in html css css card image and text html usercards html css offer card with button info cards html css image card html css card effect css responsive card layout cards layout htmk card generator css card list css html card template card layout css how to create tag cards with css how to create photo card in html shadow card image cards html html css card layout cards apear css how to make when we click on button 3 cards appear in a row css creating cards html css https://www.w3schools.com product card how to create title card in css how to make card beautiful in css how to make a shadow box card html simple card html responsive test image in card shape responsive card design cards without image css card styles css card image html html for card css how to make cards with pictures how to style a card css html website building cards html card design css card css without image horizontal cards css card image css html text card making a card in html design cards in css code for cards html card box w3school how to make a card using html and css image cards in html how to create a card with images css css cards example how to make a div box look like a card make card html css create cards w3schools card height css card style card html with picture bootstrap card w3 academy cards html css css images card add image cards in html with section in one page web simple html card template how to decorate css cards creating a card with image in html and css html draw box card styling a card css how to create a card with css html button cards making cards with recent websites html CARD CSS EXMAPLE how to make cards in html postCard css completed status cards html css how to create a ful page card simple cards with button css simple cards css imae cards w3c school image cards css 6 boxes card html card examples css card panel css how to design cards with html Information Card css 3 css card img in card how to make a div like card view css how to make a div like cardview csss css making a card round side cards change css card css design html cardturns card using css css card next effect css picture card model css with cards information card html Picture Crad css card_style.css html card with image cards data html cards layout css how to Make a css card css image card cards with text css create card html and css creat card html and css the best way to create card css caards in html make card in css w3schools html cards simple html css card creating a card with html and css round cards html a card in css card css w3 basic cards html simple cards html css card image text css card in right side responsive card with icon in html css code card with knot html css add card html template how to write a text css in a card create a card in html with javascript user \cards css code card html post card html how to create a card using html and css card menu in html css card with image and text how to create card viewin html and css how to create card in html and css how to amke a card css jquery card padding card colors css html css card background html contact cards html css status card§ make card using css card img html card background css card design html css html cards and image custom card html card in react w3school w3 card media make a css card styling cards css html photo card simple html card how to make card image css three cards html code css example three cards html code css how to place a card in css css card raised list of cards css simple css card how to apply css on cards cantact card desgin html how to make card of color using html and css whats a card in CSS background image card html card image padding html bootstrap card w3schools card code in htmlcss card with html and css card woith css css for cards = cards.css add image on card in html ask question card in html how tro make cards css posts card html cards bootstrap w3schools creating a card html completed in card html css image on card html css add card using css property card view design html what is a css card images on cards html creating image cards in css create a div and card with table create a card using using javascript create a card using using javascript w3 schools w3 school bootstrap cards how to create card with css how to make more create cards in html bootstrap cards w3schools how to make card and input box in html cards css card menu html how to make card in which their is horizontal image in html css card with image card with image css info card section using html new york city css card id card design html css how to display cards css html simple listing card website making css cards card-text css simple card design css website cards css image card css card llike bordere css how to make header cards html css css making a card how to create cards of other web pages in html html cards card with image and text html card border design css css cards w3schools bootstrap card card css effect how to cards code in css css card css create card card.html how to make cards css Image html card how to build name and value card in css card view htmls cards example html card display for css card view design css how to select a card in html div creating a card using css card example chtml card using html css connect cards html css create own css card create own css catd html card design pick a card javascript css css card design css gallery cards basci html cards with css styling user card in css creating multiple cards as divs with javascript make cards javascript card image space html css div card in html button card image html w3schools bootstrap 4 card shadow card in html css membership card card design in html card website link html css how to make an image card css card style css card image button css html css card with background iamge card view image in html css how to style card css css card examples make a card in css card for add new css how to make card in css how to create card elements in css how to create card detail using dom in javascript making a card look better html how to create a card css size of cards css card css cotrole bootstrap w3schools cards bootstrap card background image w3schools card bootstrap 4 w3schools display cards ike ladder in html css hmtl make cards html make cards html make card html picture card how to make a card with html elements in javascript card view image in html create cards html css card css card attributes in html js card layout javascript css cards javascript css caards card design in css create a card with website on it html css create a list of all planets in html using css cards shape html page background card design card elevation css card element css card border html css card border html how to style cards in css html card inside card how to create cards in css best element to make a card html html css id card css card properties card view normal html css card design css css crads css ard simple css card with buttons desgin on card css html card design using html and css cards using html and css how to create nice cards with HTML css set of cards html javascript create html card javascript create card css @media card create card in css creating cards css how to make a card with css small icon card simple css simple image card html image card make cards image css card layout with texfield css showing members as card design html css styling cards in css whte card css good card padding css is card html tag ? simple card with css how to make a cards around a div in html css coding card html css css card example html css card border css card design in html css card block in css inserting cards in html code css card with icon html create card html info card css card effect how to make card menu css html card design in html and css tutorial css card active
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with
Not registered?
Sign up takes less than a minute

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source