Style Guide | Ancestralidades
Arte e Cultura
Componentes e estilos recomendados
{"baseBlockId":1791305499942,"height":"16px"}
Neste post, apresentamos os componentes disponíveis no Raro com os estilos e configurações visuais recomendados. A página funciona como uma referência visual dos componentes, enquanto as orientações de uso, propriedades e configurações estão disponíveis na documentação completa
{"baseBlockId":1791304465667,"height":"40px"}
Documento de orientações e boas práticas
Consulte a documentação completa para conhecer as orientações de uso, configurações e recomendações de cada componente e manter os posts consistentes e alinhados à identidade do site.
{"baseBlockId":1791304197804,"button_type":"normal","button_size":"medium","border_type":"rounded-pill","title":"Acessar documentação →","url":"https://docs.google.com/document/d/1DzOxZobR2bnAdR8JLXG_RdB0TqV1y9qnxpxTd4R-EkY/edit?usp=sharing","open_in":"blank","background_color":"#ffcc00","color":"#191919"}
Acessar documentação →
{"baseBlockId":1790119744681,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119773781,"height":"16px"}
Hierarquia de títulos
{"baseBlockId":1790119200748,"height":"72px"}
Cabeçalho 2:
Exemplo de cabeçalho 2
{"baseBlockId":1790119333871,"height":"24px"}
Cabeçalho 3:
Documento
{"baseBlockId":1790119744681,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Texto e estilos de formatação
{"baseBlockId":1790119946899,"height":"48px"}
Texto padrão
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{"baseBlockId":1790119985119,"height":"24px"}
Texto em bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{"baseBlockId":1790120023035,"height":"24px"}
Texto em itálico
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{"baseBlockId":1790120038641,"height":"24px"}
Texto com marcador
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{"baseBlockId":1790120052843,"height":"24px"}
Texto com hiperlink
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{"baseBlockId":1790119783613,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Texto em colunas
{"baseBlockId":1790121203312,"height":"48px"}
1 Coluna [100%]
Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum! Est iusto quisquam et quibusdam velit ut assumenda facilis sed nulla perferendis ut harum corporis est enim ipsa cum recusandae quaerat.
2 colunas [50%/50%]
Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates.
Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates.
{"baseBlockId":1790121378509,"height":"24px"}
2 colunas [33%/67%]
Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero.
Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates.
{"baseBlockId":1790121378509,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Caixa expansível
{"baseBlockId":1790121203312,"height":"48px"}
Lorem ipsum dolor sit amet. Nam fugit totam et sapiente excepturi ad voluptas iusto qui amet maxime et quas sunt sit dolores possimus nam autem molestiae. In omnis perferendis et consequatur enim non corporis autem.
Lorem ipsum dolor sit amet. Nam fugit totam et sapiente excepturi ad voluptas iusto qui amet maxime et quas sunt sit dolores possimus nam autem molestiae. In omnis perferendis et consequatur enim non corporis autem.
Vel molestiae velit quo nulla pariatur aut tempora nemo qui perspiciatis delectus. Ut soluta exercitationem et aperiam quod in adipisci sint in neque culpa eum dicta incidunt aut sapiente ipsum ea quia Quis.
Est earum sequi id quis inventore aut obcaecati aperiam. Hic harum illum non culpa quod sit consequatur placeat et dolorem voluptatem qui consequatur nulla.
Lorem ipsum dolor sit amet. Nam fugit totam et sapiente excepturi ad voluptas iusto qui amet maxime et quas sunt sit dolores possimus nam autem molestiae. In omnis perferendis et consequatur enim non corporis autem.
Vel molestiae velit quo nulla pariatur aut tempora nemo qui perspiciatis delectus. Ut soluta exercitationem et aperiam quod in adipisci sint in neque culpa eum dicta incidunt aut sapiente ipsum ea quia Quis.
{"baseBlockId":1790121974390,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Acordeon
{"baseBlockId":1790121203312,"height":"48px"}
{"items":[{"id":"accordion-item-1790122333284-0","title":"Título Lorem ipsum","opened":"0"},{"id":"accordion-item-1790122333284-1","title":"Título nulla vitae mattis velit","opened":"0"},{"id":"accordion-item-1790122333284-2","title":"Título etiam venenatis elit sed ","opened":"0"}],"baseBlockId":1790122333284}
Contribui para a valorização da cultura no Brasil, com atuação voltada para a pesquisa, a produção de conteúdo, o mapeamento, o incentivo e a difusão de manifestações artístico-intelectuais.
Atua na melhoria da aprendizagem e trajetória escolar, reduzindo desigualdades por raça/cor, gênero, deficiência e nível socioeconômico, com foco na Educação Infantil e Anos Finais do Ensino Fundamental.
Apoia e incentiva a implementação de políticas de educação profissional e tecnológica com foco na ampliação do número de vagas, melhoria da qualidade da oferta e inclusão dos jovens no mundo do trabalho.
{"baseBlockId":1790123464535,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Lista
{"baseBlockId":1790121203312,"height":"48px"}
- Tópico um
- Tópico dois
- Tópico três
- Tópico quatro
- Tópico cinco
{"baseBlockId":1790123622200,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Lista com filtro
{"baseBlockId":1790121203312,"height":"48px"}
{"baseBlockId":1790123931250,"title":"Estados selecionados no Edital","content":"Confira abaixo a lista completa","list":"Acre (AC)\nAmapá (AP)\nBahia (BA)\nEspírito Santo (ES)\nGoiás (GO)\nMato Grosso (MT)\nMinas Gerais (MG)\nPará (PA)\nParaíba (PB)\nParaná (PR)\nPiauí (PI)\nRio de Janeiro (RJ)\nRio Grande do Norte (RN)\nRondônia (RO)\nRoraima (RR)\nSão Paulo (SP)\nSergipe (SE)\nTocantins (TO)","btn_success_text":"Encontrei meu estado","btn_success_link":"https://www.ancestralidades.org.br/home","btn_success_open_in":"blank","btn_fail_text":"Não encontrei meu estado","btn_fail_link":"https://www.ancestralidades.org.br/home","btn_fail_open_in":"blank"}
Confira abaixo a lista completa
- Acre (AC)
- Amapá (AP)
- Bahia (BA)
- Espírito Santo (ES)
- Goiás (GO)
- Mato Grosso (MT)
- Minas Gerais (MG)
- Pará (PA)
- Paraíba (PB)
- Paraná (PR)
- Piauí (PI)
- Rio de Janeiro (RJ)
- Rio Grande do Norte (RN)
- Rondônia (RO)
- Roraima (RR)
- São Paulo (SP)
- Sergipe (SE)
- Tocantins (TO)
Nenhum resultado encontrado.
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Programação
{"baseBlockId":1790121203312,"height":"48px"}
{"items":[{"id":"schedule-list-item-1769607187548-0","title":"Mesa 1","date":"Segunda-feira, 26/01, às 15:00"},{"id":"schedule-list-item-1769607187548-1","title":"Mesa 2","date":"Segunda-feira, 26/01, às 17:00"}],"baseBlockId":1769607187548}
-
Segunda-feira, 26/01, às 15:00Mesa 1
A mesa será mediada por João Santos e terá os seguintes convidados: Maria Aparecida, Marcelo Martins e Rosana Abreu.
-
Segunda-feira, 26/01, às 17:00Mesa 2
A mesa será mediada por Marcela Jorge e terá os seguintes convidados: José Silva, Mariana Costa e Ricardo Augusto.
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Linha divisória
{"baseBlockId":1790121203312,"height":"72px"}
Versão cor neutra (R 218 G 213 B 202)
{"baseBlockId":1790124973109,"align":"center","color":"#dad5ca","opacity":"100","width":"100%","height":"2px"}
{"baseBlockId":1790123673004,"height":"40px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Entrevista
{"items":[{"id":"interview-item-1790125895715-0","item_type":"question","show_initials":"1"},{"id":"interview-item-1790125895715-1","item_type":"response","show_initials":"0"},{"id":"interview-item-1790125895715-2","item_type":"question","show_initials":"0"},{"id":"interview-item-1790125895715-3","item_type":"response","show_initials":"0"}],"baseBlockId":1790125895715,"interviewed_initials":"MC","interviewer_initials":"AN"}
AN
Ancestralidades: Um ponto que vem à tona no debate socioambiental passa pela projeção sempre futura para os impactos das mudanças climáticas. Como mudar a perspectiva dos efeitos que sofremos hoje evidencia que transformações na nossa relação com o meio ambiente precisam ser colocadas em prática agora?
MC
Maryellen Crisóstomo: Precisamos pensar no hoje, pois os impactos, a violação e a violência contra determinados grupos, povos e comunidades tradicionais estão acontecendo agora. Então, se pensarmos em transição energética e mudança climática no futuro, chegaremos lá sem muita gente, pois pessoas estão sendo impactadas agora - e morrerão. Logo, não haverá futuro para elas.
AN
Por que é fundamental falarmos sobre combate às mudanças climáticas, com foco nas dimensões territorial, racial e de gênero, para pensar em novas perguntas, soluções e respostas, para fugirmos do modelo que nos trouxe até aqui?
MC
Precisamos olhar o contexto histórico em que estamos envolvidos, pois nos adaptamos e criamos alternativas de modos de vida diferentes do que era posto como socialmente evoluído e tecnológico. Quando a população negra sai do contexto de escravidão e constitui os quilombos, ali se criam modos alternativos de vida com dinâmica própria, organização econômica e de segurança próprias. Estamos nesse território circularmente e essa é a prova de que temos condições de promover adaptação e de contribuir com os processos de mitigação.
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Citação
"Precisamos falar da estrutura. Olhando especificamente para o Brasil, a estrutura social tem três pilares: racismo, patrimonialismo e patriarcalismo. Isso não é sobre povos e comunidades tradicionais, mas a respeito de estruturas consagradas para garantir exclusão e segregação."
Maryellen Crisóstomo
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Botão
{"baseBlockId":1790203521148,"height":"40px"}
Botão primário
{"baseBlockId":1790203521148,"height":"24px"}
{"baseBlockId":1790202028700,"has_gap":"1","num_columns":2,"column_widths":[50,50],"column_valigns":["top","top"],"column_bg_colors":[null,null]}
Opção amarela
{"baseBlockId":1790199973321,"button_type":"normal","button_size":"medium","border_type":"rounded-pill","title":"Botão normal M borda pílula","url":"https://www.ancestralidades.org.br/home","open_in":"blank","background_color":"#ffcc00","color":"#191919"}
Botão normal M borda pílula Opção preta
{"baseBlockId":1790199973321,"button_type":"normal","button_size":"medium","border_type":"rounded-pill","title":"Botão normal M borda pílula","url":"https://www.ancestralidades.org.br/home","open_in":"blank","background_color":"#191919","color":"#ffffff"}
Botão normal M borda pílula {"baseBlockId":1790203947168,"height":"56px"}
Botão secundário
{"baseBlockId":1790203957963,"button_type":"blank","button_size":"medium","border_type":"rounded-pill","title":"Botão em branco M borda pílula","url":"https://www.ancestralidades.org.br/home","open_in":"blank","background_color":"#ccc3b2","color":"#191919"}
Botão em branco M borda pílula {"baseBlockId":1790204425269,"height":"8px"}
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
Link Especial
{"url":"https://ancestralidades.cafe.art.br/verbetes/biografias-e-trajetorias/style-guide","text":"Edital 2026 aberto do Programa Ancestralidades de Valorização à Pesquisa.","target":"_blank"}
Confira: Edital 2026 aberto do Programa Ancestralidades de Valorização à Pesquisa.
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
Outros arquivos
{"baseBlockId":1790901683307,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Link para post
{"baseBlockId":1790121203312,"height":"48px"}
{"baseBlockId":1790901683307,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Caixa colorida
{"baseBlockId":1790121203312,"height":"48px"}
Paleta de cor recomendada:
{"baseBlockId":1790207345094,"height":"16px"}
Caixa com fundo escuro
{"baseBlockId":1790207158529,"padding_horizontal":"5","padding_vertical":"5","background_color":"#191919","text_color":"#ffffff","border_width":"","border_style":"","border_color":"#000000","border_radius":"8px"}
Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.
{"baseBlockId":1790121203312,"height":"48px"}
Caixa com fundo neutro
{"baseBlockId":1790207158529,"padding_horizontal":"5","padding_vertical":"5","background_color":"#ccc3b2","text_color":"#191919","border_width":"","border_style":"","border_color":"#000000","border_radius":"8px"}
Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.
{"baseBlockId":1790121203312,"height":"48px"}
Caixa com fundo amarelo
{"baseBlockId":1790207158529,"padding_horizontal":"5","padding_vertical":"5","background_color":"#ffcc00","text_color":"#191919","border_width":"","border_style":"","border_color":"#000000","border_radius":"8px"}
Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Flipcard
{"baseBlockId":1790121203312,"height":"48px"}
Versão com cor de fundo
{"baseBlockId":1790284052274,"height":"48px"}
Exemplo 1
Opção com fundo escuro
{"baseBlockId":1790208434571,"background_type":"color","flip_type":"hover","flip_size":"small","border_type":"rounded-2","frontcard_text_color":"#ffffff","frontcard_color":"#191919","frontcard_image":"","frontcard_text_style":"center_large","frontcard_text":"Vira quando passa o mouse, tamanho pequeno, borda pequena, estilo de texto centralizado grande, fundo com cor, sem sombra","shadow":"0","height":"280px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Configurações do verso do card: recomendado usar sempre a cor neutra clara, link adicionado no campo URL, abre em outra janela. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed. ","backcard_url":"https://www.ancestralidades.org.br/home","backcard_url_open_in":"blank"}
Vira quando passa o mouse, tamanho pequeno, borda pequena, estilo de texto centralizado grande, fundo com cor, sem sombra
+
{"baseBlockId":1790210873029,"height":"48px"}
Exemplo 2:
Opção com fundo neutro
{"baseBlockId":1790208434571,"background_type":"color","flip_type":"hover","flip_size":"small","border_type":"rounded-2","frontcard_text_color":"#191919","frontcard_color":"#ccc3b2","frontcard_image":"","frontcard_text_style":"center_medium","frontcard_text":"Vira quando passa o mouse, tamanho pequeno, borda pequena, estilo de texto centralizado médio, fundo com cor, sem sombra","shadow":"0","height":"280px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Configurações do verso do card: recomendado usar sempre a cor neutra clara, campo URL não preenchido. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed. ","backcard_url":"","backcard_url_open_in":"blank"}
Vira quando passa o mouse, tamanho pequeno, borda pequena, estilo de texto centralizado médio, fundo com cor, sem sombra
+
Configurações do verso do card: recomendado usar sempre a cor neutra clara, campo URL não preenchido. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed.
x
{"baseBlockId":1790210873029,"height":"48px"}
Exemplo 3:
Opção com fundo amarelo
{"baseBlockId":1790208434571,"background_type":"color","flip_type":"hover","flip_size":"medium","border_type":"rounded-2","frontcard_text_color":"#191919","frontcard_color":"#ffcc00","frontcard_image":"","frontcard_text_style":"center_large","frontcard_text":"Vira quando passa o mouse, tamanho médio, borda pequena, estilo de texto centralizado grande, fundo com cor, sem sombra","shadow":"0","height":"280px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Configurações do verso do card: recomendado usar sempre a cor neutra clara, link adicionado no campo URL, abre na mesma janela. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed. ","backcard_url":"https://www.ancestralidades.org.br/home","backcard_url_open_in":"self"}
Vira quando passa o mouse, tamanho médio, borda pequena, estilo de texto centralizado grande, fundo com cor, sem sombra
+
{"baseBlockId":1790210873029,"height":"48px"}
Exemplo 4
Exemplo de cards em 2 colunas
{"baseBlockId":1790902235939,"has_gap":"1","num_columns":2,"column_widths":[50,50],"column_valigns":["top","top"],"column_bg_colors":[null,null]}
{"baseBlockId":1790902246959,"background_type":"color","flip_type":"click","flip_size":"medium","border_type":"rounded-2","frontcard_text_color":"#ffffff","frontcard_color":"#191919","frontcard_image":"","frontcard_text_style":"center_medium","frontcard_text":"Vira no clique, tamanho médio, borda pequena, estilo de texto centralizado pequeno, fundo com cor, sem sombra","shadow":"0","height":"280px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.","backcard_url":"","backcard_url_open_in":"blank"}
Vira no clique, tamanho médio, borda pequena, estilo de texto centralizado pequeno, fundo com cor, sem sombra
+
Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.
x
{"baseBlockId":1790902421583,"background_type":"color","flip_type":"click","flip_size":"medium","border_type":"rounded-2","frontcard_text_color":"#191919","frontcard_color":"#ccc3b2","frontcard_image":"","frontcard_text_style":"center_medium","frontcard_text":"Vira no clique, tamanho médio, borda pequena, estilo de texto centralizado pequeno, fundo com cor, sem sombra","shadow":"0","height":"280px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.","backcard_url":"","backcard_url_open_in":"blank"}
Vira no clique, tamanho médio, borda pequena, estilo de texto centralizado pequeno, fundo com cor, sem sombra
+
Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed assumenda voluptates et laboriosam galisum.
x
{"baseBlockId":1790210873029,"height":"48px"}
Versão com imagem de fundo
{"baseBlockId":1790284052274,"height":"64px"}
Exemplo 1
Teste com imagem escura
{"baseBlockId":1790208434571,"background_type":"image","flip_type":"hover","flip_size":"large","border_type":"rounded-2","frontcard_text_color":"#ffffff","frontcard_color":"#191919","frontcard_image":"https://qa.s3.fi-editor-observatorio.caiena.app/qa.editor.fi-editor-observatorio.caiena.app/public/image/3489/file/thumb_lg-634a96066ab6a859d24f559174b3a7f2.png","frontcard_text_style":"normal","frontcard_text":"Vira quando passa o mouse, tamanho grande, borda pequena, estilo de texto normal, imagem de fundo, com sombra","shadow":"1","height":"280px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Configurações do verso do card: recomendado usar sempre a cor neutra clara, link adicionado no campo URL, abre em outra janela. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed. ","backcard_url":"https://www.ancestralidades.org.br/home","backcard_url_open_in":"blank"}
Vira quando passa o mouse, tamanho grande, borda pequena, estilo de texto normal, imagem de fundo, com sombra
+
{"baseBlockId":1790210873029,"height":"48px"}
Exemplo 2:
Teste com imagem clara
{"baseBlockId":1790208434571,"background_type":"image","flip_type":"hover","flip_size":"custom","border_type":"rounded-2","frontcard_text_color":"#ffffff","frontcard_color":"#ffcc00","frontcard_image":"https://qa.s3.fi-editor-observatorio.caiena.app/qa.editor.fi-editor-observatorio.caiena.app/public/image/3471/file/thumb_lg-4ff71500bd260c353ed573de4692b6bb.png","frontcard_text_style":"normal","frontcard_text":"Vira quando passa o mouse, tamanho definido em 400px, borda pequena, estilo de texto normal, imagem de fundo, com sombra","shadow":"1","height":"400px","backcard_text_color":"#191919","backcard_color":"#ebe9e4","backcard_text_style":"normal","backcard_text":"Configurações do verso do card: recomendado usar sempre a cor neutra clara, campo URL não preenchido. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed. ","backcard_url":"","backcard_url_open_in":"self"}
Vira quando passa o mouse, tamanho definido em 400px, borda pequena, estilo de texto normal, imagem de fundo, com sombra
+
Configurações do verso do card: recomendado usar sempre a cor neutra clara, campo URL não preenchido. Lorem ipsum dolor sit amet. Sed quia expedita et omnis culpa sit facere blanditiis et impedit placeat. Aut vero beatae qui numquam fuga aut perferendis doloremque sed.
x
{"baseBlockId":1790210873029,"height":"48px"}
{"baseBlockId":1790119200748,"height":"16px"}
Iframe
{"baseBlockId":1790121203312,"height":"48px"}
{"url":"https://www.itaucultural.org.br/agenda"}
{"baseBlockId":1790123673004,"height":"24px"}
Big numbers
{"baseBlockId":1790899347078,"height":"56px"}
1 coluna
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790900320202,"height":"56px"}
{"baseBlockId":1790898891927,"cols_count":"1"}
4/10 brasileiros
nunca realizaram atividades culturais presencialmente no próprio bairro ou em bairros próximos de onde residem
{"baseBlockId":1790900428770,"height":"24px"}
2 colunas
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790900329358,"height":"56px"}
{"baseBlockId":1790898927387,"cols_count":"2"}
72% dos brasileiros
afirmam que participariam de mais atividades artísticas se elas acontecessem mais vezes nas escolas do bairroApenas
41% da população
nascida entre 2000 e 2005 concluiu o ensino médio na idade esperada
{"baseBlockId":1790900441578,"height":"16px"}
3 colunas
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790900376735,"height":"56px"}
{"baseBlockId":1790898974075,"cols_count":"3"}
O equivalente a
4 anos
a mais na escola é o que crianças mais ricas aprendem, se comparado a crianças mais pobres9,8 milhões
de jovens brasileiros de 15 a 29 anos deixaram de frequentar a escola sem concluir a educação básica6,7 milhões
de brasileiros deixaram de ser leitores nos últimos quatro anos
{"baseBlockId":1790900670538,"height":"24px"}
{"baseBlockId":1790297180699,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
Imagens
{"baseBlockId":1790121203312,"height":"48px"}
{"baseBlockId":1790296959345,"height":"48px"}
Texto com imagem à esquerda
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790297832110,"height":"40px"}
{"baseBlockId":1788974837676,"has_gap":"1","num_columns":2,"column_widths":[50,50],"column_valigns":["top","top"],"column_bg_colors":[null,null]}
Lorem ipsum dolor sit amet. Nam fugit totam et sapiente excepturi ad voluptas iusto qui amet maxime et quas sunt sit dolores possimus nam autem molestiae. In omnis perferendis et consequatur enim non corporis autem.
Est earum sequi id quis inventore aut obcaecati aperiam. Hic harum illum non culpa quod sit consequatur placeat et dolorem voluptatem qui consequatur nulla. Vel molestiae velit quo nulla pariatur aut tempora nemo qui perspiciatis delectus.
Lorem ipsum dolor sit amet. Nam fugit totam et sapiente excepturi ad voluptas iusto qui amet maxime.
ㅤ
{"baseBlockId":1790296972374,"height":"48px"}
Texto com imagem à direita
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790297180699,"height":"40px"}
Lorem ipsum dolor sit amet. Nam fugit totam et sapiente excepturi ad voluptas iusto qui amet maxime et quas sunt sit dolores possimus nam autem molestiae. In omnis perferendis et consequatur enim non corporis autem.
Est earum sequi id quis inventore aut obcaecati aperiam. Hic harum illum non culpa quod sit consequatur placeat et dolorem voluptatem qui consequatur nulla.
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Galeria
{"baseBlockId":1790121203312,"height":"48px"}
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Vídeo
{"baseBlockId":1790123673004,"height":"24px"}
{"baseBlockId":1790118099068,"align":"center","color":"#d6d6d6","opacity":"100","width":"100%","height":"1px"}
{"baseBlockId":1790119200748,"height":"16px"}
Âncora
{"baseBlockId":1790121203312,"height":"48px"}
Opção 1
Botão com texto + "ícone" (usando caractere especial: ↑)
{"baseBlockId":1790704715513,"button_type":"blank","button_size":"medium","border_type":"rounded-pill","title":"Voltar ao início ↑","url":"#início","open_in":"self","background_color":"#ec7000","color":"#ffffff"}
Voltar ao início ↑
Opção 2
Botão somente com "ícone" (usando caractere especial: ↑)
{"baseBlockId":1790704715513,"button_type":"blank","button_size":"medium","border_type":"rounded-circle","title":"↑","url":"#início","open_in":"self","background_color":"#ec7000","color":"#ffffff"}
↑ {"baseBlockId":1790123673004,"height":"24px"}
ver todos
