/blocks/block-header

El componente BkHeader es un componente de layout que corresponde con lo primero que se le muestra al usuario en una página. Es importante tener en cuenta que a nivel de estructura HTML este componente dibuja un tag section.

Para su uso, debemos especificar si es de tipo "basic" o "video" a través de la prop headerType. Dependiendo del valor de headerType, se extienden las props definidas en los componentes BkSection o BkSectionVideo.

¿Qué es BKOOL?

El simulador más completo.
Todo lo que necesites... ¡Lo tienes!

<BkHeader
    backgroundImage="/static/img/cards/hannes-glockl-5-3-Rjd0d_U-unsplash.jpg"
    backgroundOverlay
    headerType='basic'
    paddingY="extraLarge"
    textAlign='center'
>
    <BkTypography
        color="white"
        variant="h1"
        gutterBottom
    >
        ¿Qué es BKOOL?
    </BkTypography>
    <BkTypography
        color="white"
        variant="body3"
        gutterBottom
        sx={{ marginBottom: '2rem' }}
    >
        El simulador más completo.<br/>Todo lo que necesites... ¡Lo tienes!
    </BkTypography>
    <BkButton variant="contained" color="accent">
        Solid Secondary
    </BkButton>
</BkHeader>

Modificando la prop textAlign podremos controlar el estilo de la alineación del contenido.

¿Qué es BKOOL?

El simulador más completo.
Todo lo que necesites... ¡Lo tienes!

<BkHeader
    backgroundImage="/static/img/cards/hannes-glockl-5-3-Rjd0d_U-unsplash.jpg"
    backgroundOverlay
    headerType='basic'
    paddingX="extraLarge"
    paddingY="extraLarge"
    textAlign='left'
>
    { children }
</BkHeader>

Modificando la prop wave podremos añadir un elemento decorativo en forma de ola, acepta 2 valores de color: "white" y "black".

¿Qué es BKOOL?

El simulador más completo.
Todo lo que necesites... ¡Lo tienes!

Si queremos añadir un vídeo de background, tendremos que modificar el valor de headerType a "video". De esta forma, aceptará las props definidas en el componente BkSectionVideo.

¿Qué es BKOOL?

El simulador más completo.
Todo lo que necesites... ¡Lo tienes!

<BkHeader
    backgroundImage="/static/img/cards/hannes-glockl-5-3-Rjd0d_U-unsplash.jpg"
    headerType="basic"
    textAlign="center"
    wave="black"
>
    <{ children }
</BkHeader>

<BkHeader
    backgroundOverlay
    backgroundImage="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.jpg"
    localVideoMp4="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.mp4"
    localVideoWebm="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.webm"
    localVideoOgv="https://bsimvideo.bkool.com/videos/webpublica/home/desktop/home-desktop.ogv"
    textAlign='center'
    paddingTop="8rem"
    headerType="video"
    wave="black"
>
    { children }
</BkHeader>

Nombre	Type	Descripción
backgroundColor	string - "#000000" or "accent" \| "primary" \| "secondary" \| "error" \| "info" \| "success" \| "warning"	El color del background del componente.
backgroundImage	string	La imagen del background del componente.
backgroundOverlay	bool	Añade un overlay al background del componente. Este overlay cambia dependiendo si es el estilo del Giro o de Bkool.
borderRadius	bool	Señala si tendrá radio el borde del componente.
children	node	Contenido del componente.
className	string	Sirve para añadir una clase a un componente.
localVideoMp4	string	Enlace del vídeo con extensión .mp4.
localVideoOgv	string	Enlace del vídeo con extensión .ogv.
localVideoWebm	string	Enlace del vídeo con extensión .webm.
paddingX	"none" \| "extrasmall" \| "small" \| "medium" \| "large" \| "extralarge"	Añade un padding horizontal al componente.
paddingY	"none" \| "extrasmall" \| "small" \| "medium" \| "large" \| "extralarge"	Añade un padding vertical al componente.
youtubeVideo	string	Enlace de vídeo en Youtube.
wave	"white" \| "black"	Añade un elemento curvo en el bottom del componente.