aperte s para abrir a busca
Storybook Storybook
v1.81.11

# CProductCard

Os cartões contêm conteúdo e ações sobre um único assunto. No caso do CProductCard, são Cards já pré definidos para representar os produtos da Estratégia como Cursos, Trilhas, etc.

# Exemplos de CProductCard

# Simples

O Card possui largura de 100%, se ajustando responsivamente em qualquer lugar onde for colocado, tendo uma largura minima necessária definida. É recomendado usar ele em conjunto com uma classe definindo sua largura, ou em casos de grids ou carrosseis deixar ele se adaptar sozinho de acordo com o espaço disponível.

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic 

<c-product-card class="c-col-1/4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
</c-product-card>

# Tipos de Cards

Nosso card já possui vertentes para alguns dos nossos produtos/horizontais:

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic

0 Questões
0
0
0

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic 

<div class="c-row">
  <c-cast-card style="width: 80px;margin-left: 1rem;">
    Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  </c-cast-card>
  <c-course-card style="width: 80px;margin-left: 1rem;">
    Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  </c-course-card>
  <c-notebook-card style="width: 80px;margin-left: 1rem;">
    Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  </c-notebook-card>
  <c-trail-card style="width: 80px;margin-left: 1rem;">
    Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  </c-trail-card>
  <c-tutoring-card style="width: 80px;margin-left: 1rem;">
    Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  </c-tutoring-card>
</div>

# Conteúdo completado

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic 

<c-product-card completed class="c-col-1/4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
</c-product-card>

# Loading

<c-product-card loading class="c-col-1/4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
</c-product-card>

# Slots

Nosso Card trabalha com vários Slots de conteúdos dinamicos afim de proporcionar vários tipos de layouts. Para usá-los basta seguir os nomes dos slots definidos na aba de API.

Alguma informação aqui

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic 

<c-product-card class="c-col-1/4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  <template v-slot:kebab>
    <c-options>Uma Opção aqui</c-options>
  </template>
  <template v-slot:content>
    Alguma informação aqui
  </template>
</c-product-card>

# Images

Para passar imagens customizadas para o fundo do card, podem ser utilizados tanto o slot (substituindo o conteúdo todo de imagem e passando o que quiser no lugar) quanto a prop de image que recebe URLs de imagens a serem exibidas de fundo.

# Slot

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic 

<c-product-card class="c-col-1/4">
  Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
  <template v-slot:image>
    <img src="https://via.placeholder.com/360x160?text=Image" />
  </template>
</c-product-card>

# Prop

Texto de alt

Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic 

<c-product-card
  :image="{
    url: 'https://via.placeholder.com/360x160?text=Image',
    fallback: 'https://via.placeholder.com/360x160?text=Image',
    alt: 'Texto de alt'
  }"
  class="c-col-1/4"
>
  Lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic lorem ipsum dolor sit amet sic
</c-product-card>

# CProductCard API

Para utilizar o CProductCard é preciso primeiro importar o componente.

import { CProductCard } from '@estrategiahq/coruja-web-ui';
1

# Props

A props disponíveis para configurar o componente são:

Nome Tipo Default Descrição
completed boolean false Define se o Card deve ter uma aparência de conteúdo completado.
loading boolean false Define se o Card deve exibir o comportamento de carregando.
icon string null Define o ícone a ser mostrado na ilustração do Card (só para a ilustração default).
maxLines number 3 Define o número máximo de linhas a serem mostradas do texto.
image object null Define a imagem a ser utilizada de fundo, aceita um objeto com 3 propriedades: url, fallback e alt.

# Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos definidos os seguintes slots:

Nome Descrição
default Slot padrão do Vue, por onde deve ser passado o texto inferior do Card.
title Slot para o texto a ser mostrado no canto superior esquerdo do Card, ao lado da imagem.
kebab Slot para as opções (COptions (opens new window) a serem mostradas dentro do CDropdown que é renderizado através do ícone de kebab dentro do Card. Caso o slot não seja passado, o kebab não é mostrado.)
image Imagem/Ilustração do Card a ser exibida na parte superior.
content Slot de conteúdo do Card que será exibido acima do texto inferior, entre o texto e a imagem, agindo como um "cabeçalho".

# Events

Usado para definir alguma ação.

Nome Tipo Descrição
@click function Emitido quando o componente é clicado.