Skip to main content
O componente SectionTextButton2Banners combina um bloco de texto (título + descrição + botão CTA) com um ou dois banners de imagem. A posição do texto em relação aos banners e o alinhamento interno são configuráveis.

​
Uso

<section-text-button2-banners
  :number-banner="2"
  :resource-ids="{{ section.bannerIds | json_encode }}"
  text-align="left"
  title-text="Novidades da temporada"
  description-text="Confira as últimas coleções com até 30% de desconto."
  text-position="left"
  button-style="primary"
  :button-switch="true"
  text-in-button="Ver coleção"
  link-in-button="/colecao/novidades"
/>

​
Propriedades

PropriedadeTipoObrigatóriaDescrição
numberBannerNumber✅Quantidade de banners exibidos na seção. Valores: 1 ou 2.
resourceIdsArray✅Lista de IDs dos banners a serem carregados via API.
textAlignString✅Alinhamento do bloco de texto. Valores: 'left', 'center' ou 'right'.
titleTextString✅Texto do título principal da seção.
descriptionTextString✅Texto de descrição exibido abaixo do título.
textPositionString✅Posição do bloco de texto em relação aos banners. Valores: 'left' ou 'right'.
buttonStyleString✅Estilo visual do botão. Valores: 'primary' ou 'secondary'.
buttonSwitchBoolean✅Quando true, exibe o botão de CTA. Quando false, oculta.
textInButtonString✅Texto exibido dentro do botão.
linkInButtonString✅URL de destino ao clicar no botão.

​
Mixins utilizados

MixinFinalidade
mobileMixinReorganiza o layout do bloco de texto e banners em dispositivos móveis.