MODELOS

Exemplos de formatação utilizadas no site

 

Este é um texto padrão de posts e páginas.

Este é um exemplo de link dentro de posts e páginas.

 

EXEMPLO DE LINHA HR NORMAL


 

EXEMPLO DE LINHA HR AZUL CLARO


 

EXEMPLO DE LINHA HR AZUL CLARO 70% E CENTRALIZADA


 

TAGS HTML

mark – You can use the mark tag to highlight text.

delThis line of text is meant to be treated as deleted text.
sThis line of text is meant to be treated as no longer accurate.
insThis line of text is meant to be treated as an addition to the document.

uThis line of text will render as underlined

smallThis line of text is meant to be treated as fine print.

strongThis line rendered as bold text.

emThis line rendered as italicized text.

EXEMPLO DE BLOCKQUOTE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet quis ligula in pharetra. Vestibulum eros leo, convallis sed dui eget, dapibus euismod sem. Etiam consequat semper viverra. Vestibulum vehicula risus eu risus lacinia facilisis. Integer commodo sem sit amet consectetur vulputate. Phasellus dictum molestie ultricies. Aliquam et ipsum vitae libero gravida congue. Maecenas ornare sed neque vitae dapibus. Sed euismod nulla dolor, quis varius lacus pellentesque nec.

Praesent fringilla diam non nisi efficitur fringilla. Integer ut turpis finibus, rutrum magna quis, tempor ipsum. Nunc porttitor euismod metus, vel fringilla nunc feugiat vitae. Duis mattis tellus ut nisi tempor semper. Nunc euismod urna molestie, blandit ante et, semper tortor. In cursus ultrices nunc ut vulputate. Donec dictum leo ipsum, eget iaculis purus sagittis non. Praesent tristique velit vel erat posuere faucibus. Integer tempus pulvinar ultricies. Donec maximus ipsum ac augue sollicitudin, sit amet euismod urna scelerisque. Nunc sit amet elit neque. Nulla iaculis quis diam et placerat. Duis sed felis sit amet ante varius sollicitudin.


GLOSSÁRIO

 

Este é um exemplo de glossário com alguns termos para ver como funciona.

 

Ex:

  • STF
    • TRF2
      • JFES
      • SJES
      • JFRJ

 


TÍTULOS

H1 – Título 1

H2 – Título 2

H3 – Título 3

H4 – Título 4

H5 – Título 5
H6 – Título 6

 

TÍTULOS com a classe linha-embaixo-titulo

 

H1 – Título 1

H2 – Título 2

H3 – Título 3

H4 – Título 4

H5 – Título 5
H6 – Título 6

 

 


DISPLAY EXAMPLES

 

Display 1

Display 2

Display 3

Display 4


INLINE EXAMPLES1

 

 


EXEMPLO DE LISTA DE LINKS COM DESCRIÇÃO E ÍCONE


BLOCKQUOTE SAMPLES

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Info notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo!
Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
Sit, rem, in?

Warning notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo!
Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
Sit, rem, in?

Success notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo!
Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque!
Sit, rem, in?


UTILIZAR VÍDEO DO YOUTUBE EM POST E VÍDEOS

Utilizar o shortcode INSERIR_VIDEO_YOUTUBE_CENTRALIZADO com o código do vídeo capturado do link do youtube
“[“INSERIR_VIDEO_YOUTUBE_CENTRALIZADO origem=”n1TQXRWFVe4″ titulo=”Vídeo explicativo do CNJ sobre expurgos de poupança””]”

Vídeo explicativo do CNJ sobre expurgos de poupança

UTILIZAR VÍDEOS DO SERVIDOR EM POST E VÍDEOS

“[“INSERIR_VIDEO_CENTRALIZADO origem=”https://www.jfes.jus.br/videos/teste-de-video-polycom.mp4″ titulo=”Palestra XYZ””]”

Palestra XYZ

 

 

 

 

NOTES EXAMPLES

 

Note primary: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note secondary: Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus
delectus placeat illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note success: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note danger: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note warning: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
illo rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note info: Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat illo
rem id nisi consequatur esse, sint perspiciatis soluta porro?

Note light: Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Cum doloremque officia laboriosam. Itaque ex obcaecati architecto! Qui necessitatibus delectus placeat
illo rem id nisi consequatur esse, sint perspiciatis soluta porro?


EXEMPLO DE LISTGROUPS

Legislação

Lei nº 9.099/1995

 

Dispõe sobre os Juizados Especiais Cíveis e Criminais e dá outras providências



Lei nº 10.259/2001

 

Dispõe sobre a instituição dos Juizados Especiais Cíveis e Criminais no âmbito da Justiça Federal


Resolução nº 1, de 15 de fevereiro de 2007

 

Consolida normas dos Juizados Especiais Federais na Justiça Federal da 2ª Região e dá outras providências


Provimento nº 1, de 29 de agosto de 2006

 

Dispõe sobre a representação de que trata o caput do artigo 10 da lei nº 10.259/2001


Outros atos normativos

 

 


LISTA SEM ORDENAÇÃO

  • Item1
  • Item2
  • Item3
  • Item4

 

LISTA ORDENADA

  1. Um
  2. Dois
  3. Três
  4. Quatro

LISTA SEM ESTILO

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

DESCRIPTION LIST

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet
risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

MDBOOTSTRAP

Panel title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Panel title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Panel title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Panel title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Someone famous in Source Title
Panel title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.


Someone famous in Source Title
Panel title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Panel title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Someone famous in Source Title
Panel title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Panel title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago


Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention
to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger
container.

Learn more


EXEMPLO DE MENU DE ITENS – VERTICAL


EXEMPLO DE MENU DE ITENS – HORIZONTAL

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
blandit.

Donec id elit non mi porta.


EXEMPLO DE TABLIST COM CONTEÚDO NA LATERAL


EXEMPLO DE ALERTAS













EXEMPLO DE CONJUNTO DE CARDS

Card image cap

 

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.


Card image cap

 

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.


Card image cap

 

Card title

Some quick example text to build on the card title and make up the bulk of the card’s content.



Warsaw

Mon, 12:30 PM, Mostly Sunny

23

 

3% Precipitation

21 hm/h Winds

  • 8AM
  • 11AM
  • 2PM
  • 5PM
  • 8PM
Tuesday

24°/12°

Wednesday

19°/10°

Thursday

23°/15°

Friday

26°/19°

Saturday

20°/16°

Sunday

22°/13°


 


 

EXEMPLO DE MENU DE ITENS – HORIZONTAL

Consequat
occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat
velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo
anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing
minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt
nostrud.
Ad
pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt
amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id
incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis
deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est
quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex.
Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim
exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit
aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia
elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt
tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim
reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt
ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur
mollit voluptate voluptate consequat non.


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
assumenda est, omnis dolor repellendus.

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.


EXEMPLO DE TABELA FORMATADA

ACCORDIONS

aaaaaaaaaa

bbbbbbb


PRINCIPAIS SHORTCODES PARA USO DENTRO DOS POSTS E PÁGINAS

1. LISTAR SUBPAGINAS – GERA UM MENU VERTICAL COM AS SUBÁGINAS DA PÁGINA PRINCIPAL QUE O SHORTCODE FOR COLOCADO
“[“LISTAR_SUBPAGINAS”]”


THE END !


X