Componente Acordeon

• 1 - Regras de Negócio do Componente Accordion

  Componente Accordion permite inserir:
  1 - Ícone no Título da aba do acordeon

  2 - Título que é o Título da aba

  3 - Texto rico, permitindo hiperLink: Interno ou Externo, abertura na mesma aba ou nova aba,clicando no ícone demonstrado como uma corrente!
  4 - Título e Texto são campos obrigatórios para o componente renderizar corretamente na página.
  5 - Componente Acordeon aceita HTML5 no campo texto.
  6 - Pode inserir o acordeon no componente card de vendas.

• 2 - Criando o Item para o Componente Accordion

  Navegar em: Conteúdo>Conteúdos Compartilhados>Accordion>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-componente-accordion-home-internet-fixal-pf.

  4 - Preencher os campos obrigatórios como "Título" e "Texto">Salvar>Publicar
  
  

  Passo a passo para criar o Accordion Item preenchendo os campos abaixo:
  - Ícone (Buscar ícone Mondrian)

  - Título:

  - Texto (Negrito, Hiperlink, Lista númerica, Lista de Bullets, Limpar formatação ou inserir código html no texto)

• 3 - Criando a lista para o componente Accordion

  Navegar em: Conteúdo>Conteúdos Compartilhados>Accordion>Listas>+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: lista-componente-accordion-home-fixa-pj.>Salvar
  4 - Inserir do lado direito da tela no campo "Accordion Item", usando o campo para a busca, os itens criados anteriormente que farão parte do seu accordion>Salvar>Publicar

   

• 4 - Adicionando o componente Accordion na página

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

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

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

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

Rodapé 1 - ID Link âncora: ACCORDEON-ANCORA-01 link =>

• Accordion 01 - Somente texto

  Accordion 01 - Somente texto: Mussum Ipsum, cacilds vidis litro abertis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.

• Accordion 02 - Texto com fonte em NEGRITO

  Accordion 02 - Texto com fonte em NEGRITO

  Mussum Ipsum, cacilds vidis litro abertis. Manduma pindureta quium dia nois paga.

• Accordion 03 - Texto com HIPERLINK e MODAL BLANK

  Accordion 03 - Texto com HIPERLINK e HIPERLINK MODAL BLANK: Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss deixa as pessoas mais interessantis.Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.Mais vale um bebadis conhecidiss,  que um alcoolatra anonimis.Sapien in monti palavris qui num significa nadis i pareci latim.
  
  

  1.  meio do texto e fim do texto
  2. Inicio do texto, e fim do texto
  3. Inicio do texto, meio do texto e

  
  

  • Inicio do texto, meio do texto e
  • Inicio do texto,  e fim do texto
  •  meio do texto e fim do texto

• Accordion 04 - Texto com NEGRITO, HIPERLINK, HIPERLINK ANCORA e MODAL BLANK

  Accordion 04 - [FULL] Texto com fonte em NEGRITO, HIPERLINK, HIPERLINK ANCORA e MODAL BLANK: Mussum Ipsum, cacilds vidis litro abertis. Suco de cevadiss deixa as pessoas mais interessantis.Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio.Mais vale um bebadis conhecidiss, que um alcoolatra anonimis.  Sapien in monti palavris qui num significa nadis i pareci latim.
  
  

  • meio do texto e fim do texto
  • Inicio do texto, e fim do texto
  • Inicio do texto, meio do texto e

  
  

  1. Inicio do texto, meio do texto e 
  2. Inicio do texto, e fim do texto
  3. meio do texto e fim do texto

Rodapé 2 - ID Link âncora: ACCORDEON-ANCORA-02 link =>

• As melhores ofertas para sua casa e para seu celular {{internet.nome}}

  Conectividade com fibra, streamings onde quiser e bônus para apps no seu plano móvel.

   

  {{internet.nome}}

• Claro Multi: Fibra, Celular, TV & Streamings

  A combinação do Wi-Fi e 5G mais rápidos do Brasil com os melhores streamings, juntos em um único plano.

• Celulares e acessórios com frete grátis

  Ofertas de celulares, acessórios e eletrônicos com condições especiais em até 21x.

• Bora fazer sua empresa vender mais

  A Claro empresas tem as melhores e mais completas soluções para o seu negócio.

• Autoatendimento

  Resolva você mesmo no Minha Claro! Confira as principais soluções do autoatendimento.

• Sem ícone - Telefones das Centrais de Atendimento Claro

  Produtos Claro na Sua Residência

  Banda Larga, TV, Telefone Fixo e Claro Multi - Central de Atendimento: 10621

  TV via Satélite e Internet via satélite - Central de Atendimento: 10699

  Produtos Claro no seu Celular

  Celular (Pré Pago, Controle e Pós Pago) e Internet Móvel - Central de Atendimento: 1052

  Atendimento Claro no Exterior - +55 11 99199-5555

  Produtos PME (Pequenas e Médias Empresas)

  PME Residencial - Banda Larga, TV, Telefone Fixo e Claro Multi - Central de Atendimento: 10621

  PME Residencial - TV via Satélite e Internet via Satélite - Central de Atendimento: 10699

  PME Móvel - Celular (Pré Pago, Controle e Pós Pago) e Internet Móvel - Central de Atendimento: 1052

  Produto Grandes Empresas (Embratel)

  Todos os Produtos - Central de Atendimento: 0800 721 1021

  Produtos Longa Distância (LD21) - Central de Atendimento: 10321

  Ouvidoria Claro

  Todos os Produtos - Central de Atendimento: 0800 701 018

  Atendimento com acessibilidade

Rodapé 2