Card Component

Cards are an essential part of all web and mobile application with a wide variety of usage. Explore Vulk cards.

Components Open Docs
ShapePaddingShadowAnimated

Card Shapes

Available card shapes

Straight Card

This is a normal straight card

Squared Card

This is a normal squared card

Curved Card

This is a curved shaped card


<template>
  <Card shape="squared">
    <Title tag="h2" weight="semi" :size="6" leading>Squared Card</Title>
    <p class="paragraph rem-90">This is a normal squared card</p>
  </Card>
</template>

Card Padding

Card padding variations

This card has normal padding

This card has custom padding

This card has custom padding


<template>
  <Card shape="curved" padding="3rem">
    <p class="paragraph leading-tight rem-90">This card has custom padding</p>
  </Card>
</template>

Card Shadows

Card Shadows variations

Straight Card

This is a normal straight card

Squared Card

This is a normal squared card

Curved Card

This is a curved shaped card


<template>
  <Card shape="squared" shadow>
    <Title tag="h2" weight="semi" :size="6" leading>Squared Card</Title>
    <p class="paragraph rem-90">This is a normal squared card</p>
  </Card>
</template>

Card Animation

Card animation variations

Straight Card

This is a normal straight card

Squared Card

This is a normal squared card

Curved Card

This is a curved shaped card


<template>
  <Card shape="squared" animated>
    <Title tag="h2" weight="semi" :size="6" leading>Squared Card</Title>
    <p class="paragraph rem-90">This is a normal squared card</p>
  </Card>
</template>