Banner

O componente Banner é usado chamar atenção dos usuários ao entrar no site podendo ser acesso a outro link relacionado.

Importação

import { Banner } from '@escaletech/delta'

Utilização

Editor de código

<Banner image={{ src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg', width: 338, height: 389, alt: 'Tudo junto e conectado' }} title={{ children: <h3>A title here</h3>, as: 'div' }} text={{ children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }} button={{ children: 'Contrate online', as: 'a', href: 'https://delta.staging.escale.com.br/' }} background='linear-gradient(180deg, #E7AB13 0%, #D2951F 100%);' />

<Banner
  image={{
    src: 'https://thc-cms-escale.cdn.prismic.io/thc-cms-escale/6f8f1ed4-4e48-4363-8f59-25a2cda6872f_Group+2.svg',
    width: 338,
    height: 389,
    alt: 'Tudo junto e conectado'
  }}
  title={{
    children: <h3>A title here</h3>,
    as: 'div'
  }}
  text={{
    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  }}
  button={{
    children: 'Contrate online',
    as: 'a',
    href: 'https://delta.staging.escale.com.br/'
  }}
  background='linear-gradient(180deg, #E7AB13 0%, #D2951F 100%);'
/>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  space: {
    bannerPadding: '72px'
  },
  sizes: {
    bannerHeight: '540px'
  }
})

Tokens

Token	Descrição
sizes.bannerHeight	Altura do banner
space.bannerPadding	Espaçamento vertical do banner

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
image	Imagem do banner	TImage	-	❌
title	Título do banner	THeadingProps	-	❌
text	Texto do banner	TParagraphProps	-	❌
button	Botão do banner	TButtonProps	-	❌
background	Cor de fundo do banner	string	-	❌