/blocks/block-cardgift

El componente BkBillboardCardGift 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.

SUSCRIPCIÓN GRATIS

Conviértete en embajador

BKOOL da la posiblidad de convertirse en embajadores a todos aquellos atletas que lo deseen.

EMBAJADORES

1 año

GRATIS

Más información

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/',
    },
]

<BkBillboardCardGift
    imageTitle='Conviértete en embajador'
    imageSubtitle='SUSCRIPCIÓN GRATIS'
    imageLinkText='Más información'
    imageLinkColor='primary'
    imageLinkUrl='www.google.com'
    imageDescription='BKOOL da la posiblidad de convertirse en embajadores a todos aquellos atletas que lo deseen.'
    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.'
    cardGiftTitle='EMBAJADORES'
    cardGiftSubtitle='1 año'
    cardGiftPrice='GRATIS'
    listData={list}
/>

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

SUSCRIPCIÓN GRATIS

Conviértete en embajador

BKOOL da la posiblidad de convertirse en embajadores a todos aquellos atletas que lo deseen.

EMBAJADORES

1 año

GRATIS

Más información

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.

<BkBillboardCardGift
    imageTitle='Conviértete en embajador'
    imageSubtitle='SUSCRIPCIÓN GRATIS'
    imageLinkText='Más información'
    imageLinkColor='primary'
    imageLinkUrl='www.google.com'
    imageDescription='BKOOL da la posiblidad de convertirse en embajadores a todos aquellos atletas que lo deseen.'
    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.'
    cardGiftTitle='EMBAJADORES'
    cardGiftSubtitle='1 año'
    cardGiftPrice='GRATIS'
    layout='textFirst'
    listData={list}
/>

Existen distintas props relacionadas con la parte de la imagen. Tenemos todas las props relacionadas con el componente BkCardGift. También tenemos la posibilidad de añadir o quitar el link de debajo de la card así como todas sus características.

SUSCRIPCIÓN GRATIS

Conviértete en embajador

BKOOL da la posiblidad de convertirse en embajadores a todos aquellos atletas que lo deseen.

EMBAJADORES

1 año

GRATIS

Más información

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.

<BkBillboardCardGift
    imageTitle="Conviértete en embajador"
    imageSubtitle="SUSCRIPCIÓN GRATIS"
    imageLinkText="Más información"
    imageLinkColor="accent"
    imageLinkUrl="www.google.com"
    imageDescription="BKOOL da la posiblidad de convertirse en embajadores a todos aquellos atletas que lo deseen."
    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."
    cardGiftTitle="EMBAJADORES"
    cardGiftSubtitle="1 año"
    cardGiftPrice="GRATIS"
    cardGiftStyle="secondary"
    listData={list}
/>

Nombre	Type	Default	Descripción
backgroundImage	string	/static/img/cards/hannes-glockl-5-3-Rjd0d_U-unsplash.jpg	Imagen de background.
children	node		Contenido del componente.
description	string		Texto de la descripción.
cardGiftTitle	string		Título de CardGift
cardGiftSubtitle	string		Subtítulo de CardGift
cardGiftPrice	string		Precio de CardGift
cardGiftCurrency	string		Moneda de CardGift
cardGiftStyle	"accent" \| "secondary"		Estilo de CardGift
cardGiftLinkUrl	string		Título de CardGift
cardGiftHandleAction	string		Título de CardGift
imageLinkText	string		Texto del link que se encuentra debajo de la Card.
imageLinkColor	"accent" \| "primary" \| "secondary"		Color del link que se encuentra debajo de la Card.
imageLinkTarget	"_blank" \| "_self" \| "_parent" \| "_top"		Target del link que se encuentra debajo de la Card.
imageLinkUrl	string		URL del link que se encuentra debajo de la Card.
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.
imageSubtitle	string		Texto del título en el área de la imagen.
layout	"imageFirst" \| "textFirst"	imageFirst	Orden de los elementos del layout.
title	string		Texto del título.