Merge pull request #14 from harsh07bharvada/HarshBharvadaBranch
Adding a Product Card with Overlapping image
This commit is contained in:
commit
8754ca30c5
|
@ -16,6 +16,7 @@ export default [
|
||||||
{ name: 'Article card' },
|
{ name: 'Article card' },
|
||||||
{ name: 'Article card with image' },
|
{ name: 'Article card with image' },
|
||||||
{ name: 'Product card' },
|
{ name: 'Product card' },
|
||||||
|
{ name: 'Product card with price' },
|
||||||
{ name: 'Product card with evaluation' },
|
{ name: 'Product card with evaluation' },
|
||||||
{ name: 'Testimonial card' },
|
{ name: 'Testimonial card' },
|
||||||
{ name: 'User card' },
|
{ name: 'User card' },
|
||||||
|
|
|
@ -52,6 +52,7 @@
|
||||||
import ArticleCard from "./UI/Cards/ArticleCard";
|
import ArticleCard from "./UI/Cards/ArticleCard";
|
||||||
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
|
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
|
||||||
import ProductCard from "./UI/Cards/ProductCard";
|
import ProductCard from "./UI/Cards/ProductCard";
|
||||||
|
import ProductCardWithPrice from "./UI/Cards/ProductCardWithPrice";
|
||||||
import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
|
import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
|
||||||
import TestimonialCard from "./UI/Cards/TestimonialCard";
|
import TestimonialCard from "./UI/Cards/TestimonialCard";
|
||||||
import UserCard from "./UI/Cards/UserCard";
|
import UserCard from "./UI/Cards/UserCard";
|
||||||
|
@ -90,6 +91,7 @@
|
||||||
ArticleCard,
|
ArticleCard,
|
||||||
ArticleCardWithImage,
|
ArticleCardWithImage,
|
||||||
ProductCard,
|
ProductCard,
|
||||||
|
ProductCardWithPrice,
|
||||||
ProductCardWithEvaluation,
|
ProductCardWithEvaluation,
|
||||||
TestimonialCard,
|
TestimonialCard,
|
||||||
UserCard,
|
UserCard,
|
||||||
|
|
29
src/components/UI/Cards/ProductCardWithPrice.vue
Normal file
29
src/components/UI/Cards/ProductCardWithPrice.vue
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
<template>
|
||||||
|
<div :id="name | toId">
|
||||||
|
<div class="flex flex-col max-w-sm mx-auto h-full justify-center items-center">
|
||||||
|
|
||||||
|
<div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
|
||||||
|
class="flex bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-top">
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col h-20 w-48 md:w-64 bg-white -mt-10 text-sm shadow-lg rounded-lg justify-center items-center">
|
||||||
|
<div class="flex w-full h-10 justify-center items-center font-bold uppercase tracking-wide">Nike Revolt</div>
|
||||||
|
<div class="flex items-center justify-between w-full h-10 px-3 bg-gray-200 rounded-b-lg">
|
||||||
|
<h1 class="text-gray-800 font-bold ">$129</h1>
|
||||||
|
<button class=" bg-gray-700 text-xs text-white px-2 py-1 font-semibold rounded ">Add to cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: 'Product Card with Price',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in a new issue