oa/documentation/card/card-colors-documentation.md

disable_example

disable_example
true

Colored Card

Vuero cards can have colored backgrounds when you need them to. To display Available color modifiers are is-primary, is-secondary, is-info, is-success, is-warning and is-danger.

<template>
  <VCard radius="small" color="primary">
    <h3 class="title is-5 mb-2">
      Primary Card
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
      ridens.
    </p>
  </VCard>

  <VCard color="secondary">
    <h3 class="title is-5 mb-2">
      Secondary Card
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
      ridens.
    </p>
  </VCard>

  <VCard radius="large" color="info">
    <h3 class="title is-5 mb-2">
      Info Card
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
      ridens.
    </p>
  </VCard>

  <VCard radius="small" color="success">
    <h3 class="title is-5 mb-2">
      Success Card
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
      ridens.
    </p>
  </VCard>

  <VCard color="warning">
    <h3 class="title is-5 mb-2">
      Warning Card
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
      ridens.
    </p>
  </VCard>

  <VCard radius="large" color="danger">
    <h3 class="title is-5 mb-2">
      Danger L-Card
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
      ridens.
    </p>
  </VCard>
</template>