About
O About apresenta quem está por trás do negócio. Ele tem duas formas:
media-right-numbers,media-left-numbers: texto e foto lado a lado, com uma faixa de números embaixo. A foto fica à direita ou à esquerda; no celular, a foto da esquerda aparece primeiro.story: só texto, com a história, os números, os valores e os marcos da empresa. Cada lista se organiza em colunas que não deixam um item sozinho na última linha: 5 valores viram 3 + 2, 7 viram 4 + 3.
Os valores são um título curto e uma frase; os marcos têm um ano, que pode ser um intervalo como 2016-2019.
About
Pasta: ui/sections/about
Variantes
| Id | Variante | Tom |
|---|---|---|
about-media-right-numbers-light | media-right-numbers | light |
about-media-right-numbers-gray | media-right-numbers | gray |
about-media-right-numbers-dark | media-right-numbers | dark |
about-media-right-numbers-accent | media-right-numbers | accent |
about-media-left-numbers-gray | media-left-numbers | gray |
about-story-gray | story | gray |
about-story-4-values-gray | story | gray |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
variant | "media-left-numbers" | "media-right-numbers" | "story" | Não | — |
image | UiImage | Não | — |
title | string | Sim | — |
paragraphs | readonly string[] | Sim | — |
numbers | readonly AboutNumber[] | Sim | — |
tone | Tone | Não | — |
density | Density | Não | — |
width | Width | Não | — |
id | string | Não | — |
values | readonly AboutValue[] | Não | — |
milestones | readonly AboutMilestone[] | Não | — |
Onde aparece nos templates
Seção intitulada “Onde aparece nos templates”media-left-numbers:templates/one-page/files/src/data/content.ts:53, na seçãoaboutda página única.- Variante
story:templates/multi-page/files/src/data/pages/about.ts:24, usada emtemplates/multi-page/files/src/pages/about.ts:22.
Captura da primeira variante do catálogo (media-right-numbers, tom claro, em 1280 px):
A mesma variante em 360 px:
