ACV Card

Used to group information into logical blocks. Any content (text blocks, form elements, buttons, collapses, icons, and illustrations) can be located inside the card.

Basic usage

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Source code

<script setup>
  import AcvCard from '@/components/card/card.vue';
  import AcvTypography from '@/components/typography/typography.vue';
  import cardMock from '../../__mocks__/data.mock.card.js';
</script>

<template>
  <div class="acv-grid-row acv-grid--cols-2">
    <AcvCard>
      <AcvTypography
        :title="cardMock.title"
        :subtitle="cardMock.subtitle"
        :text="cardMock.text"
      />
    </AcvCard>
    <AcvCard>
      <AcvTypography
        :title="cardMock.title"
        :subtitle="cardMock.subtitle"
      />
      <p>{{ cardMock.text }}</p>
    </AcvCard>
  </div>
</template>

Variants

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quam velit, vulputate eu pharetra nec, mattis ac neque.

Border Colors

primary

secondary

tertiary

inverted

neutral

info

success

warning

critical

danger

Details

<script setup>
  import Card from '@/components/card/card.vue';
  import { BRAND_COLORS, STATUS_COLORS } from '@/utils/color.ts';
</script>

<template>
  <Card
    v-for="color in { ...BRAND_COLORS,
                      ...STATUS_COLORS }"
    :key="color"
    variant="outline"
    :color="color"
    :class="{
      'acv-bg-surface-fixed-primary pa-8': color === BRAND_COLORS.inverted,
    }"
  >
    <span>{{ color }}</span>
  </card>
</template>

Background Colors

Card 1

Card 2

Details

<script setup>
  import Card from '@/components/card/card.vue';
</script>

<template>
  <Card
    border-color="success"
    background-color="white"
    class="my-16"
  >
    Card 1
  </Card>
  <Card
    border-color="primary"
    background-color="yellow"
  >
    Card 2
  </Card>
</template>

Props

Prop name	Description	Type	Values	Default
shadow	Whether the card should have a shadow	ShadowVariant	-
border		BorderVariant	-
withPadding		boolean	-

Slots

Name	Description	Bindings
default	The default slot content