CardInfoList

O componente CardInfoList é usado para exibir pequenas informações em uma lista horizontal com scroll.

Importação

import { CardInfoList } from '@escaletech/delta'

Utilização

Editor de código

<CardInfoList title={{ children: 'Veja porque a Claro é a escolha ideal para você', as: 'h2' }} items={[{ 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/270/270" } }, { title: { children: 'Tecnologia Fibra Óptica', as: 'h3' }, text: { children: 'Os produtos Claro Internet residencial utilizam fibra óptica, tecnologia que garante que o sinal chegue até sua casa com maior mais qualidade, rapidez e estabilidade.' }, image: { id: "random-image-2", alt: "Imagem aleatória", src: "https://picsum.photos/270/270" } }, { title: { children: 'Ofertas para quem já é cliente', as: 'h3' }, text: { children: 'Se você já utiliza os serviços Claro, saiba que é possível aproveitar benefícios exclusivos, como descontos em novos aparelhos smartphones, em upgrade de planos e novos produtos contratados.' }, image: { id: "random-image-3", alt: "Imagem aleatória", src: "https://picsum.photos/270/270" } }, { title: { children: 'Streamings', as: 'h3' }, text: { children: 'Encontre planos com assinaturas dos seus streamings favoritos, todos com reduções vantajosas no valor. Ainda, tenha acesso liberado aos milhares de conteúdos do NOW, plataforma de vídeo da Claro.' }, image: { id: "random-image-4", alt: "Imagem aleatória", src: "https://picsum.photos/270/270" } }]} />

<CardInfoList
  title={{
    children: 'Veja porque a Claro é a escolha ideal para você',
    as: 'h2'
  }}
  items={[{
    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/270/270"
    }
  }, {
    title: {
      children: 'Tecnologia Fibra Óptica',
      as: 'h3'
    },
    text: {
      children: 'Os produtos Claro Internet residencial utilizam fibra óptica, tecnologia que garante que o sinal chegue até sua casa com maior  mais qualidade, rapidez e estabilidade.'
    },
    image: {
      id: "random-image-2",
      alt: "Imagem aleatória",
      src: "https://picsum.photos/270/270"
    }
  }, {
    title: {
      children: 'Ofertas para quem já é cliente',
      as: 'h3'
    },
    text: {
      children: 'Se você já utiliza os serviços Claro, saiba que é possível aproveitar benefícios exclusivos, como descontos em novos aparelhos smartphones, em upgrade de planos e novos produtos contratados.'
    },
    image: {
      id: "random-image-3",
      alt: "Imagem aleatória",
      src: "https://picsum.photos/270/270"
    }
  }, {
    title: {
      children: 'Streamings',
      as: 'h3'
    },
    text: {
      children: 'Encontre planos com assinaturas dos seus streamings favoritos, todos com reduções vantajosas no valor. Ainda, tenha acesso liberado aos milhares de conteúdos do NOW, plataforma de vídeo da Claro.'
    },
    image: {
      id: "random-image-4",
      alt: "Imagem aleatória",
      src: "https://picsum.photos/270/270"
    }
  }]}
/>

Resultado

Loading...

Classes

Você pode selecionar elementos através de classes. Para o título use a classe title, para o scroll, scroll.

Editor de código

<CardInfoList css={{ '.scroll': { border: '5px solid aquamarine' }, '.title': { color: 'aquamarine' } }} title={{ children: 'Veja porque a Claro é a escolha ideal para você', as: 'h2' }} items={[{ 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/270/270" } }, { title: { children: 'Tecnologia Fibra Óptica', as: 'h3' }, text: { children: 'Os produtos Claro Internet residencial utilizam fibra óptica, tecnologia que garante que o sinal chegue até sua casa com maior mais qualidade, rapidez e estabilidade.' }, image: { id: "random-image-2", alt: "Imagem aleatória", src: "https://picsum.photos/270/270" } }, { title: { children: 'Ofertas para quem já é cliente', as: 'h3' }, text: { children: 'Se você já utiliza os serviços Claro, saiba que é possível aproveitar benefícios exclusivos, como descontos em novos aparelhos smartphones, em upgrade de planos e novos produtos contratados.' }, image: { id: "random-image-3", alt: "Imagem aleatória", src: "https://picsum.photos/270/270" } }, { title: { children: 'Streamings', as: 'h3' }, text: { children: 'Encontre planos com assinaturas dos seus streamings favoritos, todos com reduções vantajosas no valor. Ainda, tenha acesso liberado aos milhares de conteúdos do NOW, plataforma de vídeo da Claro.' }, image: { id: "random-image-4", alt: "Imagem aleatória", src: "https://picsum.photos/270/270" } }]} />

<CardInfoList
  css={{
    '.scroll': {
      border: '5px solid aquamarine'
    },
    '.title': {
      color: 'aquamarine'
    }
  }}
  title={{
    children: 'Veja porque a Claro é a escolha ideal para você',
    as: 'h2'
  }}
  items={[{
    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/270/270"
    }
  }, {
    title: {
      children: 'Tecnologia Fibra Óptica',
      as: 'h3'
    },
    text: {
      children: 'Os produtos Claro Internet residencial utilizam fibra óptica, tecnologia que garante que o sinal chegue até sua casa com maior  mais qualidade, rapidez e estabilidade.'
    },
    image: {
      id: "random-image-2",
      alt: "Imagem aleatória",
      src: "https://picsum.photos/270/270"
    }
  }, {
    title: {
      children: 'Ofertas para quem já é cliente',
      as: 'h3'
    },
    text: {
      children: 'Se você já utiliza os serviços Claro, saiba que é possível aproveitar benefícios exclusivos, como descontos em novos aparelhos smartphones, em upgrade de planos e novos produtos contratados.'
    },
    image: {
      id: "random-image-3",
      alt: "Imagem aleatória",
      src: "https://picsum.photos/270/270"
    }
  }, {
    title: {
      children: 'Streamings',
      as: 'h3'
    },
    text: {
      children: 'Encontre planos com assinaturas dos seus streamings favoritos, todos com reduções vantajosas no valor. Ainda, tenha acesso liberado aos milhares de conteúdos do NOW, plataforma de vídeo da Claro.'
    },
    image: {
      id: "random-image-4",
      alt: "Imagem aleatória",
      src: "https://picsum.photos/270/270"
    }
  }]}
/>

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: {
    cardInfoListGutterCards: '$xxs'
  },
  sizes: {
    cardInfoListWidthMobile: '220px'
  }
})

Tokens

Token	Descrição
space.cardInfoListGutterCards	Espaçamento entre os cards
sizes.cardInfoListWidthMobile	Tamanho do card no mobile

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
title	Título	THeadingProps	-	❌
items	Array de cards de informação contendo imagem, título e descrição	TCardInfoProps	-	❌