beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

add all Cards components

Browse source
This commit is contained in:
khatabwedaa 2020-05-06 23:45:45 +02:00
parent dfadab67c3
commit a931d03b22
9 changed files with 138 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/UI/Cards/ArticleCard.vue
View file

@ -1,17 +1,19 @@
<template>
<div :id="name | toId">
<div class="max-w-3xl mx-auto px-10 py-6 bg-white rounded-lg shadow-md">
<div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
<div class="flex justify-between items-center">
<span class="font-light text-gray-600">Mar 10, 2019</span>
<a class="px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500" href="#">Design</a>
</div>
<div class="mt-2">
<a class="text-2xl text-gray-700 font-bold hover:text-gray-600" href="#">Accessibility tools for
<a class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline" href="#">Accessibility tools for
designers and developers</a>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita
dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus
delectus nihil quis facere in modi ratione libero!</p>
</div>
<div class="flex justify-between items-center mt-4">
<a class="text-blue-600 hover:underline" href="#">Read more</a>
<div>
@ -28,7 +30,6 @@
</template>
<script>
export default {
data() {
return {

25
src/components/UI/Cards/ArticleCardWithImage.vue
View file

@ -1,22 +1,27 @@
<template>
<div :id="name | toId">
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow rounded-lg">
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
<div>
<img class="w-full object-cover h-64 shadow-lg" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Article">
</div>
<div class="p-6">
<div>
<span class="text-blue-600 text-xs uppercase">Product</span>
<h2 class="text-gray-800 font-semibold text-xl mt-2">I Built A Successful Blog In One Year</h2>
<span class="text-blue-600 text-xs font-medium uppercase">Product</span>
<a class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline" href="#">I Built A Successful Blog In One Year</a>
<p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
</div>
<div class="flex mt-4 items-center">
<img class="h-12 h-12 rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
alt="Avatar">
<div class="flex items-center mx-4">
<a href="#" class="text-gray-700 font-semibold">Jone Doe</a>
<span class="text-gray-600 mx-1 text-xs">21 SEP 2015</span>
<div class="mt-4">
<div class="flex items-center">
<a href="#" class="flex items-center">
<img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
alt="Avatar">
<span class="mx-2 text-gray-700 font-semibold">Jone Doe</span>
</a>
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
</div>
</div>
</div>

8
src/components/UI/Cards/Product.vue → src/components/UI/Cards/ProductCard.vue
View file

@ -3,8 +3,7 @@
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div class="px-4 py-2">
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos
quidem sequi illum facere recusandae voluptatibus</p>
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
</div>
<img class="h-56 w-full object-cover mt-2"
@ -13,18 +12,17 @@
<div class="flex items-center justify-between px-4 py-2 bg-gray-900">
<h1 class="text-gray-200 font-bold text-xl">$129</h1>
<button class="px-3 py-1 bg-gray-200 text-sm text-gray-900 font-semibold rounded">Add to card</button>
<button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to card</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Product',
name: 'Product Card',
}
}
}

46
src/components/UI/Cards/ProductCardWithEvaluation.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<div :id="name | toId">
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div class="w-1/3 bg-cover"
style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
<div class="w-2/3 p-4">
<h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In
odit exercitationem fuga id nam quia</p>
<div class="flex item-center mt-2">
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
</div>
<div class="flex item-center justify-between mt-3">
<h1 class="text-gray-700 font-bold text-xl">$220</h1>
<button class="px-3 py-2 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Card</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Product Card With Evaluation',
}
}
}
</script>

48
src/components/UI/Cards/ProductWithEvaluation.vue
View file

@ -1,48 +0,0 @@
<template>
<div :id="name | toId">
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<div class="w-1/3 bg-cover"
style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
<div class="w-2/3 p-4">
<h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In
odit exercitationem fuga id nam quia</p>
<div class="flex item-center mt-2">
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
<svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg>
</div>
<div class="flex item-center justify-between mt-3">
<h1 class="text-gray-700 font-bold text-xl">$220</h1>
<button class="px-3 py-2 bg-gray-800 text-white text-xs font-bold uppercase rounded">Add to
Card
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Product Evaluation',
}
}
}
</script>

5
src/components/UI/Cards/Testimonial.vue → src/components/UI/Cards/TestimonialCard.vue
View file

@ -5,12 +5,14 @@
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
</div>
<div>
<h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores
deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a
veritatis pariatur minus consequuntur!</p>
</div>
<div class="flex justify-end mt-4">
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
</div>
@ -19,11 +21,10 @@
</template>
<script>
export default {
data() {
return {
name: 'Testimonial',
name: 'Testimonial Card',
}
}
}

22
src/components/UI/Cards/UserCard.vue Normal file
View file

@ -0,0 +1,22 @@
<template>
<div :id="name | toId">
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
<img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
<div class="py-5 text-center">
<a class="block text-2xl text-gray-800 font-bold" href="#">John Doe</a>
<span class="text-sm text-gray-700">Software Engineer</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'User Card',
}
}
}
</script>

