spoko-design-system 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/pages/components/card.mdx +163 -0
package/package.json
CHANGED
|
@@ -91,4 +91,167 @@ Card - product link component which can be used for carousels, section with rela
|
|
|
91
91
|
</div>
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
+
## Grid example
|
|
94
95
|
|
|
96
|
+
<div class="component-preview">
|
|
97
|
+
<div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
|
|
98
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
99
|
+
<a href="#">
|
|
100
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
101
|
+
<div class="px-4 py-3 w-72">
|
|
102
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
103
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
104
|
+
<div class="flex items-center">
|
|
105
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
106
|
+
<del>
|
|
107
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
108
|
+
</del>
|
|
109
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
110
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
111
|
+
<path fill-rule="evenodd"
|
|
112
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
113
|
+
<path
|
|
114
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
115
|
+
</svg></div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</a>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
121
|
+
<a href="#">
|
|
122
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
123
|
+
<div class="px-4 py-3 w-72">
|
|
124
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
125
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
126
|
+
<div class="flex items-center">
|
|
127
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
128
|
+
<del>
|
|
129
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
130
|
+
</del>
|
|
131
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
132
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
133
|
+
<path fill-rule="evenodd"
|
|
134
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
135
|
+
<path
|
|
136
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
137
|
+
</svg></div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</a>
|
|
141
|
+
</div>
|
|
142
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
143
|
+
<a href="#">
|
|
144
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
145
|
+
<div class="px-4 py-3 w-72">
|
|
146
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
147
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
148
|
+
<div class="flex items-center">
|
|
149
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
150
|
+
<del>
|
|
151
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
152
|
+
</del>
|
|
153
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
154
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
155
|
+
<path fill-rule="evenodd"
|
|
156
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
157
|
+
<path
|
|
158
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
159
|
+
</svg></div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</a>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
165
|
+
<a href="#">
|
|
166
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
167
|
+
<div class="px-4 py-3 w-72">
|
|
168
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
169
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
170
|
+
<div class="flex items-center">
|
|
171
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
172
|
+
<del>
|
|
173
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
174
|
+
</del>
|
|
175
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
176
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
177
|
+
<path fill-rule="evenodd"
|
|
178
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
179
|
+
<path
|
|
180
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
181
|
+
</svg></div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</a>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
187
|
+
<a href="#">
|
|
188
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
189
|
+
<div class="px-4 py-3 w-72">
|
|
190
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
191
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
192
|
+
<div class="flex items-center">
|
|
193
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
194
|
+
<del>
|
|
195
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
196
|
+
</del>
|
|
197
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
198
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
199
|
+
<path fill-rule="evenodd"
|
|
200
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
201
|
+
<path
|
|
202
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
203
|
+
</svg></div>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</a>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
209
|
+
<a href="#">
|
|
210
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
211
|
+
<div class="px-4 py-3 w-72">
|
|
212
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
213
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
214
|
+
<div class="flex items-center">
|
|
215
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
216
|
+
<del>
|
|
217
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
218
|
+
</del>
|
|
219
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
220
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
221
|
+
<path fill-rule="evenodd"
|
|
222
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
223
|
+
<path
|
|
224
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
225
|
+
</svg></div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</a>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
```html
|
|
233
|
+
<div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
|
|
234
|
+
<div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
|
|
235
|
+
<a href="#">
|
|
236
|
+
<img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
|
|
237
|
+
<div class="px-4 py-3 w-72">
|
|
238
|
+
<span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
|
|
239
|
+
<p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
|
|
240
|
+
<div class="flex items-center">
|
|
241
|
+
<p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
|
|
242
|
+
<del>
|
|
243
|
+
<p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
|
|
244
|
+
</del>
|
|
245
|
+
<div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
246
|
+
fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
|
|
247
|
+
<path fill-rule="evenodd"
|
|
248
|
+
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
|
|
249
|
+
<path
|
|
250
|
+
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
|
|
251
|
+
</svg></div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</a>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
```
|