Hero
<plz-hero> | PlzHero
El componente
En al gran mayoría de ocasiones se usa una imagen de fondo, un título y un subtítulo. En algunos casos, se
usan
Hero
Aquí suele ir una pequeña introducción al contenido de tu landing page, algo que capte la atención de los usuarios al visitar tu web.
Ejemplos
Variante hero simple
Usaremos el atributo variant para elegir la variante de hero "simple".
En este caso, se opta por un componente básico, título y subtítulo. Debido a ser un componente, es
personalizable y puedes variar según tus necesidades, se podría añadir
Hero
Aquí suele ir una pequeña introducción al contenido de tu landing page,algo que capte la atención de los usuarios al visitar tu web.
Variante hero image
Usaremos el atributo variant para elegir la variante de hero "image".
En algunas ocasiones, solo querremos una imagen como nuestro componente hero, para ello hemos creado esta variante.
Usaremos el atributo image para introducir la url a nuestra imagen. Ajustaremos la altura de la imagen con el atributo height.
Variante hero two-column
Usaremos el atributo variant para elegir la variante de hero "two-column".
Consta de dos columnas personalizables. Para identificar la columna en la que colocaremos el contenido utilizaremos el atributo slot="first-column" o slot="second-column".
Palace es un proyecto de componentes web con código libre. Podrás acceder al código a través de nuestro Github.
Segunda Columna
Otro contenido que sea relevante
Variante hero default
Usaremos el atributo variant para elegir la variante de hero "default".
Esta variante corresponde a la vertiente más usada del componente hero. Consta de una imagen de fondo, un título y un subtítulo.
En el caso de querer personalizar el contenido, se podría realizar mediante el uso de otros elementos dentro de este.
Hero
Aquí suele ir una pequeña introducción al contenido de tu landing page, algo que capte la atención de los usuarios al visitar tu web.
Atributos
Nombre | Descripción | Posibilidades | Por defecto |
---|---|---|---|
variant | Distintas variantes del componente | 'default' - 'simple' - 'image' - 'two-column' | 'default' |
height | Puedes determinar la altura del componente | Number(px) | '600' |
image | Dirección url de la imagen a colocar en el componente heroe con la variante "default", "image" o "two-column" | './mi-imagen-ejemplo.svg' |