Cards

There are three types of cards: elevated, filled, and outlined.

Filled

Play songs

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

<script setup lang="ts">
import { ref } from 'vue'

const data = ref(0)
setInterval(() => {
  data.value = Math.random() * 2
}, 2000)
</script>

<template>
  <div class="max-w-xs mx-auto">
    <BCard>
      <BCardTitle>Play songs</BCardTitle>
      <BCardContent>
        Leverage agile frameworks to provide
        a robust synopsis for high level overviews.
        Iterative approaches to corporate strategy
        foster collaborative thinking to further
        the overall value proposition.
      </BCardContent>
      <BCardActions>
        <BBtn>
          Get started
        </BBtn>
      </BCardActions>
      <BSparkLine
        :cdata="data"
        :height="60"
        class="rounded-b-[12px] overflow-hidden"
      />
    </BCard>
  </div>
</template>

Elevated

Play songs

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

<template>
  <div class="max-w-xs mx-auto">
    <BCard variant="elevated">
      <BCardTitle>Play songs</BCardTitle>
      <BCardContent>
        Leverage agile frameworks to provide
        a robust synopsis for high level overviews.
        Iterative approaches to corporate strategy
        foster collaborative thinking to further
        the overall value proposition.
      </BCardContent>
      <BCardActions>
        <BBtn>
          Get started
        </BBtn>
      </BCardActions>
    </BCard>
  </div>
</template>

Outlined

Play songs

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

<template>
  <div class="max-w-xs mx-auto">
    <BCard variant="outlined">
      <BCardTitle>Play songs</BCardTitle>
      <BCardContent>
        Leverage agile frameworks to provide
        a robust synopsis for high level overviews.
        Iterative approaches to corporate strategy
        foster collaborative thinking to further
        the overall value proposition.
      </BCardContent>
      <BCardActions>
        <BBtn>
          Get started
        </BBtn>
      </BCardActions>
    </BCard>
  </div>
</template>

With image

With image

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.

<template>
  <div class="max-w-xs mx-auto">
    <BCard>
      <BCardMedia

        src="/images/demo/minimal-1.jpg"
        alt="an image!"
      />
      <BCardTitle>With image</BCardTitle>
      <BCardContent>
        Leverage agile frameworks to provide
        a robust synopsis for high level overviews.
        Iterative approaches to corporate strategy
        foster collaborative thinking to further
        the overall value proposition.
      </BCardContent>
      <BCardActions>
        <BBtn>
          Get started
        </BBtn>
      </BCardActions>
    </BCard>
  </div>
</template>

Accessability

TODO..