Título h1

Título h2

Título h3

Título h4

Título h5

Título h6

Breadcrumbs

Título da pagina

Título

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Texto padrão

Lorem ipsum dolor sit amet, consectetur adipisicing 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. 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.

Loading

Loading sobre conteúdo

Redes sociais

Compartilhamento (shareThis)

Compartilhamento inline (shareThis)

Paginação

Paginação esquerda

Paginação direita

Formulário

Input

Input text

Input e-mail

Input number

Textarea

Textarea com contador

Select

Utilizamos por padrão o plugin Select2 .
Ele tambem aceita alteração inline via atributos do select2 como data-allow-clear, data-minimum-results-for-search, etc..., ex.: <select name="select" class="uk-select" data-placeholder="Todas" data-allow-clear="false" data-minimum-results-for-search="999"> Caso precise utilizar o select sem select2 pode utilizar o atributo data-select-default, ex.:
<select name="select" class="uk-select" data-placeholder="Todas" data-select-default>

Select

Select multiplo

Select com ajax e paginação infinita

Select normal sem select2

Máscaras

Utilizamos o plugin RobinHerbots/Inputmask .
Máscaras pré-definidas estão no app.js
Ele tambem aceita alteração inline via atributos como data-inputmask-prefix, data-inputmask-min, etc..., ex.:
<input name="valor" class="uk-input mascara-dinheiro" data-inputmask-prefix="R$ "> <input name="numero" class="uk-input mascara-numero" data-inputmask-min="10" data-inputmask-max="100">

Máscara número

Máscara telefone

Máscara data

Máscara hora

Máscara CEP

Máscara RG

Máscara CPF

Máscara CNPJ

Máscara CPF/CNPJ

Máscara dinheiro

Máscara dinheiro com prefixo

Máscara porcentagem

Grupo de localização, com auto-complete do CEP

CEP

Endereço

Número

Bairro

Complemento

Estado

Cidade

Checkbox

Horizontal

Opção 1 Opção 2 Opção 3

Vertical

Opção 1

Opção 2

Opção 3

Aceito os termos de uso

Radio

Horizontal

Opção 1 Opção 2 Opção 3

Vertical

Opção 1

Opção 2

Opção 3

Uploads simples

Anexar arquivo

Apagar

Uploads avançado que já envia para o backend

Incluir arquivo

ou solte os arquivos aqui

Uploads avançado que já envia para o backend (limitado a 1 arquivo)

Incluir arquivo

ou solte o arquivo aqui

Recaptcha

Botões

class="... uk-button-primary"

class="... uk-button-secondary"

class="... uk-button-third"

class="... uk-button-link"

class="... uk-button-underline"

class="... uk-button-outline"

class="... uk-button-outline border-width-2"

class="... uk-button-outline-grey"

class="... uk-border-rounded"

class="... uk-border-pill"

class="... uk-width-expand uk-border-rounded"

Vídeo inline

Com imagem de fundo

Sem imagem de fundo

Slides

Utilizamos por padrão o plugin Swiper .
A configuração dele é inserido inline como atributo data-slide <div class="slides tipo-grid" data-slide='{"watchOverflow":true, "autoplay":{"delay":5000}, "loop":true, "spaceBetween":20, "slidesPerView":"auto", "breakpoints":{"640":{"slidesPerView":2, "slidesPerGroup":2}, "960":{"slidesPerView":3, "slidesPerGroup":3}, "1200":{"slidesPerView":4, "slidesPerGroup":4}}}'>

Tipo slideshow

UIkit

Base

This is a H1 heading

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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.

This is a H2 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is preformatted text with a code element.

// Code example
<div id="myid" class="myclass" hidden>
    Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit.
</div>

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.

This is a H3 heading

This is a short block quote — look Ma, no paragraph tags!

This is a H4 heading

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Someone famous in Source Title

This is a H5 heading

This is a H6 heading

This is a H1 heading
with some more text

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.

This is a H2 heading
with some more text

This is a H3 heading
with some more text

This is a H4 heading
with some more text

This is a H5 heading
with some more text

This is a H6 heading
with some more text

Text-level semantics

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The ~~del element~~ example
The dfn element and dfn element with title examples
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The ~~s element~~ example
The samp element example
The small element example
The span element example
The strong element example
The _{sub element} example
The ^{sup element} example
The u element example
The var element example

The address element.
John Doe
somewhere, world

Figure

Unordered List

list item
list item
- list item
- list item
  - list item
  - list item
- list item
- list item
list item
list item

Ordered List

list item
list item
1. list item
2. list item
  1. list item
  2. list item
3. list item
4. list item
list item
list item

Description list

Description name: Description value
Description name: Description value; Description value
Description name
Description name: Description value

Responsiveness

SVG

Canvas

