Components

ExCard

Card

<ExCard :size="150" :radius="8">
    Card
</ExCard>

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

const size = ref(150) // string | number
const radius = ref(8) // string | number
</script>

Interact

Size:

Radius:

 

Props

as

Type	Default	Required
string component	template	false

Description: Sets the element type of ex-card. Any custom vue component can also be passed.

---

tile

Type	Default	Required
boolean	false	false

Description: Removes border radius to the ex-card element, if set using radius prop.

---

size

Type	Default	Required
string number	undefined	false

Description: Sets the width and height of ex-card. It can also take both width and height parameters.

Passing size="100 50" as a value will result in width: 100px and height: 50px. Values can also be percentages.

If only a single value is passed, it will be applied to both width and height

---

radius

Type	Default	Required
string number	undefined	false

Description: Sets the border radius for ex-card. It can also take 4 values mentioning individual corner radius of an element.

Passing size="20 30 40 50" as a value will result in border-radius: 20px 30px 40px 50px. Values can also be percentages.

---

width

Type	Default	Required
string number	undefined	false

Description: Sets the width of ex-card. width takes precedence over size. Values can also be percentages.

---

height

Type	Default	Required
string number	undefined	false

Description: Sets the height of ex-card. height takes precedence over size. Values can also be percentages.

---

Slots

Name	Description
default	The default Vue slot