Modern CSS cards design

Cards Bootstrap 5Free+ CSS

Modern CSS cards design: a hand-crafted, open-source Bootstrap 5 card. HTML & CSS included, ready to copy.

5.5k views171 downloads3 years ago

gosnippets.com/preview/modern-css-cards-design

Source Code

1<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
2<div class="first hero">
3  <img class="hero-profile-img" src="https://cdn.gamer-network.net/2018/metabomb/leagueoflegendsbestcarrychampions2018pantheon.jpg" alt="">
4  <div class="hero-description-bk"></div>
5  <div class="hero-logo">
6    <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt="">
7  </div>
8  <div class="hero-description">
9    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
10  </div>
11  <div  class="hero-date">
12    <p>20.02.2019</p>
13  </div>
14  <div class="hero-btn">
15    <a href="#">Learn More</a>
16  </div>
17</div>
18
19<div class="second hero">
20  <img class="hero-profile-img" src="https://i.pinimg.com/originals/9f/b1/ff/9fb1ffb05dd28039d1a06ad8e90cbd75.jpg" alt="">
21  <div class="hero-description-bk"></div>
22  <div class="hero-logo">
23    <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt="">
24  </div>
25  <div class="hero-description">
26    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
27  </div>
28  <div  class="hero-date">
29    <p>20.02.2019</p>
30  </div>
31  <div class="hero-btn">
32    <a href="#">Learn More</a>
33  </div>
34</div>

More Cards snippets

Bootstrap carousel with cards in 3 columns

Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.

CardsView →

Bootstrap 5 ecommerce product cards details template

Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

CardsView →

Bootstrap snippet Panels with nav tabs using HTML & CSS

Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 2<div class="first hero"> 3 <img class="hero-profile-img" src="https://cdn.gamer-network.net/2018/metabomb/leagueoflegendsbestcarrychampions2018pantheon.jpg" alt=""> 4 <div class="hero-description-bk"></div> 5 <div class="hero-logo"> 6 <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt=""> 7 </div> 8 <div class="hero-description"> 9 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 10 </div> 11 <div class="hero-date"> 12 <p>20.02.2019</p> 13 </div> 14 <div class="hero-btn"> 15 <a href="#">Learn More</a> 16 </div> 17</div> 18 19<div class="second hero"> 20 <img class="hero-profile-img" src="https://i.pinimg.com/originals/9f/b1/ff/9fb1ffb05dd28039d1a06ad8e90cbd75.jpg" alt=""> 21 <div class="hero-description-bk"></div> 22 <div class="hero-logo"> 23 <img src="https://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1557291375.3948_Dy2yZu_n.jpg" alt=""> 24 </div> 25 <div class="hero-description"> 26 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 27 </div> 28 <div class="hero-date"> 29 <p>20.02.2019</p> 30 </div> 31 <div class="hero-btn"> 32 <a href="#">Learn More</a> 33 </div> 34</div>