Texto
Bloco de texto com formatação rica: títulos, listas, negrito, links e citações. Ideal para exposição de conceitos, contextualizações e referências de conteúdo.
Experimente
Como as Abelhas Fazem Mel
Da Flor ao Favo
As abelhas operárias saem da colmeia em busca de flores com néctar disponível. Cada abelha pode visitar centenas de flores num único voo, guiada pelo olfato e pela cor.
Coleta do néctar
O néctar é sugado pela probóscide da abelha e armazenado num órgão especial chamado papo melífero, separado do estômago digestivo. Ali, enzimas já começam a quebrar os açúcares complexos do néctar.
Transformação em mel
De volta à colmeia, a abelha segue um processo em etapas:
- Passa o néctar para outra operária, boca a boca, repetindo isso várias vezes
- Deposita o líquido já parcialmente processado dentro de um alvéolo do favo
- Ventila as asas sobre o alvéolo para evaporar o excesso de água
- Sela o alvéolo com uma fina camada de cera quando o mel atinge a concentração certa
Uma única abelha produz, em média, apenas 1/12 de colher de chá de mel durante toda a sua vida.
O resultado é um alimento com baixíssimo teor de água, que praticamente não estraga — arqueólogos já encontraram mel comestível em tumbas egípcias com milhares de anos.
Código-fonte
Conteúdo em HTML
Aqui o HTML já pronto está escrito direto no PHP só pra o exemplo ser autocontido. Na prática, esse conteúdo quase sempre vem de outro lugar — um editor de texto rico, um arquivo Markdown convertido ou um banco de dados —, nunca escrito à mão dentro do código como está aqui.
| 1 |
<?php
|
| 2 |
$titulo = 'Como Funciona um Arco-Íris';
|
| 3 |
$conteudo = <<<HTML
|
| 4 |
<h2>Como a luz se separa</h2>
|
| 5 |
<p>Quando a luz do sol atravessa uma gota de chuva, ela sofre refração — muda de direção ao entrar num meio mais denso (a água). Cada cor da luz branca se dobra num ângulo ligeiramente diferente, porque <strong>cada comprimento de onda viaja em velocidade própria</strong> dentro da gota.</p>
|
| 6 |
<h3>Reflexão dentro da gota</h3>
|
| 7 |
<p>Depois de entrar, a luz <em>reflete</em> na parede interna da gota, como um espelho, e sai de novo pelo lado por onde entrou — mas já separada em cores.</p>
|
| 8 |
<h3>Por que sempre um arco</h3>
|
| 9 |
<ul>
|
| 10 |
<li>O ângulo de saída da luz colorida é sempre por volta de 42 graus em relação à luz do sol</li>
|
| 11 |
<li>Isso forma um cone perfeito ao redor da sombra da sua cabeça</li>
|
| 12 |
<li>Só as gotas na borda exata desse cone chegam aos seus olhos com a cor certa</li>
|
| 13 |
<li>É por isso que o arco-íris parece se mover com você — cada pessoa vê um cone diferente</li>
|
| 14 |
</ul>
|
| 15 |
<blockquote>Não existe um único arco-íris "lá no céu" — cada observador vê o seu próprio, formado por gotas diferentes.</blockquote>
|
| 16 |
<p>Arcos-íris duplos acontecem quando a luz reflete duas vezes dentro da gota antes de sair, invertendo a ordem das cores no segundo arco.</p>
|
| 17 |
HTML;
|
| 18 |
?>
|
Cartão e título
Título centralizado numa caixa própria — mesmo tratamento dos outros componentes de exibição do site — separando "o que é este bloco" do conteúdo em si.
| 1 |
<div class="bloco-texto">
|
| 2 |
<div class="cabecalho">
|
| 3 |
<p class="titulo"><?= htmlspecialchars($titulo) ?></p>
|
| 4 |
</div>
|
| 5 |
|
| 6 |
<div class="conteudo">
|
| 7 |
<?= $conteudo ?>
|
| 8 |
</div>
|
| 9 |
</div>
|
Cartão e cabeçalho
Cabeçalho como caixa de título própria, mesmo tratamento dos outros componentes de exibição do site.
| 1 |
.bloco-texto {
|
| 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 |
}
|
Elementos de texto rico
Cada tag HTML (h2, h3, p, ul, strong...) recebe estilo por seletor de descendente, não por classe — assim o conteúdo pode ser só HTML puro (de um editor, de Markdown convertido, etc.), sem precisar adicionar `class=""` em cada elemento manualmente.
| 1 |
.conteudo {
|
| 2 |
padding: 20px;
|
| 3 |
color: #334155;
|
| 4 |
line-height: 1.7;
|
| 5 |
}
|
| 6 |
.conteudo h2 {
|
| 7 |
margin: 24px 0 10px;
|
| 8 |
font-size: 20px;
|
| 9 |
font-weight: 700;
|
| 10 |
color: #0f172a;
|
| 11 |
}
|
| 12 |
.conteudo h2:first-child {
|
| 13 |
margin-top: 0;
|
| 14 |
}
|
| 15 |
.conteudo h3 {
|
| 16 |
margin: 20px 0 8px;
|
| 17 |
font-size: 17px;
|
| 18 |
font-weight: 700;
|
| 19 |
color: #1e293b;
|
| 20 |
}
|
| 21 |
.conteudo p {
|
| 22 |
margin: 0 0 14px;
|
| 23 |
}
|
| 24 |
.conteudo ul {
|
| 25 |
margin: 0 0 14px;
|
| 26 |
padding-left: 20px;
|
| 27 |
list-style: disc;
|
| 28 |
}
|
| 29 |
.conteudo li {
|
| 30 |
margin-bottom: 4px;
|
| 31 |
}
|
| 32 |
.conteudo strong {
|
| 33 |
font-weight: 700;
|
| 34 |
color: #0f172a;
|
| 35 |
}
|
| 36 |
.conteudo em {
|
| 37 |
font-style: italic;
|
| 38 |
color: #64748b;
|
| 39 |
}
|
| 40 |
.conteudo blockquote {
|
| 41 |
margin: 0 0 14px;
|
| 42 |
padding-left: 16px;
|
| 43 |
border-left: 4px solid rgba(99, 102, 241, 0.4);
|
| 44 |
font-style: italic;
|
| 45 |
color: #475569;
|
| 46 |
}
|