Guia de estilo

Baseado em Poor Man’s Styleguide.

Contém todos os elementos comuns em HTML e o Goldmark Markdown parser do Hugo, além de alguns shortcodes personalizados.

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Cabeçalhos com texto

Cabeçalho 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Block Elements

Parágrafos e imagens

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Isto é uma imagem:

Uma imagem acompanhada de texto de descrição

Isto é uma figura com legenda:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat quas fugiat molestias nesciunt, debitis libero culpa blanditiis minima asperiores recusandae sed consequatur ratione minus labore vitae dolorum molestiae natus! Excepturi voluptatum adipisci ullam natus ducimus minus sit quidem voluptas placeat eligendi cumque dolorem, nulla rem, delectus, praesentium ipsum nam quod repellendus voluptates aperiam explicabo quo amet accusantium. Ab quam id, incidunt, ea, veniam quod distinctio labore at magni recusandae minus placeat enim eveniet praesentium expedita! Rerum autem molestias reiciendis itaque, obcaecati quaerat quibusdam aliquam odit reprehenderit cupiditate facilis distinctio eos recusandae sequi aliquid. Maiores, voluptatibus id. Commodi enim sint illum.

Bloco de citação

Este é um parágrafo comum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

“Este é um bloco de citação. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.”

Caixa de aviso

Isto é um aviso! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Isto é uma informação! Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Details

Este é um sumário

Este é um parágrafo de texto colapsável. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Este é outro parágrafo de texto colapsável. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Elementos de texto

Exemplos de um link, um link externo, e um link com título

Um exemplo de abr.

Um exemplo de ACRONYM

Um exemplo de negrito

Um exemplo de citação

Um exemplo de código

Um exemplo de ~~del~~

Um exemplo de dfn e dfn com título

Um exemplo de ênfase

Um exemplo de kbd

Um exemplo de mark

Um exemplo de small

Um exemplo de _subscrito

Um exemplo de ^sobrescrito

Monospace / Preformatted

Bloco de código envolto de tags “pre” e “code”:

// Percorrer por Divs usando Javascript.
var divs = document.querySelectorAll('div'),
    i;

for (i = 0; i < divs.length; ++i) {
    divs[i].style.color = 'green';
}

Texto monoespaçado envolto de tags “pre”:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Tipos de Lista

Lista Ordenada

Item 1
Item 2
Item 3
1. Item 3.1
2. Item 3.2
  1. Item 3.2.1
  2. Item 3.2 2
3. Item 3.3
Item 4

Lista Não-ordenada

Item 1
Item 2
Item 3
- Item 3.1
- Item 3.2
  - Item 3.2.1
  - Item 3.2 2
- Item 3.3
Item 4

Lista de Definições

Termo 1: Descrição 1
Termo 2: Descrição 2

Tabelas

Tabela Markdown Padrão

Coluna	Coluna	Coluna
Alinhamento	Alinhamento	Alinhamento
esquerdo	central	direito

Tabela Markdown Responsiva

Coluna 1	Coluna 2	Coluna 3	Coluna 4	Coluna 5
Linha 1 Coluna 1	Linha 1 Coluna 2	Linha 1 Coluna 3	Linha 1 Coluna 4	Linha 1 Coluna 5
Linha 2 Coluna 1	Linha 2 Coluna 2	Linha 2 Coluna 3	Linha 2 Coluna 4	Linha 2 Coluna 5
Linha 3 Coluna 1	Linha 3 Coluna 2	Linha 3 Coluna 3	Linha 3 Coluna 4	Linha 3 Coluna 5

Guia de estilo

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Cabeçalhos com texto

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Block Elements

Parágrafos e imagens

Bloco de citação

Caixa de aviso

Details

Elementos de texto

Monospace / Preformatted

Tipos de Lista

Lista Ordenada

Lista Não-ordenada

Lista de Definições

Tabelas

Tabela Markdown Padrão

Tabela Markdown Responsiva

Elementos midiáticos

Áudio

Vídeo

Conteúdo Incorporado