/blocks/block-billboard

El componente BkBillboard tiene una estructura parecida a BkFeatured. Se diferencian en que BkBillboard tiene 2 áreas de contenido y otra forma de mostrarse. Es importante tener en cuenta que a nivel de estructura HTML este componente dibuja un tag section.

Exponemos el children por si fuera necesario añadir contenido extra en lugar de la lista o bajo esta.

Descubre qué necesitas

Si ya tienes la app, comprueba tu equipamiento, los requisitos del sistema, el plan que más se adapta a ti y ¡ponte en marcha! Te explicamos como:

Pruébalo gratis

BKOOL es fácil de instalar

BKOOL Cycling es compatible con smart bikes, rodillos inteligentes y multitud de sensores. También con apps como Strava o Google.

// List data
const list = [
    {
        icon: 'clone',
        label: 'Consulta compatibilidades',
        url: 'https://www.google.es/',
    },
    {
        icon: 'help',
        label: 'Preguntas Frecuentes',
        url: 'https://www.google.es/',
    },
    {
        icon: 'thumbs-up',
        label: 'Sección Ayuda',
        url: 'https://www.google.es/',
    },
    {
        icon: 'message',
        label: 'Chat',
        url: 'https://www.google.es/',
    },
]

<BkBillboard
    imageTitle='Descubre qué necesitas'
    imageDescription='Si ya tienes la app, comprueba tu equipamiento, los requisitos del sistema, el plan que más se adapta a ti y ¡ponte en marcha! Te explicamos como:'
    buttonLabel='Pruébalo gratis'
    buttonLink='https://www.google.es/'
    title='BKOOL es fácil de instalar'
    description='BKOOL Cycling es compatible con smart bikes, rodillos inteligentes y multitud de sensores. También con apps como Strava o Google.'
    listData={list}
/>

Modificando la prop layout podremos controlar el orden del contenido en el componente.

Descubre qué necesitas

Si ya tienes la app, comprueba tu equipamiento, los requisitos del sistema, el plan que más se adapta a ti y ¡ponte en marcha! Te explicamos como:

Pruébalo gratis

BKOOL es fácil de instalar

BKOOL Cycling es compatible con smart bikes, rodillos inteligentes y multitud de sensores. También con apps como Strava o Google.

<BkBillboard
    imageTitle='Descubre qué necesitas'
    imageDescription='Si ya tienes la app, comprueba tu equipamiento, los requisitos del sistema, el plan que más se adapta a ti y ¡ponte en marcha! Te explicamos como:'
    buttonLabel='Pruébalo gratis'
    buttonLink='https://www.google.es/'
    title='BKOOL es fácil de instalar'
    description='BKOOL Cycling es compatible con smart bikes, rodillos inteligentes y multitud de sensores. También con apps como Strava o Google.'
    listData={list}
    layout='textFirst'
/>

Nombre	Type	Default	Descripción
backgroundImage	string	/static/img/cards/hannes-glockl-5-3-Rjd0d_U-unsplash.jpg	Imagen de background.
buttonLabel	string		Texto del label en el botón.
buttonLink	string		Si se añade un valor url, el botón será un enlace.
buttonTarget	"_blank" \| "_self" \| "_parent" \| "_top"	_self	Si se añade un valor, podremos controlar el target del enlace.
children	node		Contenido del componente.
description	string		Texto de la descripción.
imageDescription	string		Texto de la descripción en el área de la imagen.
imageTitle	string		Texto del título en el área de la imagen.
layout	"imageFirst" \| "textFirst"	imageFirst	Orden de los elementos del layout.
listData	array		Contenido de la lista.
title	string		Texto del título.