Componente Card Horizontal

Componente Card Horizontal aceita os itens abaixo:

 - Ícone

 - Imagem: G (570 x 380), M (456 x 304) ou P (319 x 213).

 - Highlight

 - Título

 - Subtítulo

 - Texto

 - Tópico Horizontal

 - Link Arrow

 - Preço

 - Botão

 - Layout da Imagem
1 - Quando usamos imagem o componente é renderizado tanto na esquerda quanto na direita
2 - Quando NÃO usamos imagem, o texto pode ser alinhado a esquerda e centro e ainda podemos selecionar o layout secondary (preto) e inverse.
Obs: Todas estas configurações estão no menu "Opções" da página onde o seu card será inserido.

 - Layout do Video - O vídeo será exibido apenas no componente Card Horizontal

1 - O componente aceita videos do Claro TV+ e vídeos do Youtube (Inserir o ID do video no cadastro)
2 - Quando cadastrarmos imagem e vídeo, a imagem sempre irá sobrepor o vídeo
3 - O Componente video é renderizado no Card Horizontal somente à esquerda e/ou à direita
4 - O video somente é renderizado quando usamos LAYOUT DEFAULT (padrão)
5 - O video não é renderizado quando os layouts usados forem INVERSE (vermelho) ou SECONDARY (preto)
6 - O link para o vídeo deve ser cadastrado conforme regras de negócio que estão em nosso manual "" 

 

 

Navegar em: Conteúdo>Conteúdos Compartilhados>Cards>Itens>+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

3 - Se PF ou PJ, tudo minúsculo e separados por hífen: 

Ex: item-card-horizontal-home-produtos-fone-fixo-pf.

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.

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 Horizontal" criado anteriormente;

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

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

6- Isso ira exibir uma lista com os itens de Card Horizontal. Clique no Card Horizontal 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"