FeatureSplit
O FeatureSplit mostra um item com uma foto ao lado do texto. O bloco tem título, texto e imagem; a lista de pontos ou os números
ficam abaixo do texto.
Ela tem quatro variantes, duas de lista e duas de números. Em cada par, a imagem fica à esquerda ou à direita:
media-left-listemedia-right-list: uma lista de pontos (points).media-left-numbersemedia-right-numbers: números de destaque (numbers), com um link opcional (link) abaixo.
A imagem vem antes do texto no HTML, então no celular ela também aparece primeiro.
FeatureSplit
Pasta: ui/sections/feature-split
Variantes
| Id | Variante | Tom |
|---|---|---|
feature-split-media-left-list-light | media-left-list | light |
feature-split-media-left-list-gray | media-left-list | gray |
feature-split-media-left-list-dark | media-left-list | dark |
feature-split-media-left-list-accent | media-left-list | accent |
feature-split-media-right-list-gray | media-right-list | gray |
feature-split-media-left-numbers-gray | media-left-numbers | gray |
feature-split-media-right-numbers-gray | media-right-numbers | gray |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
variant | "media-left-list" | "media-right-list" | "media-left-numbers" | "media-right-numbers" | Não | — |
points | readonly string[] | Não | — |
eyebrow | string | Não | — |
title | string | Sim | — |
text | string | Sim | — |
image | UiImage | Sim | — |
tone | Tone | Não | — |
density | Density | Não | — |
width | Width | Não | — |
id | string | Não | — |
numbers | readonly FeatureSplitNumber[] | Não | — |
link | Cta | Não | Optional text link below the numbers. |
Onde aparece nos templates
Seção intitulada “Onde aparece nos templates”media-left-list:templates/landing-page/models/captura/files/src/data/content.ts:79etemplates/landing-page/models/lancamento/files/src/data/content.ts:74.media-left-numbers:templates/landing-page/models/produto/files/src/data/content.ts:74.media-right-list:templates/landing-page/models/produto/files/src/data/content.ts:87.media-right-numbers:templates/landing-page/models/lancamento/files/src/data/content.ts:83.- Sem
variant, o bloco usamedia-left-list, em tom cinza (ui/sections/feature-split/feature-split.ts:65):templates/multi-page/files/src/pages/service.ts:83(página de serviço) etemplates/multi-page/models/catalogo/files/src/pages/item.ts:105(página de item).
Captura da primeira variante do catálogo (media-left-list, tom claro, em 1280 px):
A mesma variante em 360 px:
