Componente Card

Como criar o Componente Card

Tutorial

O Componente aceita os itens abaixo:

- Imagem (Sugestão de tamanho de imagens Mobile 266X266px ou 266x174px ou Desktop 266X500px) ou ícone;

- Bill offer;

- Topico horizontal;

- Highlight

- Titulo

- Subtitulo

- Texto rico

- Botao - link interno, externo, modal multimedia, click to call (Telefone), modal forms (CEP), link ancora

- Link arrow - link interno, externo, modal multimidio, click to call (Telefone), modal forms (CEP), link ancora

Obs: Agora o Componente Card aceita vídeo, no cadastro do Storyblok temos um campo para inserí-lo, lembrando que ícone e imagens são soberanos, ou seja, caso estes estejam preenchidos o vídeo não será renderizado.

Regras de funcionamento:

- Swiper-button de seleção de cards direita e esquerda - No desktop só exibido com 5 cards ou mais. Não deve ser exibido com total de cards entre 1 e 4.

- Swiper-button de seleção de cards direita e esquerda - No mobile só exibido com 2 cards ou mais. Não deve ser exibido com total de 1 cards.

- Imagem tamanho - A largura recomendada tanto para mobile quanto em desktop deve ser 266px. A altura pode variar. Ex: 266X174px ou 266X500px

- Icone - Se houver imagem cadastrada, o sistema exibira apenas o ícone. A imagem será ignorada.

- Layout - Padrão ou Inverso somente na cor vermelha. A Opção de Layout está no menu "Opções" na página onde o seu card será inserido.

*Foi implementado a possibilidade de incluir vídeo no componente Card, para aumentar a atratividade no site para vídeos tutoriais, recomendamos usar capa do video no tamanho 266x177.
Navegar em: Conteúdo>Conteúdos Compartilhados>Card>Itens>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:

1 - Nome do componente

2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:

Ex: item-card-zigzag-home-produtos-fone-fixo-pj >Salvar

3 - Preencher os campos necessários que irá compor o Card do seu ZigZag.

Caso o seu componente levar Imagem, Tópico Horizontal, Link Arrow, Preço e Botão, tem que cadastrá-los antes ou copiar já um existente (Ver no Índice do Manual "Como copiar componentes") e preenchê-los nos campos necessários>Salvar>Publicar
Navegar em: Conteúdo>Conteúdos Compartilhados>Card>Listas>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:

1 - Nome do componente

2 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:

Ex: lista-card-zigzag-home-produtos-fone-fixo-pj >Salvar
3 - Inserir do lado direito da tela no campo "Itens de Card", os itens criados que farão parte do seu Card>Salvar>Publicar.
Navegar em: Conteúdo>Conteúdos Compartilhados>Links>Clicar em +Item e inserir o nome do arquivo

O nome do arquivo deve seguir a semântica:

1 - Nome do link, se interno, externo, modal

2 - Nome do componente

3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj:

