A responsive card template with a mobile first and no js setup
The card is one of the most used components.
The card list html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <h1>List of cards</h1>
<ol class="card-list" role="list">
<li class="card">
<svg class="card-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g fill="none"><rect width="56" height="40" x="12" y="20" fill="#2f80ed" rx="6"/><path fill="#6fcf97" fill-rule="evenodd" d="M20 54h40a2 2 0 0 0 2-2v-2l-8-8l-5.217 5.217L33 30L18 46.364V52a2 2 0 0 0 2 2" clip-rule="evenodd"/><path fill="#f2c94c" d="M53.835 27.25a4.33 4.33 0 1 1 4.33 7.5a4.33 4.33 0 0 1-4.33-7.5"/></g></svg>
<h2 class="title">
<a class="card-action" href="#">
Racquet Pure Aero 98
</a>
</h2>
<p class="description">
€ 279,00
</p>
<div class="action-container">
<button class="btn btn-favorite" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="m12 2 3.104 6.728 7.358.873-5.44 5.03 1.444 7.268L12 18.28 5.534 21.9l1.444-7.268L1.538 9.6l7.359-.873z"/></svg>
<span class="sr-only">Favorite: Racquet Pure Aero 98</span>
</button>
<button class="btn btn-primary" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="cart" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><path fill="currentColor" d="M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355-.01-.032-1.03-3.498-.1-.337c-.1-.346-.188-.652-.32-.909-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0"/></svg>
<span class="sr-only">Add to cart: Racquet Pure Aero 98</span>
</button>
</div>
</li>
<li class="card">
<svg class="card-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g fill="none"><rect width="56" height="40" x="12" y="20" fill="#2f80ed" rx="6"/><path fill="#6fcf97" fill-rule="evenodd" d="M20 54h40a2 2 0 0 0 2-2v-2l-8-8l-5.217 5.217L33 30L18 46.364V52a2 2 0 0 0 2 2" clip-rule="evenodd"/><path fill="#f2c94c" d="M53.835 27.25a4.33 4.33 0 1 1 4.33 7.5a4.33 4.33 0 0 1-4.33-7.5"/></g></svg>
<h2 class="title">
<a class="card-action" href="#">
The Roger Pro Tennis Shoe
</a>
</h2>
<p class="description">
€ 199,99
</p>
<div class="action-container">
<button class="btn btn-favorite" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="m12 2 3.104 6.728 7.358.873-5.44 5.03 1.444 7.268L12 18.28 5.534 21.9l1.444-7.268L1.538 9.6l7.359-.873z"/></svg>
<span class="sr-only">Favorite: The Roger Pro Tennis Shoe</span>
</button>
<button class="btn btn-primary" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="cart" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><path fill="currentColor" d="M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355-.01-.032-1.03-3.498-.1-.337c-.1-.346-.188-.652-.32-.909-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0"/></svg>
<span class="sr-only">Add to cart: The Roger Pro Tennis Shoe</span>
</button>
</div>
</li>
<li class="card">
<svg class="card-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g fill="none"><rect width="56" height="40" x="12" y="20" fill="#2f80ed" rx="6"/><path fill="#6fcf97" fill-rule="evenodd" d="M20 54h40a2 2 0 0 0 2-2v-2l-8-8l-5.217 5.217L33 30L18 46.364V52a2 2 0 0 0 2 2" clip-rule="evenodd"/><path fill="#f2c94c" d="M53.835 27.25a4.33 4.33 0 1 1 4.33 7.5a4.33 4.33 0 0 1-4.33-7.5"/></g></svg>
<h2 class="title">
<a class="card-action" href="#">
Base Racquet Bag
</a>
</h2>
<p class="description">
€ 39,99
</p>
<div class="action-container">
<button class="btn btn-favorite" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="m12 2 3.104 6.728 7.358.873-5.44 5.03 1.444 7.268L12 18.28 5.534 21.9l1.444-7.268L1.538 9.6l7.359-.873z"/></svg>
<span class="sr-only">Favorite: Base Racquet Bag</span>
</button>
<button class="btn btn-primary" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="cart" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><path fill="currentColor" d="M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355-.01-.032-1.03-3.498-.1-.337c-.1-.346-.188-.652-.32-.909-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0"/></svg>
<span class="sr-only">Add to cart: Base Racquet Bag</span>
</button>
</div>
</li>
<li class="card">
<svg class="card-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g fill="none"><rect width="56" height="40" x="12" y="20" fill="#2f80ed" rx="6"/><path fill="#6fcf97" fill-rule="evenodd" d="M20 54h40a2 2 0 0 0 2-2v-2l-8-8l-5.217 5.217L33 30L18 46.364V52a2 2 0 0 0 2 2" clip-rule="evenodd"/><path fill="#f2c94c" d="M53.835 27.25a4.33 4.33 0 1 1 4.33 7.5a4.33 4.33 0 0 1-4.33-7.5"/></g></svg>
<h2 class="title">
<a class="card-action" href="#">
Can of Tennis Balls
</a>
</h2>
<p class="description">
€ 7,95
</p>
<div class="action-container">
<button class="btn btn-favorite" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="star" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="m12 2 3.104 6.728 7.358.873-5.44 5.03 1.444 7.268L12 18.28 5.534 21.9l1.444-7.268L1.538 9.6l7.359-.873z"/></svg>
<span class="sr-only">Favorite: Can of Tennis Balls</span>
</button>
<button class="btn btn-primary" type="button">
<svg aria-hidden="true" focusable="false" class="action-icon" data-name="cart" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><path fill="currentColor" d="M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355-.01-.032-1.03-3.498-.1-.337c-.1-.346-.188-.652-.32-.909-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0"/></svg>
<span class="sr-only">Add to cart: Can of Tennis Balls</span>
</button>
</div>
</li>
</ol>
|
Below in the files is the complete html setup.
Direct links to the file: Html styled result