Blog Cards

1<script setup>
2// Vue Material Kit 2 component
3import DefaultBlogCard from "@/examples/cards/blogCards/DefaultBlogCard.vue";
4</script>
5<template>
6 <DefaultBlogCard
7  image="https://bit.ly/3EZlfcW"
8  :category="{ color: 'warning', label: 'Hub' }"
9  title="Shared Coworking"
10  description="Use border utilities to quickly style the border and
11    border-radius of an element. Great for images, buttons."
12  :author="{
13  image: 'https://bit.ly/3pZfIPh',
14  name: 'Mathew Glock',
15  date: 'Posted on 28 February',
16  }"
17 />
18</template>

1<script setup>
2// Vue Material Kit 2 component
3import SimpleBlogCard from "@/examples/cards/blogCards/SimpleBlogCard.vue";
4</script>
5<template>
6 <SimpleBlogCard
7  image="https://bit.ly/3Hlw1MQ"
8  title="Virtual Office"
9  description="If you’re more passionate about founding a business than the business itself, you can fall into."
10 />
11</template>

1<script setup>
2// Vue Material Kit 2 component
3import TransparentBlogCard from "@/examples/cards/blogCards/TransparentBlogCard.vue";
4</script>
5<template>
6 <TransparentBlogCard
7  image="https://bit.ly/3HH2M6E"
8  title="MateLabs mixes machine learning with IFTTT"
9  description="If you’ve ever wanted to train a machine learning model and integrate it with IFTTT, you now can with ..."
10  :action="{
11    label: 'Read more',
12    route: '/',
13    color: 'success',
14  }"
15 />
16</template>

1<script setup>
2// Vue Material Kit 2 component
3import RaisedBlogCard from "@/examples/cards/blogCards/RaisedBlogCard.vue";
4</script>
5<template>
6 <RaisedBlogCard
7  image="https://bit.ly/339ROYo"
8  title="Material Kit"
9  description="One of the most beautiful and complex UI Kits built by the team behind Creative Tim. That's pretty impressive."
10  :action="{
11    label: 'More about us',
12    route: '#',
13    color: 'success',
14  }"
15 />
16</template>

1<script setup>
2// Vue Material Kit 2 component
3import CenteredBlogCard from "@/examples/cards/blogCards/CenteredBlogCard.vue";
4</script>
5<template>
6 <CenteredBlogCard
7  image="https://bit.ly/3q0AlKO"
8  title="Get insights on Search"
9  description="Website visitors today demand a frictionless user expericence — especially when using search. Because of the hight standards."
10/>
11</template>

1<script setup>
2// Vue Material Kit 2 component
3import BackgroundBlogCard from "@/examples/cards/blogCards/BackgroundBlogCard.vue";
4</script>
5<template>
6 <BackgroundBlogCard
7  image="https://bit.ly/31BuIti"
8  title="Flexible work hours"
9  description="Rather than worrying about switching offices every couple years, you stay in the same place."
10/>
11</template>