-
-
- 
- {{ member.name }} @{{ member.user }}
-
+## Criadores
+
+
+
+{% endexample %}
+
+## Avatar vertical
+
+É possível mostrar o avatar no modo vertical, para isso, ao invés de usar a classe `.avatar-default` use a `.avatar-vertical`. Veja o uso com colunas.
+
+{% example html %}
+
+
+{% endexample %}
diff --git a/getting-started/install.md b/getting-started/install.md
index 57ed51c..2f03973 100644
--- a/getting-started/install.md
+++ b/getting-started/install.md
@@ -41,7 +41,7 @@ Faça o download dos arquivos CSS, JavaScript e fonts compilados e minificados,
Feito o [download]({{ "install/#via-download" | prepend: site.baseurl | prepend: site.url }}), descompacte a pasta compactada para ver a estrutura do {{ site.title }} (o compilado). Você verá algo parecido com isto:
-{% highlight md %}
+
- {{ member.name }} @{{ member.user }}
-
+## Criadores
+
+
+{% for member in site.data.core-team %}
+
+
+## Colaboradores
+
+O código do {{site.title}} é aberto e esta hospedado no GitHub, então qualquer pessoa pode colaborar com o projeto.
+
+[Veja todos os colaboradores do projeto]({{site.repo_url}}/graphs/contributors){: .btn .btn-default}
diff --git a/assets/img/avatar.jpg b/assets/img/avatar.jpg
new file mode 100644
index 0000000..5e72423
Binary files /dev/null and b/assets/img/avatar.jpg differ
diff --git a/components/avatars.md b/components/avatars.md
index 550e4da..2787154 100644
--- a/components/avatars.md
+++ b/components/avatars.md
@@ -4,14 +4,155 @@ title: Avatares
group: components
---
-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.
+Use avatares para exibir o perfil de pessoas, como exemplo, docentes, alunos, coordenadores e etc.
+{: .lead}
-## Contents
+## Conteúdo
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
+
+## Exemplos
+
+Para criar um avatar, precisamos combinar no 5 classes, que são: `.avatar`, `.avatar-default`, `.avatar-foto`, `.avatar-details`, `.avatar-name`. Confira um exemplo abaixo.
+
+{% example html %}
+
+{% endexample %}
+
+### Combinação com ícones
+
+Utilize os ícones social para economizar espaço. [Veja como utilizar ícones]({{ "components/icons/" | prepend: site.baseurl | prepend: site.url }}).
+
+{% example html %}
+
+
+{% endfor %}
+
+
+
+
+
+
+
+
+
+
- {% endfor %}
+ {{ member.name }}
+
+
+{% endexample %}
+
+### Aumentar tamanho
+
+É possível aumentar o tamanho da foto do avatar acrescentando a class `.avatar-lg`. Recomenda-se este uso, caso exista uma descrição longa, veja o exemplo abaixo.
+
+{% example html %}
+
+
+ 
+
+
+
+
+
+
+
+{% endexample %}
+
+## Lista de avatares
+
+Combine avatares com o uso do componente [Grupos de listas]({{ "components/list-group/" | prepend: site.baseurl | prepend: site.url }}). Veja um exemplo:
+
+{% example html %}
+
+
+ 
+
+
+
+
+
+
+Adam Macias
+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.
+Pessoas
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Adam Macias
+@adammacias
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Flávia Souza
+@flaviacs
+
+
+ Pessoas
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Adam Macias
+@adammacias
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Flávia Souza
+@flaviacs
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ Ramon Duran
+@ramonduran
+
cps-bootstrap/
├── css/
│ ├── cps.css
@@ -67,7 +67,7 @@ cps-bootstrap/
├── logo.svg
├── logo-dark.svg
└── logo-light.svg
-{% endhighlight %}
+