## Card Muestra información dentro de un contenedor `card` ### Uso Basico `Card` incluye titulo, contenido y operaciones. :::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su contenido depende de un slot con nombre. ```html
Card name Operation button
{{'List item ' + o }}
``` ::: ### Card simple La parte de la cabecera puede omitirse. :::demo ```html
{{'List item ' + o }}
``` ::: ### Con imágenes Muestre un contenido más rico añadiendo algunas configuraciones. :::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza `el-col` para el layout. ```html
Yummy hamburger
Operating button
``` ::: ### Shadow You can define when to show the card shadows :::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`. ```html Always Hover Never ``` ::: ### Atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- | | header | Titulo del card. También acepta DOM pasado por `slot#header` | string | — | — | | body-style | Estilo CSS del cuerpo | object | — | { padding: '20px' } | | shadow | when to show card shadows | string | always / hover / never | always |