Documentation

Radius

Cards are an essential part of any application. Cards can have different radius factors using the rounded prop.

Default props of all <BaseCard> can be set in your <app>/app.config.ts.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code
vue

Contrast

Cards are an essential part of any application. Cards can have different contrasts using the color prop. Contrast types impact both light and dark mode colors.

Default color of all <BaseCard> can be set in your <app>/app.config.ts.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code
vue

Card colors

Cards are an essential part of any application. Cards can have different colors using the color prop. Color types impact both light and dark mode colors.

Default color of all <BaseCard> can be set in your <app>/app.config.ts.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code
vue

Flat shadow

Cards can be displayed with a flat shadow using the shadow="flat" prop.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code
vue

Hover shadow

Cards can have a shadow on hover using the shadow="hover" prop.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show code
vue
shadow
Adds a flat or a on hover shadow to the card.
Show example
vue
color
The color of the card.
Show example
vue
rounded
The radius of the card.

@since

2.0.0

Show example
vue
#default
This slot has no inherted props
Show example
vue
color
The color of the card.
Show example
vue
rounded
The radius of the card.
Show example
vue