45
src/components/UI/Cards/UserCardWithDetails.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<div :id="name | toId">
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<div class="flex items-center px-6 py-3 bg-gray-900">
<svg class="h-6 w-6 text-white fill-current" viewBox="0 0 512 512">
<path d="M256 48C150 48 64 136.2 64 245.1v153.3c0 36.3 28.6 65.7 64 65.7h64V288h-85.3v-42.9c0-84.7 66.8-153.3 149.3-153.3s149.3 68.5 149.3 153.3V288H320v176h64c35.4 0 64-29.3 64-65.7V245.1C448 136.2 362 48 256 48z"/>
</svg>
<h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
</div>
<div class="py-4 px-6">
<h1 class="text-2xl font-semibold text-gray-800">Patterson johnson</h1>
<p class="py-2 text-lg text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<path d="M239.208 343.937c-17.78 10.103-38.342 15.876-60.255 15.876-21.909 0-42.467-5.771-60.246-15.87C71.544 358.331 42.643 406 32 448h293.912c-10.639-42-39.537-89.683-86.704-104.063zM178.953 120.035c-58.479 0-105.886 47.394-105.886 105.858 0 58.464 47.407 105.857 105.886 105.857s105.886-47.394 105.886-105.857c0-58.464-47.408-105.858-105.886-105.858zm0 186.488c-33.671 0-62.445-22.513-73.997-50.523H252.95c-11.554 28.011-40.326 50.523-73.997 50.523z"/><g><path d="M322.602 384H480c-10.638-42-39.537-81.691-86.703-96.072-17.781 10.104-38.343 15.873-60.256 15.873-14.823 0-29.024-2.654-42.168-7.49-7.445 12.47-16.927 25.592-27.974 34.906C289.245 341.354 309.146 364 322.602 384zM306.545 200h100.493c-11.554 28-40.327 50.293-73.997 50.293-8.875 0-17.404-1.692-25.375-4.51a128.411 128.411 0 0 1-6.52 25.118c10.066 3.174 20.779 4.862 31.895 4.862 58.479 0 105.886-47.41 105.886-105.872 0-58.465-47.407-105.866-105.886-105.866-37.49 0-70.427 19.703-89.243 49.09C275.607 131.383 298.961 163 306.545 200z"/></g>
</svg>
<h1 class="px-2 text-sm">MerakiTeam</h1>
</div>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z"/>
</svg>
<h1 class="px-2 text-sm">California</h1>
</div>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<path d="M437.332 80H74.668C51.199 80 32 99.198 32 122.667v266.666C32 412.802 51.199 432 74.668 432h362.664C460.801 432 480 412.802 480 389.333V122.667C480 99.198 460.801 80 437.332 80zM432 170.667L256 288 80 170.667V128l176 117.333L432 128v42.667z"/>
</svg>
<h1 class="px-2 text-sm">patterson@example.com</h1>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'User Card With Details',
}
}
}
</script>

46
src/components/UI/Cards/UserDetails.vue
View file

@ -1,46 +0,0 @@
<template>
<div :id="name | toId">
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<div class="flex items-center px-6 py-3 bg-gray-900">
<svg class="h-6 w-6 text-white fill-current" viewBox="0 0 512 512">
<path d="M256 48C150 48 64 136.2 64 245.1v153.3c0 36.3 28.6 65.7 64 65.7h64V288h-85.3v-42.9c0-84.7 66.8-153.3 149.3-153.3s149.3 68.5 149.3 153.3V288H320v176h64c35.4 0 64-29.3 64-65.7V245.1C448 136.2 362 48 256 48z"/>
</svg>
<h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
</div>
<div class="py-4 px-6">
<h1 class="text-2xl font-semibold text-gray-800">Patterson johnson</h1>
<p class="py-2 text-lg text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<path d="M239.208 343.937c-17.78 10.103-38.342 15.876-60.255 15.876-21.909 0-42.467-5.771-60.246-15.87C71.544 358.331 42.643 406 32 448h293.912c-10.639-42-39.537-89.683-86.704-104.063zM178.953 120.035c-58.479 0-105.886 47.394-105.886 105.858 0 58.464 47.407 105.857 105.886 105.857s105.886-47.394 105.886-105.857c0-58.464-47.408-105.858-105.886-105.858zm0 186.488c-33.671 0-62.445-22.513-73.997-50.523H252.95c-11.554 28.011-40.326 50.523-73.997 50.523z"/><g><path d="M322.602 384H480c-10.638-42-39.537-81.691-86.703-96.072-17.781 10.104-38.343 15.873-60.256 15.873-14.823 0-29.024-2.654-42.168-7.49-7.445 12.47-16.927 25.592-27.974 34.906C289.245 341.354 309.146 364 322.602 384zM306.545 200h100.493c-11.554 28-40.327 50.293-73.997 50.293-8.875 0-17.404-1.692-25.375-4.51a128.411 128.411 0 0 1-6.52 25.118c10.066 3.174 20.779 4.862 31.895 4.862 58.479 0 105.886-47.41 105.886-105.872 0-58.465-47.407-105.866-105.886-105.866-37.49 0-70.427 19.703-89.243 49.09C275.607 131.383 298.961 163 306.545 200z"/></g>
</svg>
<h1 class="px-2 text-sm">MerakiTeam</h1>
</div>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<path d="M256 32c-88.004 0-160 70.557-160 156.801C96 306.4 256 480 256 480s160-173.6 160-291.199C416 102.557 344.004 32 256 32zm0 212.801c-31.996 0-57.144-24.645-57.144-56 0-31.357 25.147-56 57.144-56s57.144 24.643 57.144 56c0 31.355-25.148 56-57.144 56z"/>
</svg>
<h1 class="px-2 text-sm">California</h1>
</div>
<div class="flex items-center mt-4 text-gray-700">
<svg class="h-6 w-6 fill-current" viewBox="0 0 512 512">
<path d="M437.332 80H74.668C51.199 80 32 99.198 32 122.667v266.666C32 412.802 51.199 432 74.668 432h362.664C460.801 432 480 412.802 480 389.333V122.667C480 99.198 460.801 80 437.332 80zM432 170.667L256 288 80 170.667V128l176 117.333L432 128v42.667z"/>
</svg>
<h1 class="px-2 text-sm">patterson@example.com</h1>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'User Details',
}
}
}
</script>