Sequência de Imagens com Legenda
Exibe imagens em sequência numerada com legendas explicativas. Ideal para tutoriais passo a passo, processos visuais e guias de instalação ou configuração.
Experimente
Como Dobrar um Tsuru de Origami
Dobre as diagonais
Com o papel colorido virado para baixo, dobre ao meio nas duas diagonais e desdobre — as marcas de vinco vão guiar o passo seguinte.
Monte a base preliminar
Usando os vincos já marcados, afunde o papel para dentro até ele se achatar sozinho num triângulo — essa é a base que sustenta o resto do modelo.
Dobre as bordas ao centro
Dobre as bordas laterais de cada lado em direção à linha central, formando uma pipa alongada — repita nos dois lados, frente e verso.
Puxe pescoço e cauda para cima
Segure a base e puxe as duas pontas finas para cima num ângulo — esse dobramento invertido cria o pescoço de um lado e a cauda do outro.
Dobre a cabeça
Na ponta do pescoço, faça um pequeno dobramento invertido para dentro, formando o bico — é o único dobramento em miniatura do modelo inteiro.
Abra as asas
Segure o corpo e puxe as duas asas para os lados opostos, achatando levemente a base — o tsuru está pronto para ficar em pé sozinho.
Código-fonte
Dados de exemplo
Cada passo tem número, imagem, título e descrição. Diferente do Carrossel, aqui todos os passos ficam visíveis ao mesmo tempo, em ordem — a sequência é obrigatória, não uma exploração livre.
| 1 |
<?php
|
| 2 |
$titulo = 'Como Amarrar o Cadarço com Laço Duplo';
|
| 3 |
$passos = [
|
| 4 |
['numero' => 1, 'imagem' => 'cadarco-cruzar.jpg', 'titulo' => 'Cruze as pontas', 'descricao' => 'Cruze as duas pontas do cadarço e passe uma por baixo da outra, formando o nó base — a mesma amarração usada antes de qualquer laço.'],
|
| 5 |
['numero' => 2, 'imagem' => 'cadarco-lacada.jpg', 'titulo' => 'Faça a primeira laçada', 'descricao' => 'Dobre uma das pontas sobre si mesma, formando uma alça (laçada). Segure a base dela com os dedos pra não desfazer no passo seguinte.'],
|
| 6 |
['numero' => 3, 'imagem' => 'cadarco-envolver.jpg', 'titulo' => 'Envolva com a outra ponta', 'descricao' => 'Leve a segunda ponta ao redor da laçada já formada e empurre-a por baixo, criando uma segunda alça do outro lado.'],
|
| 7 |
['numero' => 4, 'imagem' => 'cadarco-puxar.jpg', 'titulo' => 'Puxe as duas laçadas', 'descricao' => 'Puxe as duas alças ao mesmo tempo, em direções opostas, até o nó apertar por igual dos dois lados.'],
|
| 8 |
];
|
| 9 |
$total = count($passos);
|
| 10 |
?>
|
Cabeçalho
Só o título, centralizado — não existe indicador de posição como no Carrossel, porque a ideia aqui é ver a lista inteira de uma vez, não navegar passo a passo escondendo os outros.
| 1 |
<div class="sequencia">
|
| 2 |
<div class="cabecalho">
|
| 3 |
<p class="titulo"><?= htmlspecialchars($titulo) ?></p>
|
| 4 |
</div>
|
Lista de passos
A divisória entre um passo e o seguinte só aparece quando não é o último (checagem pelo índice do laço) — esquecer essa condição é o erro mais comum aqui: sobra uma linha solta depois do passo final, sem nada abaixo dela.
| 1 |
<div class="passos">
|
| 2 |
<?php foreach ($passos as $i => $passo): ?>
|
| 3 |
<div class="passo">
|
| 4 |
<span class="numero"><?= $passo['numero'] ?></span>
|
| 5 |
<div class="conteudo">
|
| 6 |
<img class="imagem" src="<?= htmlspecialchars($passo['imagem']) ?>" alt="<?= htmlspecialchars($passo['titulo']) ?>">
|
| 7 |
<h4 class="titulo-passo"><?= htmlspecialchars($passo['titulo']) ?></h4>
|
| 8 |
<p class="descricao"><?= htmlspecialchars($passo['descricao']) ?></p>
|
| 9 |
</div>
|
| 10 |
</div>
|
| 11 |
<?php if ($i < $total - 1): ?>
|
| 12 |
<div class="divisoria"></div>
|
| 13 |
<?php endif; ?>
|
| 14 |
<?php endforeach; ?>
|
| 15 |
</div>
|
| 16 |
</div>
|
Cartão e cabeçalho
Cabeçalho como caixa de título própria, mesmo tratamento do Carrossel e da Comparação de Imagens — mantém o mesmo peso visual entre os componentes de exibição do site.
| 1 |
.sequencia {
|
| 2 |
border: 1px solid #e2e8f0;
|
| 3 |
border-radius: 16px;
|
| 4 |
overflow: hidden;
|
| 5 |
font-family: inherit;
|
| 6 |
}
|
| 7 |
.cabecalho {
|
| 8 |
padding: 20px 24px;
|
| 9 |
text-align: center;
|
| 10 |
background: #f1f5f9;
|
| 11 |
border-bottom: 1px solid #cbd5e1;
|
| 12 |
}
|
| 13 |
.titulo {
|
| 14 |
margin: 0;
|
| 15 |
font-size: 18px;
|
| 16 |
font-weight: 700;
|
| 17 |
color: #0f172a;
|
| 18 |
}
|
Passo
Número e conteúdo lado a lado (flex), imagem dentro do conteúdo — assim o número fica sempre alinhado ao topo da imagem, não ao centro do bloco inteiro, mesmo quando a descrição do passo é mais longa que a dos outros.
| 1 |
.passos {
|
| 2 |
padding: 20px;
|
| 3 |
}
|
| 4 |
.passo {
|
| 5 |
display: flex;
|
| 6 |
align-items: flex-start;
|
| 7 |
gap: 16px;
|
| 8 |
}
|
| 9 |
.numero {
|
| 10 |
flex-shrink: 0;
|
| 11 |
width: 32px;
|
| 12 |
height: 32px;
|
| 13 |
border-radius: 10px;
|
| 14 |
background: rgba(99, 102, 241, 0.1);
|
| 15 |
border: 1px solid rgba(99, 102, 241, 0.3);
|
| 16 |
color: #4f46e5;
|
| 17 |
font-weight: 700;
|
| 18 |
font-size: 14px;
|
| 19 |
display: flex;
|
| 20 |
align-items: center;
|
| 21 |
justify-content: center;
|
| 22 |
}
|
| 23 |
.conteudo {
|
| 24 |
flex: 1;
|
| 25 |
padding-top: 2px;
|
| 26 |
}
|
| 27 |
.imagem {
|
| 28 |
width: 100%;
|
| 29 |
aspect-ratio: 1 / 1;
|
| 30 |
object-fit: cover;
|
| 31 |
border-radius: 10px;
|
| 32 |
margin-bottom: 10px;
|
| 33 |
}
|
| 34 |
.titulo-passo {
|
| 35 |
margin: 0 0 4px;
|
| 36 |
font-size: 14px;
|
| 37 |
font-weight: 600;
|
| 38 |
color: #1e293b;
|
| 39 |
}
|
| 40 |
.descricao {
|
| 41 |
margin: 0;
|
| 42 |
font-size: 13px;
|
| 43 |
line-height: 1.6;
|
| 44 |
color: #64748b;
|
| 45 |
}
|
Divisória entre passos
Alinhada com o centro do número (16px de largura da coluna + metade do gap), não com a borda esquerda do cartão — visualmente ela "desce" do número anterior pro número seguinte, reforçando que a lista é uma sequência conectada, não itens soltos.
| 1 |
.divisoria {
|
| 2 |
width: 2px;
|
| 3 |
height: 12px;
|
| 4 |
background: #e2e8f0;
|
| 5 |
margin-left: 15px;
|
| 6 |
}
|