VCard
Vuero cards are very versatile and can be used in any type of layout. Vuero provides 3 main Html cards with the following classes: .s-card, .r-card and .l-card. The main difference each one of those is the border radius, giving a unique look and feel to each one of them.
I have smooth radius
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
I have regular radius
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
I have rounded radius
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Elevated Card
Vuero cards can be elevated and show a light box shadow. To display elevated cards, simply add the is-raised class to the target card element.
Raised VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Raised VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Raised VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
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.
Primary VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Secondary VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Info VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Success VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Warning VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Danger VCard
I can be used as is in any layout. VCards are simple containers that can hold any type of content.
Structured Card
Vuero cards can have a small flex header where you can put come content. Check the markup for more details about usage.
VCard Props
Here is the full props available for <VCard /> component:
| Props | Default | Type |
|---|---|---|
| radius | regular | regular, smooth, rounded |
| color | undefined | primary, secondary, info, success, warning, danger |
| elevated | false | boolean |