palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

Hero

<plz-hero> | PlzHero

El componenteherosirve para introducir un contenido de una forma atractiva. Se suelen usar en landing pages al inicio de la página.

En al gran mayoría de ocasiones se usa una imagen de fondo, un título y un subtítulo. En algunos casos, se usanbuttonso algún tipo de elementos con el que interactuar (a gusto el cliente).

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ñadircardso unbuttonpara acceder a otra sección, etc.

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'