Ex: link-interno-institucional-home-produtos-pf> Salvar
4 - O sistema exibe a tela para preenchimento dos campos para o Link
5 - Preencher campos obrigatórios
6 - Para o campo "URL" escolha onde o seu link para o card será aberto, se "Link Interno" ou "URL" (não esquecer de colocar o caminho completo iniciando em "https://..." ou "Asset" (este quando for usar para criação do "Tutorial Componente", verificar no manual como criar), podemos selecionar um já existente nos combos apresentados para cada componente ou até mesmo copiar um(Veja no Indice deste manual "Como copiar Componentes">Salvar>Publicar
Navegar em: Conteúdo>Conteúdos Compartilhados>Imagens>Clicar em +Item e inserir o nome do arquivo
O nome do arquivo deve seguir a semântica:

1 - Nome imagem

2 - Nome do componente

3 - Caminho de onde se encontra o componente, tudo minúsculo e separados por hífen, se pf ou pj: Ex: "img-card-banda-larga-pj". Salvar>
4 - Do lado direto da tela será exibido as opções para fazer upload das imagens, sendo:

Padrão, Mobile e Tablet>Clicar em "Upload New" para cada imagem>Preencher campos obrigatórios>Salvar>Publicar
1- Acessar a página que irá receber o componente em "Home > Site"; (Ver no índice deste manual o item "Como criar página no storyblok)

2- Na aba "Geral", clicar em "+Adicionar bloco";

3- Selecionar na lista, o item "Card" criado anteriormente;

4- Isso irá criar um bloco com o nome "Card vazio". Clicar nele;

5- Na aba "Geral", clicar em "Selecionar" e na caixa em branco de "Selecionar Card";

6- Isso ira exibir uma lista com os itens de Card. Clique no Card Item desejado;

7- Se desejar inserir um Titulo, subtítulo e rodapé para o bloco criado, clicar na aba "Opções" e em "Propriedades Avançadas" e inserir os valor nos respectivos campos.

8- Clicar em "Salvar" e "Publicar"
O Contador é exibido na parte superior do card e tem as seguintes configurações:

1 - Se usarmos o tamanho do contador SM e MD o card irá exibir o campo "texto contador 1";

2 - Se usarmos o tamanho do contador LG o card irá exibir em duas linhas o campo "texto contador 2" e o tempo na linha de baixo;
3 - Quando o contador for maior ou igual a 24 horas, o card irá exibir o formato em dias: “1 Dia ou 2 Dias”.

OBS: O contador é cadastrado somente no Item do Card no menu "Opções" que está abaixo do período de vigência.

*Contador pode ser inserido no Item Card, Card de vendas e Banner Basic.
Navegar em: Conteúdo>Conteúdos Compartilhados>Card>Item>Clicar em +Item
1 - Inserir o nome do arquivo, que deve seguir a semântica:
2 - Nome do componente

3 - Caminho de onde se encontra o componente, se PF ou PJ, tudo minúsculo e separados por hífen:

Ex: componente-card-home-pj>Clicar em Salvar

A partir do Item de Card já criado no menu "Opções" abaixo do perído de vigência são exibidos os campos:

1 - Contador com a opção de habilitar
2 - Tamanho do contador (Obrigatório) com as opções "SM", "MD" e "LG"
3 - Tamanho do contador 1 (usando o tamanho do contador SM e MD só exibe o campo "texto contador 1")
4 - Tamanho do contador 2 (usando o tamanho do contador LG exibe em duas linhas o campo "texto contador 2" e o tempo na linha de baixo.

OBS: Para que o Contador funcione corretamente é necessário selecioner data ou perído no campo "Período de Vigência", programando a vigência do contador Inicio e fim (Campo obrigatório)

Quando o contador for maior ou igual a 24 horas, ele exibe o formato em dias: “1 Dia ou 2 Dias”

Vídeo com tutorial para criar o componente Card

Título Card 1

Subtítulo Card 1 - Layout default

Highlight Card

Título Card Full 01

Subtítulo Card

[FULL] lorem ipsum dolor sit.

texto negrito meio
inicio texto negrito fim
meio texto negrito

Tópico 01
Tópico 02

Link Interno Arrow

Prefixo ~~R$8,99~~

R$9,99

Sufixo

Highlight Card

Título Card Full 02

Subtítulo Card

[FULL] lorem ipsum dolor sit.

inicio meio texto negrito;
inicio texto negrito fim;
texto negrito meio fim.

Tópico 01
Tópico 02

Link Externo Arrow

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Highlight Card

Título Card Full 03

Subtítulo Card

[FULL] lorem ipsum dolor sit.

meio fim;
inicio fim;
inicio meio

Tópico 01
Tópico 02

Link Anc CARD 7 Arrow

Modal ClickToCall Arrow

Prefixo

R$999,99

Sufixo

Highlight Card

Título Card Full 04

Subtítulo Card

[FULL] lorem ipsum dolor sit.

inicio meio
inicio fim;
meio fim.

Tópico 01
Tópico 02

Link Interno Arrow

~~Dê R$ 10.999,99~~

R$9.999,99

Sufixo

Highlight Card

Título Card Full 05

Subtítulo Card

[FULL] lorem ipsum dolor sit.

meio texto negrito;
inicio e texto negrito fim;
texto negrito meio

Tópico 01
Tópico 02

Link Externo Arrow

Prefixo

R$99.999,99

Sufixo

Highlight Card

Título Card Full 06

Subtítulo Card

[FULL] lorem ipsum dolor sit.

texto negrito meio
inicio texto negrito e e fim;
meio texto negrito.

Tópico 01
Tópico 02

Link Anc CARD 7 Arrow

Prefixo ~~R$8,99~~

R$9,99

Sufixo

Highlight Card

Título Card Full 07

Subtítulo Card

[FULL] lorem ipsum dolor sit.

início meio
início fim;
meio fim.

Tópico 01
Tópico 02

Link Interno Arrow

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Modal ClickToCall PRI

Highlight Card

Título Card Full 08

Subtítulo Card

[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora

Tópico 01
Tópico 02

Link Externo Arrow

Prefixo

R$999,99

Sufixo

Highlight Card

Título Card Full 09

Subtítulo Card

[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora

Tópico 01
Tópico 02

Link Anc CARD 7 Arrow

~~Dê R$ 10.999,99~~

R$9.999,99

Sufixo

Rodapé 1 [FULL] ID Link âncora: CARD-ANCORA-01 link => e e

Título Card 2

Subtítulo Card 2 - Layout default

Título Card 10

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 11

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Interno Arrow

Título Card 12

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Externo Arrow

Título Card 13

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 7 Arrow

Título Card 14

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall Arrow

Título Card 15

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 16

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 17

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 18

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 3

Subtítulo Card 3 - Layout default

Título Card 19

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Int PRI

Título Card 20

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Ext SEC

Título Card 21

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 22

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi modal blank

Título Card 23

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 24

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall VEN

Título Card 25

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 26

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 27

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Rodapé 3 - ID Link âncora: CARD-ANCORA-03 link =>

Título Card 4

Subtítulo Card 4 - Layout default

Título Card 28

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 29

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 30

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 31

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Int VEN

Título Card 32

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Ext PRI

Título Card 33

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 6 SEC

Título Card 34

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall VEN

Título Card 35

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 36

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Rodapé 4 - ID Link âncora: CARD-ANCORA-04 link =>

Título Card 5

Subtítulo Card 5 - Layout default

Highlight Card

Card - 37 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Highlight Card

Card - 38 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Highlight Card

Card - 39 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Highlight Card

Card - 40 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Highlight Card

Card - 41 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Interno Arrow

Highlight Card

Card - 42 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Externo Arrow

Highlight Card

Card - 43 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 7 Arrow

Highlight Card

Card - 44 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall Arrow

Highlight Card

Card - 45 lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam, lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Rodapé 5 - ID Link âncora: CARD-ANCORA-05

Título Card 6

Subtítulo Card 6 - Layout inverso

Título Card 46

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall Arrow

Título Card 47

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 7 Arrow

Título Card 49

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Interno Arrow

Título Card 50

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 51

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Interno Arrow

Título Card 52

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Externo Arrow

Título Card 53

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 54

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall Arrow

Título Card 48

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Externo Arrow

Rodapé 6 - ID Link âncora: CARD-ANCORA-06

Título Card 7

Subtítulo Card 7 - Layout default

Título Card 55

Subtítulo Card

lorem ipsum dolor sit amet consectetur adipiscing elit

luctus faucibus
vehicula litora taciti sem ante
morbi tristique viverra diam

luctus faucibus
vehicula litora taciti sem ante
morbi tristique viverra diam

Link Interno Arrow

~~Dê R$ 10.999,99~~

R$9.999,99

Sufixo

Título Card 62

Subtítulo Card

lorem ipsum dolor sit amet consectetur adipiscing elit

luctus faucibus
vehicula litora taciti sem ante
morbi tristique viverra diam

Link Externo Arrow

Prefixo

R$999,99

Sufixo

Título Card 63

Subtítulo Card

lorem ipsum dolor sit amet consectetur adipiscing elit

luctus faucibus
vehicula litora taciti sem ante
morbi tristique viverra diam

Link Anc CARD 5 Arrow

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Rodapé 7 - ID Link âncora: CARD-ANCORA-07

Título Card 8

Subtítulo Card 8 - Layout default

Título Card 64

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 5 Arrow

Título Card 65

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall Arrow

Título Card 66

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 67

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 68

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 69

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 70

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Título Card 71

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Interno Arrow

Título Card 72

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Externo Arrow

Rodapé 8 - ID Link âncora: CARD-ANCORA-08

Título Card 9

Subtítulo Card 9 - Layout default

Highlight

Título Card 73

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Prefixo

R$999,99

Sufixo

Link Ext SEC

Highlight

Título Card 74

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

~~Dê R$ 10.999,99~~

R$9.999,99

Sufixo

Link Anc CARD 6 VEN

Highlight

Título Card 75

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Prefixo

R$99.999,99

Sufixo

Modal ClickToCall PRI

Highlight

Teste Modal Consultar Disponibilidade

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Rodapé 9 - ID Link âncora: CARD-ANCORA-09

Título Card Full 10

Subtítulo Card 10 - Layout Inverse (Vermelho)

Highlight Card

Título Card Full 01

Subtítulo Card

[FULL] lorem ipsum dolor sit.

texto negrito meio
inicio texto negrito fim
meio texto negrito

Tópico 01
Tópico 02

Link Interno Arrow

Prefixo ~~R$8,99~~

R$9,99

Sufixo

Highlight Card

Título Card Full 02

Subtítulo Card

[FULL] lorem ipsum dolor sit.

inicio meio texto negrito;
inicio texto negrito fim;
texto negrito meio fim.

Tópico 01
Tópico 02

Link Externo Arrow

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Highlight Card

Título Card Full 03

Subtítulo Card

[FULL] lorem ipsum dolor sit.

meio fim;
inicio fim;
inicio meio

Tópico 01
Tópico 02

Link Anc CARD 7 Arrow

Modal ClickToCall Arrow

Prefixo

R$999,99

Sufixo

Highlight Card

Título Card Full 04

Subtítulo Card

[FULL] lorem ipsum dolor sit.

inicio meio
inicio fim;
meio fim.

Tópico 01
Tópico 02

Link Interno Arrow

~~Dê R$ 10.999,99~~

R$9.999,99

Sufixo

Highlight Card

Título Card Full 05

Subtítulo Card

[FULL] lorem ipsum dolor sit.

meio texto negrito;
inicio e texto negrito fim;
texto negrito meio

Tópico 01
Tópico 02

Link Externo Arrow

Prefixo

R$99.999,99

Sufixo

Highlight Card

Título Card Full 06

Subtítulo Card

[FULL] lorem ipsum dolor sit.

texto negrito meio
inicio texto negrito e e fim;
meio texto negrito.

Tópico 01
Tópico 02

Link Anc CARD 7 Arrow

Prefixo ~~R$8,99~~

R$9,99

Sufixo

Highlight Card

Título Card Full 07

Subtítulo Card

[FULL] lorem ipsum dolor sit.

início meio
início fim;
meio fim.

Tópico 01
Tópico 02

Link Interno Arrow

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Modal ClickToCall PRI

Highlight Card

Título Card Full 08

Subtítulo Card

[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora

Tópico 01
Tópico 02

Link Externo Arrow

Prefixo

R$999,99

Sufixo

Highlight Card

Título Card Full 09

Subtítulo Card

[FULL] lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora

Tópico 01
Tópico 02

Link Anc CARD 7 Arrow

~~Dê R$ 10.999,99~~

R$9.999,99

Sufixo

Rodapé 10 - ID Link âncora: CARD-ANCORA-10

Título Card 11

Subtítulo Card 11 - Layout default - Teste swiper mobile - 1 card

Título Card 64

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 5 Arrow

Rodapé 11 - ID Link âncora: CARD-ANCORA-11

Título Card 12

Subtítulo Card 12 - Layout inverse - Teste swiper desktop - 4 cards

Título Card 46

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Modal ClickToCall Arrow

Título Card 47

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Anc CARD 7 Arrow

Título Card 49

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Link Interno Arrow

Título Card 50

lorem ipsum dolor sit amet consectetur adipiscing elit luctus faucibus vehicula litora taciti sem ante morbi tristique viverra diam

Rodapé 12 - ID Link âncora: CARD-ANCORA-12

Título Card 13

Subtítulo Card 13 - Layout Default - Card com vídeo

Highlight Card

Título Card Full

Subtítulo Card

[FULL] lorem ipsum dolor sit.

texto negrito meio
inicio texto negrito fim
meio texto negrito

Tópico 01
Tópico 02

Link Interno Arrow

Dê ~~R$ 129,99~~

R$99,99

Sufixo

Claro e beOn no South summit brazil 2024

A Claro é patrocinadora do South Summit Brazil 2024, que ocorrerá em Porto Alegre de 20 a 22 de março, com expectativa de mais de 24 mil participantes. O evento contará com 600 palestrantes, 1.000 investidores e uma competição entre 2.000 startups.

Link Ext VEN

Card com vídeo sem capa

Claro brazil 2024

A Claro é patrocinadora das startups.

Link Int PRI

Rodapé

Componente Card

Como criar o Componente Card

Tutorial

Vídeo com tutorial para criar o componente Card

Título Card 1

Subtítulo Card 1 - Layout default

Título Card Full 01

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 02

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 03

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 04

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 05

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 06

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 07

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 08

Subtítulo Card

Tópico 01

Tópico 02

Título Card Full 09

Subtítulo Card

Tópico 01

Tópico 02

Título Card 2

Subtítulo Card 2 - Layout default

Título Card 10

Título Card 11

Título Card 12

Título Card 13

Título Card 14

Título Card 15

Título Card 16

Título Card 17

Título Card 18

Título Card 3

Subtítulo Card 3 - Layout default

Título Card 19

Título Card 20

Título Card 21

Título Card 22

Título Card 23

Título Card 24

Título Card 25

Título Card 26

Título Card 27

Título Card 4

Subtítulo Card 4 - Layout default

Título Card 28

Título Card 29

Título Card 30

Título Card 31

Título Card 32

Título Card 33

Título Card 34

Título Card 35

Título Card 36

Título Card 5

Subtítulo Card 5 - Layout default

Título Card 6

Subtítulo Card 6 - Layout inverso

Título Card 46