Vuersatile Components

Appearance

On this page

Card ​

Component Card. Simple and elegant.

html
<Card>
  <Checkbox name="conditions" label="I accept all the terms and conditions" />
</Card>

Props ​

  • title

Card Title

html
<Card title="Card Title"></Card>
  • subtitle

Card Title

Card Subtitle
html
<Card title="Card Title" subtitle="Card Subtitle"></Card>

Sots ​

  • Main slot

Card Title

Card Subtitle
html
<Card title="Card Title" subtitle="Card Subtitle">
  <Checkbox name="conditions" label="I accept all the terms and conditions" />
</Card>
  • label

Card TitleCard Label

Card Subtitle
html
<Card title="Card Title" subtitle="Card Subtitle">
  <template v-slot:label>
    <span>Card Label</span>
  </template>

  <Checkbox name="conditions" label="I accept all the terms and conditions" />
</Card>
  • actions

Card TitleCard Label

Card Subtitle
html
<Card title="Card Title" subtitle="Card Subtitle">
  <template v-slot:label>
    <span>Card Label</span>
  </template>

  <template v-slot:actions>
    <Button text="Accept" />
  </template>

  <Checkbox name="conditions" label="I accept all the terms and conditions" />
</Card>
  • no-body

Card TitleCard Label

Card Subtitle
Card No-Body
html
<Card title="Card Title" subtitle="Card Subtitle">
  <template v-slot:label>
    <span>Card Label</span>
  </template>

  <template v-slot:actions>
    <Button text="Accept" />
  </template>

  <template v-slot:no-body>
    <div class="ml-xs-4 mt-xs-4 mb-xs-4">Card No-Body</div>
  </template>

  <Checkbox name="conditions" label="I accept all the terms and conditions" />
</Card>