## 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 Puede definir cuándo mostrar las sombras. :::demo El atributo de sombra determina cuándo se muestran las sombras. Puede ser `always`, `hover` o `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 | cuando mostrar la sombra del Card | string | always / hover / never | always |