/blocks/block-featured

El componente BkFeatured está pensado para tener una estructura donde podamos añadir contenido además del contenido por defecto. Su layout es versátil y se puede personalizar para distintos usos. Es importante tener en cuenta que a nivel de estructura HTML este componente dibuja un tag section.

Descubre cómo funciona

BKOOL es muy sencillo de usar, déjanos explicarte como disfrutar al máximo de tus entrenamientos en casa.

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

<BkFeatured
    imageUrl='/static/img/features/features2.png'
    title='Descubre cómo funciona'
    description='BKOOL es muy sencillo de usar, déjanos explicarte como disfrutar al máximo de tus entrenamientos en casa.'
    listData={list}
    imageSize='large'
    textSize='small'
/>

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

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.

<BkFeatured
    layout='imageFirst'
    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}
/>

Nombre	Type	Default	Descripción
children	node		Contenido del componente.
description	string		Texto del contenido de la descripción.
imageUrl	string	/static/img/features/features.png	Imagen del contenido.
layout	"imageFirst" \| "textFirst"	textFirst	Orden de layout.
listData	array		Contenido de la lista.
title	string		Texto del título.
imageSize	"medium" \| "large"	medium	Tamaño del bloque de texto
textSize	"medium" \| "small"	medium	Tamaño del bloque de imagen.