CardProduct

O componente CardProduct é utilizado para exibir as informações relacionadas a um produto.

Importação

import { CardProduct } from '@escaletech/delta'

Utilização

O componente pode ser utilizado de duas maneiras. Você pode utilizar as áreas comuns dos cards e utilizar uma versão mais simples ou montar suas seções de forma manual utilizando a propriedade children.

Utilizando apenas as areas em comum

Quando você passa todas as propriedades para o componente, ele irá renderizar um card mais simples com as informações no header e footer do componente.

Veja o exemplo abaixo.

Editor de código

<CardProduct overline={{ children: 'Claro Combo' }} title={{ children : '240 Mega' }} subtitle={{ children: 'Internet 240 Mega' }} description={{ children : 'Com Wifi Plus Grátis e Serviços digitais' }} cta={{ children: 'Comprar agora', onClick: () => window.alert('Você clicou no botão') }} anchor={{ children: 'Mais detalhes', href: '#' }} price={{ value: '249,99', periodicity: 'mês', legend: 'Valor individual com pagamento em débito automático' }} />

<CardProduct
  overline={{ 
    children:  'Claro Combo'
  }}
  title={{ 
    children : '240 Mega'
  }}
  subtitle={{ 
    children: 'Internet 240 Mega'
  }}
  description={{ 
    children : 'Com Wifi Plus Grátis e Serviços digitais'
  }}
  cta={{ 
    children: 'Comprar agora', 
    onClick: () => window.alert('Você clicou no botão') 
  }}
  anchor={{ 
    children: 'Mais detalhes', 
    href: '#' 
  }}
  price={{ 
    value: '249,99', 
    periodicity: 'mês', 
    legend: 'Valor individual com pagamento em débito automático' 
  }}
/>

Resultado

Loading...

Customizando o corpo do card

Para permitir uma flexibilidade maior do componente, você pode customizar o corpo do card através da propriedade children.

Logo, o componente seguirá esta estrutura:

<CardProduct>
  <Header /> /* Header do card -> overline, título, subtítulo e highlight */
  {children}
  <Footer /> /* Footer do card -> Preço, legenda do preço, cta e âncora */
</CardProduct>

As areas em comum (Header e Footer) continuarão, porém você pode adicionar outras seções no corpo do card.

Veja exemplos abaixo.

tip

Se você utilizar as classes subtitle e description nos elementos de texto filhos de CardProduct, a cor do texto será relacionada aos tokens: $cardProductSubtitleColor e $cardProductDescriptionColor.

import { CardProduct, Divisor, Paragraph, Heading } from '@escaletech/delta'

Editor de código

<CardProduct overline={{ children: 'Claro Combo' }} title={{ children : '240 Mega' }} subtitle={{ children: 'Internet 240 Mega' }} description={{ children : 'Com Wifi Plus Grátis e Serviços digitais' }} cta={{ children: 'Comprar agora', onClick: () => window.alert('Você clicou no botão') }} anchor={{ children: 'Mais detalhes', href: '#' }} price={{ value: '249,99', periodicity: 'mês', legend: 'Valor individual com pagamento em débito automático' }} > <Divisor /> <Paragraph size='xs' className='subtitle'> TV Fácil HD </Paragraph> <Paragraph size='xs' className='description'> 123 canais no Fácil HD + 115 canais no MIX HD por 2 anos no Combo </Paragraph> <Divisor /> <Paragraph size='xs' className='subtitle'> Telefone fixo </Paragraph> <Paragraph size='xs' className='description'> Ilimitado para todo o Brasil de qualquer operadora. </Paragraph> </CardProduct>

<CardProduct
  overline={{ 
    children:  'Claro Combo'
  }}
  title={{ 
    children : '240 Mega'
  }}
  subtitle={{ 
    children: 'Internet 240 Mega'
  }}
  description={{ 
    children : 'Com Wifi Plus Grátis e Serviços digitais'
  }}
  cta={{ 
    children: 'Comprar agora', 
    onClick: () => window.alert('Você clicou no botão') 
  }}
  anchor={{ 
    children: 'Mais detalhes', 
    href: '#' 
  }}
  price={{ 
    value: '249,99', 
    periodicity: 'mês', 
    legend: 'Valor individual com pagamento em débito automático' 
  }}
>
    <Divisor />

    <Paragraph size='xs' className='subtitle'>
      TV Fácil HD
    </Paragraph>
    <Paragraph size='xs' className='description'>
      123 canais no Fácil HD + 115 canais no MIX HD por 2 anos no Combo
    </Paragraph>

    <Divisor />

    <Paragraph size='xs' className='subtitle'>
      Telefone fixo
    </Paragraph>
    <Paragraph size='xs' className='description'>
      Ilimitado para todo o Brasil de qualquer operadora.
    </Paragraph>
</CardProduct>

Resultado

Loading...

Tokens

Token	Descrição
cardProductBackgroundColor	Define a cor de fundo do card
cardProductOverlineColor	Define a cor do texto de nome do serviço
cardProductTitleColor	Define a cor do título do card
cardProductHighlightColor	Define a cor do texto de destaque
cardProductSubtitleColor	Define a cor do texto de subtítulo
cardProductDescriptionColor	Define a cor do texto de descrição
cardProductPriceColor	Define a cor do texto do preço do produto
cardProductPeriodicityColor	Define a cor do texto de periodicidade
cardProductWidth	Define a largura do card
cardProductBoxShadow	Define a sombra do card
cardProductBorderRadius	Define o raio da borda do card

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
children	Conteúdo do componente (seções customizáveis)	ReactNode	null	❌
title	Título do produto, geralmente é a franquia do produto (ex: 240 mega)	THeadingProps	-	✅
overline	Nome do serviço (ex: Claro Combo)	TParagraphProps	-	✅
highlight	Texto em destaque	TParagraphProps	-	❌
subtitle	Subtítulo do produto	TParagraphProps	-	✅
description	Descrição do produto	TParagraphProps	-	✅
cta	Propriedades do botão CTA	TButtonProps	-	✅
anchor	Propriedades da âncora	TLinkProps	-	❌
price	Propriedades do preço do produto	TPriceProps	-	✅