Can I use "Data Card with pure CSS" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Data Card with pure CSS — Free Cards Snippet (Bootstrap 5)

Loading…

Data Card with pure CSS — Free Cards Snippet (Bootstrap 5) | GoSnippets

Source Code

1<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.1/tailwind.min.css'>
2<div class="max-w-6xl mx-auto">
3        <div class="flex items-center justify-center min-h-screen">
4            <div class="max-w-sm w-full sm:w-1/2 lg:w-1/3 py-6 px-3">
5                <div class="bg-white shadow-xl rounded-lg overflow-hidden">
6                    <div class="bg-cover bg-center h-56 p-4" style="background-image: url(https://images.unsplash.com/photo-1475855581690-80accde3ae2b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80)">
7                        <div class="flex justify-end">
8                            <svg class="h-6 w-6 text-white fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
9                                <path d="M12.76 3.76a6 6 0 0 1 8.48 8.48l-8.53 8.54a1 1 0 0 1-1.42 0l-8.53-8.54a6 6 0 0 1 8.48-8.48l.76.75.76-.75zm7.07 7.07a4 4 0 1 0-5.66-5.66l-1.46 1.47a1 1 0 0 1-1.42 0L9.83 5.17a4 4 0 1 0-5.66 5.66L12 18.66l7.83-7.83z"></path>
10                            </svg>
11                        </div>
12                    </div>
13                    <div class="p-4">
14                        <p class="uppercase tracking-wide text-sm font-bold text-gray-700">Detached house &bull; 5y old</p>
15                        <p class="text-3xl text-gray-900">$750,000</p>
16                        <p class="text-gray-700">742 Evergreen Terrace</p>
17                    </div>
18                    <div class="flex p-4 border-t border-gray-300 text-gray-700">
19                        <div class="flex-1 inline-flex items-center">
20                            <svg class="h-6 w-6 text-gray-600 fill-current me-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
21                                <path d="M0 16L3 5V1a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4l3 11v5a1 1 0 0 1-1 1v2h-1v-2H2v2H1v-2a1 1 0 0 1-1-1v-5zM19 5h1V1H4v4h1V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1zm0 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V6h-2v2a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6H3.76L1.04 16h21.92L20.24 6H19zM1 17v4h22v-4H1zM6 4v4h4V4H6zm8 0v4h4V4h-4z"></path>
22                            </svg>
23                            <p><span class="text-gray-900 font-bold">3</span> Bedrooms</p>
24                        </div>
25                        <div class="flex-1 inline-flex items-center">
26                            <svg class="h-6 w-6 text-gray-600 fill-current me-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
27                                <path fill-rule="evenodd" d="M17.03 21H7.97a4 4 0 0 1-1.3-.22l-1.22 2.44-.9-.44 1.22-2.44a4 4 0 0 1-1.38-1.55L.5 11h7.56a4 4 0 0 1 1.78.42l2.32 1.16a4 4 0 0 0 1.78.42h9.56l-2.9 5.79a4 4 0 0 1-1.37 1.55l1.22 2.44-.9.44-1.22-2.44a4 4 0 0 1-1.3.22zM21 11h2.5a.5.5 0 1 1 0 1h-9.06a4.5 4.5 0 0 1-2-.48l-2.32-1.15A3.5 3.5 0 0 0 8.56 10H.5a.5.5 0 0 1 0-1h8.06c.7 0 1.38.16 2 .48l2.32 1.15a3.5 3.5 0 0 0 1.56.37H20V2a1 1 0 0 0-1.74-.67c.64.97.53 2.29-.32 3.14l-.35.36-3.54-3.54.35-.35a2.5 2.5 0 0 1 3.15-.32A2 2 0 0 1 21 2v9zm-5.48-9.65l2 2a1.5 1.5 0 0 0-2-2zm-10.23 17A3 3 0 0 0 7.97 20h9.06a3 3 0 0 0 2.68-1.66L21.88 14h-7.94a5 5 0 0 1-2.23-.53L9.4 12.32A3 3 0 0 0 8.06 12H2.12l3.17 6.34z"></path>
28                            </svg>
29                            <p><span class="text-gray-900 font-bold">2</span> Bathrooms</p>
30                        </div>
31                    </div>
32                    <div class="px-4 pt-3 pb-4 border-t border-gray-300 bg-gray-100">
33                        <div class="text-xs uppercase font-bold text-gray-600 tracking-wide">Realtor</div>
34                        <div class="flex items-center pt-2">
35                            <div class="bg-cover bg-center w-10 h-10 rounded-full me-3" style="background-image: url(https://images.unsplash.com/photo-1500522144261-ea64433bbe27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80)">
36                            </div>
37                            <div>
38                                <p class="font-bold text-gray-900">Tiffany Heffner</p>
39                                <p class="text-sm text-gray-700">(555) 555-4321</p>
40                            </div>
41                        </div>
42                    </div>
43                </div>
44            </div>
45        </div>
46    </div>

Data Card with pure CSS

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection

Data Card with pure CSS

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Cards snippets

Working in Tailwind? Explore our Tailwind gallery

Trending Bootstrap snippets

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection