Card
<plz-card> | PlzCard
Los componentes
Como todo dentro del mundo del desarrollo web, hay infinidad de variantes, a continuación se podrán observar las que hemos considerado más relevantes.
Abstracto
Es un concepto, una idea que no se puede explicar de forma concreta. Lo no específico.
Ejemplos
Variante simple del componente Card
Usaremos el atributo variant para elegir el tipo de card "simple".
Este tipo de card es de las más básicas que podremos encontrar, siendo un estilo plano y utilizandose principalmente para seccionar una pequeña parte de información.
Debido a la escabilidad del componente, puedes personalizarlo pese a ser una variante básica.
Es una card simple en la que puedes poner texto a modo informativo. Las funciones que pueda llegar a terner solo lo dicta tu imaginación.
Card simple personalizada
En este caso se ha añadido un título "h3" y a continuación un texto "p". También se le ha pasado por estilo que el texto se encuentre justificado.
Card simple personalizada
En este caso la tarjeta ha recibido dos párrafos y uno de ellos en cursiva y negrita. También se le ha pasado por estilo que el texto se encuentre centrado.
Card con encabezado
Usaremos el atributo variant para elegir el tipo de card "header".
Otra forma de utilizar este componente es haciendo uso de encabezados, en este ejemplo, seccionamos la parte superior que podría ser un pequeño logo o título y un texto simple informativo.
Dependiendo del caso de uso, este se podrá personalizar acomodando a las necesidades del usuario.
Header
Es una card simple en la que puedes poner texto a modo informativo. Las funciones que pueda llegar a terner solo lo dicta tu imaginación.
Card con pie de página
Usaremos el atributo variant para elegir el tipo de card "footer".
Otra forma de utilizar este componente es haciendo uso de pie de página, en este ejemplo, seccionamos la parte inferior que podría ser información de contacto y en la parte superior un texto simple informativo.
Dependiendo del caso de uso, este se podrá personalizar acomodando a las necesidades del usuario.
Este componente card tiene un footer en el que puedes colocar la información que consideres. En este ejemplo ponemos un texto y un botón.
Documentación github
Card con imagen
Usaremos el atributo variant para elegir el tipo de card "default".
Este tipo de card es el más común, en el que encontramos una imagen y a posteriori un título y un pequeño texto informativo. De esta manera te permite conocer de forma general el contenido al que vas a acceder mediante un click.
A diferencia de otras variantes, esta tiene la intención de que se pueda acceder a otra fuente a través de ella. En este caso hemos decidido hacerla aún más constumizable añadiendo una sección en la que poder aaceder a otro contenido mediante un botón (la versión "default" básica es el primer ejemplo de esta sección).
Abstracto
Es un concepto, una idea que no se puede explicar de forma concreta. Lo no específico.
Ver info
Card con solo imagen
Usaremos el atributo variant para elegir el tipo de card "image".
Esta es una forma bastante común del componente card. Suele usarse en páginas planas donde se pretende resaltar información de una manera atractiva.
Esta es una card con una imagen de fondo y texto.
Colores del hover en la card con variant default
Usaremos el atributo hover para elegir el color del componente al pasar el cursor por encima.
En este caso, se podrá personalizar el componente eligiendo qué tipo de color le conviene al componente según el estilo de la web en la que se esté usando.
Abstracto
Es un concepto, una idea que no se puede explicar de forma concreta. Lo no específico.
Abstracto
Es un concepto, una idea que no se puede explicar de forma concreta. Lo no específico.
Abstracto
Es un concepto, una idea que no se puede explicar de forma concreta. Lo no específico.
Abstracto
Es un concepto, una idea que no se puede explicar de forma concreta. Lo no específico.
Atributos
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
variant | Distintas variantes del componente | 'default' - 'simple' - 'header' - 'footer' - 'image' | 'default' |
hover | Distintos colores para el hover del compoennte | 'gray' - 'blue' - 'green' - 'red' | 'blue' |
width | Ancho del compoennte | Number(px) | '220' |
image | Dirección url de la imagen a colocar en el componente con variante "default" y "image" | './mi-imagen-ejemplo.svg' | |
url | Url a la que se accedera a partir del componente (solo para la variante "default") | './ejemplo.html' | '' |
Distintas formas de mostar el link del componente | '_self' - '_blank' - '_parent' - '_top' - 'framename' | '_self' |