Mural de Informações
Painel visual com múltiplos cards de conteúdo dispostos em grade. Apresenta informações em blocos paralelos sem hierarquia obrigatória, permitindo leitura não-linear.
Experimente
Cuidados Essenciais com Plantas de Interior
Luz
Cada planta exige um tipo de luminosidade — direta, indireta ou sombra parcial. Posicionar no lugar errado é a causa mais comum de folhas amareladas ou queimadas.
Água
Regar demais afoga as raízes; regar de menos resseca a planta. Sinta a umidade do solo com o dedo antes de decidir, em vez de seguir um calendário fixo.
Solo e Adubação
Substrato compactado impede a raiz de respirar. Adubar fora da época de crescimento ativo pode queimar as raízes em vez de nutrir a planta.
Temperatura
A maioria das plantas de interior prefere entre 18°C e 27°C. Correntes de ar frio repentinas estressam a planta mais que o frio constante.
Poda
Remover folhas secas ou doentes direciona a energia da planta para o crescimento saudável, além de prevenir a propagação de pragas e fungos.
Circulação de Ar
Ar parado favorece fungos e ácaros. Um ambiente com ventilação leve mantém as folhas secas e reduz doenças causadas por umidade acumulada.
Código-fonte
Dados de exemplo
Seis itens é um bom número — par, nem poucos demais pra parecer vazio, nem tantos que exijam rolar a página várias vezes. Cada item tem o mesmo formato (ícone, título, texto curto): nenhum é mais importante que o outro.
| 1 |
<?php
|
| 2 |
$titulo = 'Como Separar o Lixo para Reciclagem';
|
| 3 |
$itens = [
|
| 4 |
['icone' => 'file-text', 'titulo' => 'Papel', 'texto' => 'Papel limpo e seco pode ser reciclado; papel engordurado ou molhado vai para o lixo comum.'],
|
| 5 |
['icone' => 'wine', 'titulo' => 'Vidro', 'texto' => 'Garrafas e potes de vidro são infinitamente recicláveis, mas cacos de espelho ou lâmpada exigem descarte separado.'],
|
| 6 |
['icone' => 'magnet', 'titulo' => 'Metal', 'texto' => 'Latas de alumínio e aço podem ser amassadas para ocupar menos espaço antes do descarte.'],
|
| 7 |
['icone' => 'recycle', 'titulo' => 'Plástico', 'texto' => 'Nem todo plástico é reciclável — verifique o número dentro do símbolo de reciclagem na embalagem.'],
|
| 8 |
['icone' => 'leaf', 'titulo' => 'Orgânico', 'texto' => 'Restos de comida e cascas viram adubo em composteiras, reduzindo o volume que vai para o aterro.'],
|
| 9 |
['icone' => 'cpu', 'titulo' => 'Eletrônico', 'texto' => 'Baterias e eletrônicos contêm metais pesados e nunca devem ir para o lixo comum — procure um ponto de coleta específico.'],
|
| 10 |
];
|
| 11 |
?>
|
Cabeçalho
Só o título, centralizado — mesmo tratamento do Carrossel e da Sequência de Imagens, pra manter o mesmo peso visual entre os componentes de exibição do site.
| 1 |
<div class="mural">
|
| 2 |
<div class="cabecalho">
|
| 3 |
<p class="titulo"><?= htmlspecialchars($titulo) ?></p>
|
| 4 |
</div>
|
Grade de cards
Ícone e título na mesma linha, não um em cima do outro — um ícone grande isolado acima do texto chama mais atenção do que qualquer item deveria ter, já que os seis são igualmente importantes. Grade de 3 colunas equilibra melhor 6 itens do que 2 (2 linhas de 3, em vez de 3 linhas de 2).
| 1 |
<div class="grade">
|
| 2 |
<?php foreach ($itens as $item): ?>
|
| 3 |
<div class="card">
|
| 4 |
<div class="cabecalho-card">
|
| 5 |
<span class="icone" data-lucide="<?= htmlspecialchars($item['icone']) ?>"></span>
|
| 6 |
<p class="titulo-card"><?= htmlspecialchars($item['titulo']) ?></p>
|
| 7 |
</div>
|
| 8 |
<p class="texto"><?= htmlspecialchars($item['texto']) ?></p>
|
| 9 |
</div>
|
| 10 |
<?php endforeach; ?>
|
| 11 |
</div>
|
| 12 |
</div>
|
Cartão e cabeçalho
Cabeçalho como caixa de título própria, mesmo tratamento do Carrossel e da Sequência de Imagens — mantém o mesmo peso visual entre os componentes de exibição do site.
| 1 |
.mural {
|
| 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 |
}
|
Grade de cards
Três colunas em vez de duas — com um número par de itens (6, no exemplo), 3 colunas formam menos linhas e um bloco mais compacto e "de parede", que é a própria ideia do componente.
| 1 |
.grade {
|
| 2 |
display: grid;
|
| 3 |
grid-template-columns: repeat(3, 1fr);
|
| 4 |
gap: 12px;
|
| 5 |
padding: 20px;
|
| 6 |
}
|
| 7 |
@media (max-width: 640px) {
|
| 8 |
.grade {
|
| 9 |
grid-template-columns: 1fr;
|
| 10 |
}
|
| 11 |
}
|
| 12 |
.card {
|
| 13 |
border: 1px solid #cbd5e1;
|
| 14 |
border-radius: 12px;
|
| 15 |
background: #f8fafc;
|
| 16 |
padding: 16px;
|
| 17 |
}
|
Ícone junto do título
Ícone e título na mesma linha, não um em cima do outro — um ícone grande isolado sozinho acima do texto vira o elemento mais chamativo do card, dando peso visual maior do que qualquer item deveria ter numa lista onde todos são igualmente importantes.
| 1 |
.cabecalho-card {
|
| 2 |
display: flex;
|
| 3 |
align-items: center;
|
| 4 |
gap: 10px;
|
| 5 |
margin-bottom: 8px;
|
| 6 |
}
|
| 7 |
.icone {
|
| 8 |
flex-shrink: 0;
|
| 9 |
width: 28px;
|
| 10 |
height: 28px;
|
| 11 |
border-radius: 8px;
|
| 12 |
background: rgba(99, 102, 241, 0.1);
|
| 13 |
border: 1px solid rgba(99, 102, 241, 0.25);
|
| 14 |
color: #4f46e5;
|
| 15 |
display: flex;
|
| 16 |
align-items: center;
|
| 17 |
justify-content: center;
|
| 18 |
}
|
| 19 |
.titulo-card {
|
| 20 |
margin: 0;
|
| 21 |
font-size: 15px;
|
| 22 |
font-weight: 600;
|
| 23 |
color: #1e293b;
|
| 24 |
}
|
| 25 |
.texto {
|
| 26 |
margin: 0;
|
| 27 |
font-size: 13px;
|
| 28 |
line-height: 1.6;
|
| 29 |
color: #64748b;
|
| 30 |
}
|