Hero de página: vídeo e destaques

Nome técnico: getquick/page-hero-media-grid

Use este bloco no topo de uma página para combinar uma imagem de fundo, duas chamadas editoriais e um vídeo em destaque.

Bloco Nomia

Hero de página: vídeo e destaques

Exemplo visual aproximado do bloco como aparece no frontend Nomia.

Como usar

Escolha uma imagem de fundo e preencha o respetivo texto alternativo.
Preencha os títulos, textos e ligações das duas chamadas.
Se adicionar vídeo, confirme a origem, a imagem de capa e o título acessível.
O alinhamento, as cores e os raios disponíveis correspondem apenas às opções suportadas pelo frontend.

Campos principais

backgroundImageId, backgroundImageSrc, backgroundImageAlt
firstTitle, firstText, firstHref
secondTitle, secondText, secondHref
videoId, videoSrc, videoPosterId, videoPosterSrc, videoTitle
textVerticalAlign: top ou bottom
Controlos visuais: cores, firstBorderRadius, secondBorderRadius e videoBorderRadius.
shareHref e shareLabel para a ligação de partilha do vídeo.

As chaves *Id acompanham os respetivos URLs para permitir a seleção de media no editor. O frontend valida e limita os valores visuais; não introduza CSS arbitrário. O bloco não é renderizado enquanto não existir imagem de fundo, uma chamada com título ou vídeo.

Exemplo de conteúdo

{
  "schemaVersion": 1,
  "blockId": "page-hero-media-grid",
  "backgroundImageSrc": "/uploads/hero.jpg",
  "backgroundImageAlt": "Paisagem junto a uma cidade",
  "firstTitle": "Explorar",
  "firstText": "Consulte recursos e iniciativas.",
  "firstHref": "/biblioteca/",
  "secondTitle": "Participar",
  "secondText": "Descubra oportunidades.",
  "secondHref": "/oportunidades/",
  "videoSrc": "https://cdn.example.test/nomia-intro.mp4",
  "videoTitle": "Apresentação Nomia"
}

Antes de publicar

Pré-visualize o hero em ecrãs largos e estreitos.
Confirme que imagens, vídeo, títulos e ligações estão completos.