Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 23:15:35 +00:00
Code Issues Projects Releases Wiki Activity

Add Cards list section

Browse Source
This commit is contained in:
khatabwedaa
2020-05-25 18:28:49 +02:00
parent e1c28df108
commit 3a3b40b54a
3 changed files with 130 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Models/data.js
View File

@@ -50,6 +50,8 @@ export default [
{
name: 'Sections',
components: [
{ name: 'About me' },
{ name: 'Cards list' },
{ name: 'Paragraph with image' },
]
},

4
src/components/Main.vue
View File

@@ -16,7 +16,7 @@
<p class="mt-8 text-gray-700">Header components require simple(don't panic please 😎) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
</div>
<div class="w-full max-w-5xl mx-auto">
<div class="w-full max-w-6xl mx-auto">
<div class="mb-16" v-for="category in list" :key="category.name">
<h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
@@ -62,6 +62,7 @@
import NavbarWithAvatar from "./UI/Navbars/NavbarWithAvatar";
// Sections
import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
import CardsList from "./UI/Sections/CardsList";
// Pagination
import Pagination from "./UI/Paginations/Pagination";
// Footers
@@ -100,6 +101,7 @@
NavbarWithAvatar,
ParagraphWithImage,
CardsList,
Pagination,

125
src/components/UI/Sections/CardsList.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<div :id="name | toId">
<div class="bg-white container mx-auto px-6 py-8">
<h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Master Photographers</h2>
<div class="flex items-center justify-center">
<div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8 md:mt-10">
<div class="max-w-xs w-full text-center">
<div class="mb-3">
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
</div>
<h2 class="text-lg font-medium text-gray-700">Ahmed Omer</h2>
<div class="flex item-center justify-center mt-2">
<svg class="w-5 h-5 fill-current text-yellow-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-yellow-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-yellow-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>
<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>
<div class="max-w-xs w-full text-center">
<div class="mb-3">
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1475274226786-e636f48a5645?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1460&q=80" alt="avatar"/>
</div>
<h2 class="text-lg font-medium text-gray-700">Hassan Ahmed</h2>
<div class="flex item-center justify-center mt-2">
<svg class="w-5 h-5 fill-current text-yellow-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-yellow-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-yellow-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-yellow-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>
<div class="max-w-xs w-full text-center">
<div class="mb-3">
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1473433657392-e7e31b785bc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="avatar"/>
</div>
<h2 class="text-lg font-medium text-gray-700">Khaild Mohamed</h2>
<div class="flex item-center justify-center mt-2">
<svg class="w-5 h-5 fill-current text-yellow-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-yellow-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-yellow-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>
<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>
<div class="max-w-xs w-full text-center">
<div class="mb-3">
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1547363484-c07b94906964?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
</div>
<h2 class="text-lg font-medium text-gray-700">Ali Omer</h2>
<div class="flex item-center justify-center mt-2">
<svg class="w-5 h-5 fill-current text-yellow-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-yellow-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-yellow-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-yellow-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-yellow-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>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Cards List Section'
}
}
}
</script>