Red Planet docs

# Banners

Sección con una imagen de fondo.

Para poder cambiar nuestras imágenes de banners, seguiremos los mismos pasos que seguimos en el cambio de imagen del header.

Importante: El componente banner-01 puede ser utilizado varias veces en nuestro sitio. La nomenclatura del componente "Banner 01" siempre será:

<banner-01></banner-01>

Lo único que cambiará en el componente serán las variables, las cuales cambiarán las fotos mostradas:

---
banner01: /img/banner01.jpg
banner02: /img/banner02.jpg
banner03: /img/banner03.jpg
banner04: /img/banner04.jpg

Su aplicación es la siguiente:

---
<banner-01  :image="banner01" parallax></banner-01>
<banner-01  :image="banner02" parallax></banner-01>
<banner-01  :image="banner02" parallax></banner-01>
<banner-01  :image="banner04" parallax></banner-01>

# Imagen

Banner 01

# Código

---
banner01: /img/banner01.jpg
---

<banner-01 :image="banner01" parallax></banner-01>

# Comentarios:

  • Tamaño de la imagen con efecto parallax: 1920x1080 píxeles.
  • Tamaño de la imagen sin efecto parallax: 1920x480 píxeles.

# Imagen

Banner 02

# Código

---
banner02: /img/banner02.jpg
---

<banner-01 :image="banner02" parallax></banner-01>

# Comentarios:

  • Tamaño de la imagen con efecto parallax: 1920x1080 píxeles.
  • Tamaño de la imagen sin efecto parallax: 1920x480 píxeles.

# Imagen

Banner 03

# Código

---
banner03: /img/banner03.jpg
---

<banner-01 :image="banner03" parallax></banner-01>

# Comentarios:

  • Tamaño de la imagen con efecto parallax: 1920x1080 píxeles.
  • Tamaño de la imagen sin efecto parallax: 1920x480 píxeles.

# Imagen

Banner 04

# Código

---
banner04: /img/banner04.jpg
---

<banner-01 :image="banner04"></banner-01>

# Comentarios:

  • Tamaño de la imagen con efecto parallax: 1920x1080 píxeles.
  • Tamaño de la imagen sin efecto parallax: 1920x650 píxeles.

# Parámetros

Nombre Descripción Tipo
image Ruta a la imagen de fondo String
parallax Define si la imagen de fondo tendrá efecto parallax Boolean

# Imagen

Banner 02

# Código

---
banner02Title: TU SALUD ES PRIMERO
banner02Subtitle: NOSOTROS NOS ASEGURAMOS DE CUIDARLA
banner02ButtonText: SOLICITAR UNA CONSULTA
banner02Link: '#about03'
backgroundColor: '#26A7B4'
---

<banner-02 id="banner02" :color="backgroundColor" :title="banner02Title" :subtitle="banner02Subtitle" :button-text="banner02ButtonText" :link="banner02Link" ></banner-02>

# Parámetros

Nombre Descripción Tipo
color Define el color de fondo del banner String
title Título del componente String
subtitle Subtítulo del componente String
button-text Texto del botón String
link Link del botón String

# Imagen

Banner 03

# Código

---
banner03Text: 'LA EDUCACIÓN ABRE PUERTAS A MÁS OPORTUNIDADES'
banner03Link: '#'
banner03ButtonText: INSCRIPCIONES ABIERTAS
banner03Background: '#10594B'
---

<banner-03 :text="banner03Text" :link="banner03Link" :button-text="banner03ButtonText" :color="banner03Background" ></banner-03>

# Parámetros

Nombre Descripción Tipo
text Texto a mostrar String
link Link del botón String
button-text Texto del botón String
color Define el color de fondo del banner String

← Bloques de contenido →