# 3.2.1 - Cabeçalho

O **Cabeçalho** é dividido em **2 seções: Pré Cabeçalho e Cabeçalho** e cada uma dessas seções é **composta por alguns elementos**.O Cabeçalho engloba as regiões onde estão a logo e tarja superior onde está a região para login e os ícones das Mídias Sociais.

![](/files/-MZotzEgXte1u04E692D)

{% tabs %}
{% tab title="Pré-cabeçalho" %}
**Cor de fundo** - cor do background da tarja que fica antes do cabeçalho, onde tem os ícones de login | cadastre-se, lista de desejos, minha conta, rastreio rápido e também os de mídias sociais.

**Cor dos textos** - cor do textos que estão na região do pré-cabeçalho. Alterando aqui os textos de login, cadastre-se, até rastreio rápido ficarão na cor selecionada.

**Cor dos textos ao passar o mouse** - cor do mouse hover, ou seja, cor que aparece quando você colocr o mouse em cima de um dos textos da região.

**Cor dos ícones links** - cor dos ícones que ficam ao lado de login | cadastre-se, lista da desejos, minha conta e rastreio rápido.

**Cor dos ícones redes** - cor dos ícones das redes sociais que aparecem no pré-cabeçalho.

**Cor dos ícones redes ao passar o mouse** - cor do mouse hover, ou seja, cor que aparece quando você coloca o mouse em cima de um dos ícones de redes sociais.
{% endtab %}

{% tab title="Cabeçalho" %}
**Cor de fundo** - cor do background apenas do cabeçalho. Alterando aqui, toda região de cima onde está a logo, a caixa de busca e o carrinho ficarão da cor selecionada.
{% endtab %}

{% tab title="Busca" %}
**Cor de fundo** - cor do background do campo de busca. Alterando aqui, a parte onde você digita o texto para buscar, ficará na cor selecionada.

**Cor da borda** - cor da borda que circula o campo de busca.

**Cor do texto** - cor do texto que aparece quando você digita o que deseja buscar no campo de busca.

**Cor do botão** - cor do botão onde aparece a lupa, que fica do lado direito do local onde você digita o texto para buscar.

**Cor do ícone** - cor da lupa que aparece no botão, do lado direito do local onde você digita o texto para buscar.

.
{% endtab %}

{% tab title="Sugestão de Busca" %}
**Cor do fundo** - quando você digita uma palavra no campo busca, aparece abaixo uma caixa com a sugestão do que você pode buscar. Alterando a cor aqui, o background dessa caixa que aparece fica na cor selecionada.

**Cor do texto** - texto da busca que o usuário digita.

**Cor do fundo “Você quis dizer”** - cor do background da região que aparece o “Você quis dizer”.

**Cor do texto “Você quis dizer”** - cor do texto “você quis dizer” e também da sugestão de busca que aparece abaixo dele.
{% endtab %}

{% tab title="Carrinho" %}
**Cor do título** - cor das palavras “meu carrinho” que aparecem no cabeçalho.

**Cor do texto** - cor do valor que aparece abaixo de “meu carrinho”.

**Cor do ícone** - cor do ícone de carrinho de compras que aparece ao lado de “meu carrinho”.

**Cor da quantidade** - cor do background da bolinha que aparece acima do carrinho de compras.

**Cor do texto quantidade** - cor do número que aparece dentro da bolinha de quantidade.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://temaflatnatray.fabrikadeecommerce.com.br/3.-painel-de-edicao-do-tema/3.2.-edicao-das-cores/3.2.1-cabecalho.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.