Video

Audio

Accordion

Animated

This is a title with some more text

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.
Item 2

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.
Item 3

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.

Multiple

Item 1

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.
Item 2

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.
Item 3

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.

Not Animated

Item 1

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.
Item 2

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.
Item 3

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.

Not collapsible

Item 1

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.
Item 2

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.
Item 3

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.

Tab

Top

Bottom

Left/Right

Dropdown

Active
Item
Item
More
- Active
- Item
- Header
- Item
- Item
- Item

Alert

Alert! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Success! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Warning! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Danger! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Primary!

Grid

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Divider

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Small

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Divider

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Medium

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Divider

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Large

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Divider

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Collapse

1-2

1-2-M

1-2-L

1-4-M
...
...

1-4-M

1-2-L
...

1-2-L

1-2-M

1-4-M

1-5-M

3-5-M

Auto-M

1-3-M

Expand-M

Column and Row

Small / Large

1-4-M

Medium / Small

1-4-M

Divider

Order

First

Second

Third

Last

First

Second

Third

Last

Wrap + Order

First

Last
...
...

Wrap

First

Last
...
...

Wrap

First
...
...

Last

Wrap

First

Last
...
...

Wrap

Stack

First

Second

Last

Align

First

Second

Third

Forth

Fifth

Last

Table

Table caption
Table Heading	Table Heading	Table Heading	Table Heading
Table Footer	Table Footer	Table Footer	Table Footer
Table Data a element `.uk-table`	Table Data Button	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data
Active Row	Active Row	Active Row	Active Row
Table Data	Table Data	Table Data	Table Data
Table Sub Heading	Table Sub Heading	Table Sub Heading	Table Sub Heading
Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data

Table Divider

Table Heading	Table Heading	Table Heading
Table Data a element `.uk-table`	Table Data Button	Table Data
Table Data	Table Data	Table Data
Active Row	Active Row	Active Row
Table Data	Table Data	Table Data
Table Sub Heading	Table Sub Heading	Table Sub Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

Table Striped

Table Heading	Table Heading	Table Heading
Table Data a element `.uk-table`	Table Data Button	Table Data
Table Data	Table Data	Table Data
Active Row	Active Row	Active Row
Table Data	Table Data	Table Data
Table Sub Heading	Table Sub Heading	Table Sub Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

Widths

Expand	Truncate	Width Medium	Shrink + Nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor

Responsive

Expand	Truncate	Width Medium	Shrink + Nowrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Lorem ipsum dolor

Progress

Indeterminate

Determinate

With Text

45%

100%

Subnav

Divider

Active
Item
Item
Disabled

Pill

Active
Item
Item
Disabled

Título da página com fundo

Título da página com fundo e breadcrumb

Título h1

Título h2

Título h3

Título h4

Título h5

Título h6

Breadcrumbs

Título da pagina

Texto padrão

Loading

Loading sobre conteúdo

Redes sociais

Compartilhamento (shareThis)

Compartilhamento inline (shareThis)

Paginação

Paginação esquerda

Paginação direita

Formulário

Input

Textarea

Select

Máscaras

Grupo de localização, com auto-complete do CEP

Checkbox

Horizontal

Vertical

Radio

Horizontal

Vertical

Uploads simples

Uploads avançado que já envia para o backend

Uploads avançado que já envia para o backend (limitado a 1 arquivo)

Recaptcha

Botões

Vídeo inline

Com imagem de fundo

Sem imagem de fundo

Slides

Tipo slideshow

Tipo grid

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam lorem risus, feugiat sit amet nulla vitae, ultricies tincidunt erat.

Ut a urna a nibh dignissim consequat at eget turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam lorem risus, feugiat sit amet nulla vitae, ultricies tincidunt erat.

Ut a urna a nibh dignissim consequat at eget turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam lorem risus, feugiat sit amet nulla vitae, ultricies tincidunt erat.

Ut a urna a nibh dignissim consequat at eget turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam lorem risus, feugiat sit amet nulla vitae, ultricies tincidunt erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

UIkit

Base

This is a H1 heading

This is a H2 heading

This is a H3 heading

This is a H4 heading

This is a H5 heading

This is a H6 heading

This is a H1 headingwith some more text

This is a H2 headingwith some more text

This is a H3 headingwith some more text

This is a H4 headingwith some more text

This is a H5 headingwith some more text

This is a H6 headingwith some more text

Text-level semantics

Figure

Unordered List

Ordered List

Description list

Responsiveness

Audio

Accordion

Animated

Multiple

Not Animated

Not collapsible

This is a H1 heading
with some more text

This is a H2 heading
with some more text

This is a H3 heading
with some more text

This is a H4 heading
with some more text

This is a H5 heading
with some more text

This is a H6 heading
with some more text