CardInfo

O componente CardInfo é usado para exibir pequenas informações em um Carousel.

Importação

import { CardInfo } from '@escaletech/delta'

Utilização

Editor de código

<CardInfo title={{ children: 'Primeiro 5G do Brasil', as: 'h3' }} text={{ children: 'Além da melhor cobertura 4.5G, a Claro é a primeira operadora a disponibilizar o sinal 5G. A evolução da rede traz velocidade até 12 vezes maior que as gerações anteriores.' }} image={{ id: "random-image", alt: "Imagem aleatória", src: "https://picsum.photos/300/300" }} />

<CardInfo
  title={{
    children: 'Primeiro 5G do Brasil',
    as: 'h3'
  }}
  text={{
    children: 'Além da melhor cobertura 4.5G, a Claro é a primeira operadora a disponibilizar o sinal 5G. A evolução da rede traz velocidade até 12 vezes maior que as gerações anteriores.'
  }}
  image={{
    id: "random-image",
    alt: "Imagem aleatória",
    src: "https://picsum.photos/300/300"
  }}
/>

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({
  colors: {
    cardInfoTitleColor: '$secondaryMedium',
    cardInfoTextColor: '$neutralDark'
  },
  radii: {
    cardInfoImageBorderRadius: '$sm'
  },
  sizes: {
    cardInfoWidth: '270px'
  }
})

Tokens

Token	Descrição
colors.cardInfoTitleColor	Cor do título do card
colors.cardInfoTextColor	Cor da descrição do card
radii.cardInfoImageBorderRadius	Arredondamento das bordas da imagem
sizes.cardInfoWidth	Largura máxima do card

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
title	Título	THeadingProps	-	✅
text	Texto do card	TParagraphProps	-	✅
image	Imagem do card	TImage	-	❌