Cards

1. Available Cards

Cards are group of components that are used to display content in a consistent way and repeatable way. They are used in many places in Taskify like home page, blog, pricing page, etc.

Card components are located in the components/cards folder. Here is the list of all the cards that are available in Taskify:

1. ActionCard
2. BlogPostCard
3. DocsCard
4. FeatureCard
5. IntegrationCard
6. KanbanCard
7. LargeFeatureCard
8. MemberCard
9. PricingCard
10. TestCard
11. TestimonialCard

Just from the name of the component, you can understand what it is used for and where.

2. Usage

Card components will require some props to be passed to them. Here is an example of how to use the MemberCard component:

<template>
  <ContentQuery path="/team-members" find="one" v-slot="{ data }">
    <MemberCard
      v-for="member in data.body"
      :key="member.id"
      :name="member.name"
      :role="member.role"
      :image="member.image"
      :twitter="member.social.twitter"
      :linkedin="member.social.linkedin"
      :facebook="member.social.facebook"
    />
  </ContentQuery>
</template>

Above example fetches the data from the team-members yaml content and passes it to the MemberCard component in TeamSection component. You can see the order of components and how it is used between base to cards and sections. Base and cards typically stateless and no data is present in them. Therefore fetching of dynamic data is done in the sections.

You can learn more about sections in the Sections article.