# Default

### <mark style="color:blue;">Acompanhe o passo a passo do cadastro e veja exemplos no final.</mark>

Dentro de um módulo, clique em “**Adicionar Card**’’

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FljJIJWGLPRz1HIe4OiVP%2FCaptura%20de%20Tela%202023-03-14%20a%CC%80s%2016.34.02.png?alt=media&#x26;token=dc6e118f-28f8-44a5-b3ca-aecf936c95ba" alt=""><figcaption><p>botão "Adicionar Card"</p></figcaption></figure></div>

Em Tipo do Card, selecione “**Default**’’

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FpDK2zHgxOikonyKMvbdk%2Fimage.png?alt=media&#x26;token=5a5befc4-997b-4056-acd8-778184ff317d" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">**Nome do card**</mark>: de uso interno, importante para organização; também é utilizado para busca na plataforma, caso não seja informado nenhum título ou *keywords*.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2Ff9JImLDwCOaEn2yD9LDh%2FCaptura%20de%20Tela%202023-03-14%20a%CC%80s%2016.37.03.png?alt=media&#x26;token=75c428c0-f9e3-49fb-986a-bb12a18da049" alt=""><figcaption><p>campo "Nome do Card"</p></figcaption></figure></div>

<mark style="background-color:yellow;">**Peso do card**</mark>: pontos do card, conforme lógica de pontuação do conjunto completo de cards (módulo). Deve ser parametrizado apenas ao final do cadastro de todos os cards. Caso não seja aplicável, basta deixar como 0 (zero).

Para maiores informações sobre a lógica de pontos, consulte a seção [**Pontuação**](https://docs.grano.app/conceitos-basicos/pontuacao).

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FwbJlHKm3Cq37PpJeT7fK%2FCaptura%20de%20Tela%202023-03-14%20a%CC%80s%2016.29.10.png?alt=media&#x26;token=3f33cec3-016e-4fc8-9935-de013383e65e" alt=""><figcaption><p>campo "Peso do Card"</p></figcaption></figure></div>

No campo "Keywords" você pode adicionar os <mark style="background-color:yellow;">**Textos**</mark> relacionados a esse card; os textos informados serão considerados na busca da plataforma.

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FzuvO2me4TaDb14ShfqMv%2FCaptura%20de%20Tela%202023-03-14%20a%CC%80s%2016.29.46.png?alt=media&#x26;token=d0d23305-08fa-4b7f-8ba5-421d822299d7" alt=""><figcaption><p>Campo "<em>Keywords</em>"</p></figcaption></figure></div>

{% hint style="info" %}
**Dica:** você pode colar integralmente o texto utilizado em um card de imagem. Assim a busca funcionará considerando **todas as palavras do card.**
{% endhint %}

No campo <mark style="background-color:yellow;">**Alinhamento**</mark>, você seleciona se o texto do card ficará alinhado pelo topo (***Top***) ou pelo rodapé (***Bottom***) do card.

<div align="left"><figure><img src="https://lh6.googleusercontent.com/r6AgTjA65TL6YgnWXqyZxxVXYxWqQylGBFJKNw8z4fSy2_FrSlqq28vFo5sNXa-PMlsDcuX_5iqI6RukiHufMoXupShpWm4XN8fuLJj6zrdGDTBneiIxwMVwpGIpI58uqDd_hFG_AffGwiluAjqBoLM" alt=""><figcaption><p>Campo "Alinhamento"</p></figcaption></figure></div>

Você pode selecionar a <mark style="background-color:yellow;">**cor**</mark> que será usada na **fonte** desse card.

As cores variam de acordo com o [Tema](https://docs.grano.app/conteudo/lms/setup-do-cliente/temas) utilizado setup do Cliente.

![](https://lh6.googleusercontent.com/p9qJ46OgsVRWRnPBWGPa0mtU4jEIz0F_cPZgpAJJRzSAwjCSdvNs989wKeWCD8U8Olgy7wvgW-iNwQwCgGN28gj2AaW1Kwqvq-Iy0aEb5BXFiN_R9d3zjfaC-LJ_w8nc5_XX3qJvR1LyzWjpwdeNy3I)

Se preferir, é possível adicionar uma <mark style="background-color:yellow;">**imagem de fundo**</mark> para o card.&#x20;

Essa imagem deve ter 1080x1920 pixels, no formato "**jpg**".

No campo "**Background - Imagem**", você pode clicar em "*Browse*" e encontrar a imagem que deseja utilizar:

<div align="left"><figure><img src="https://lh3.googleusercontent.com/LC7yQyBllZYZpDg_LfemXLeTtdhLpi5u4zJ7oJCZJpY0h3GL1alID-szHQUilVXbPYYiNlGYKdcbYJc4CqVVdViM0SjRaEoqLWYELwQT2LuXVrTpNlnsTOLvJawYB4S8xNn2YO89ejRmF2csS-kfKg0" alt=""><figcaption><p>Campo para upload de imagem de background do card</p></figcaption></figure></div>

Se você subir uma imagem com resolução superior a 1080x1920 pixels, é possível escolher o alinhamento dessa imagem no card, através da opção <mark style="background-color:yellow;">**Background - Imagem - Alinhamento**</mark>.&#x20;

A opção "Bg center" é a default.

<div align="left"><figure><img src="https://lh4.googleusercontent.com/4weaEAw1apxz5_rddGzxf_mEeyTQm10uWzIeWm31mL5xIsGew99dZQgPgsKXJQXm8Iuw_EbYZ6HmtAPUsKcAZ8CrjIvVH9E6ddpz-Vjxkr7IH_G8Kc42UT-BoBuc6GB3YGm_wUxc3FOMmN6jAvryvhs" alt=""><figcaption><p><em>dropdown</em> de seleção do tipo de card</p></figcaption></figure></div>

Outra possibilidade é você *embedar* um <mark style="background-color:yellow;">**Background - Vídeo ".mp4"**</mark>, o qual rodará em loop e sem som, no fundo desse card.

<div align="left"><figure><img src="https://lh5.googleusercontent.com/roIBgM5EBvrqZb5Ul19jq1EUEBx_Q8MV6RKhcGWfybQo5dOkWXEoNTxWyjwqIp-CHN1lOChq2TL8eRO2KqsdJPiwZtJMz8rlJN1mhc-f2TqC2AQkXmXrqAWQcibOCUdeLtkW9uSjyMB7PT6M8REnXhA" alt=""><figcaption><p>Campo para upload de vídeo background</p></figcaption></figure></div>

Caso esse vídeo não esteja no tamanho recomendado (1080x1920), você pode definir no campo <mark style="background-color:yellow;">**''Background - Fit"**</mark> se o vídeo deve preencher o card inteiro (**Cover**) ou fica proporcional (**Contain**).

<div align="left"><figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2Fj1ewN2fA6H1RAJQWRW2W%2FCaptura%20de%20Tela%202023-03-14%20a%CC%80s%2016.46.15.png?alt=media&#x26;token=4fc05767-11c7-4b64-9d20-bc03c2d51098" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">**Cover:**</mark>

![](https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FAS7ENQYrmHfLpMkCmwn7%2Fimage.png?alt=media\&token=aee1d72a-b27e-49e4-8031-82db82dc0f3c)

<mark style="background-color:yellow;">**Contain:**</mark>

![](https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FcBBIujMvHxGATvSTL1Eq%2Fimage.png?alt=media\&token=508a548b-9335-4419-814e-4dc02c0529b1)

Caso você não queira utilizar uma imagem ou vídeo de background, pode escolher diretamente a cor do background (campos "<mark style="background-color:yellow;">**Background - Cor Inicial**</mark>" e "<mark style="background-color:yellow;">**Background - Cor Final**</mark>").&#x20;

Se apenas o campo "<mark style="background-color:yellow;">**Background - Cor Inicial**</mark>" for preenchido, o card terá uma cor sólida. Se o campo  "<mark style="background-color:yellow;">**Background - Cor Final**</mark>" for preenchido, o card terá um degradê.

<figure><img src="https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FGqVwyrKKTJyy5YL25vZ9%2Fpasted%20image%200.png?alt=media&#x26;token=6da3dbe0-593a-44d7-b961-588a7bb11c46" alt=""><figcaption></figcaption></figure>

![](https://lh4.googleusercontent.com/5bHfaI-pPkByQ1ZEkXtVXvXq1imoI5YJL4S-9CM0LzqhI-ouMSAZX-TRaw4h5x0BTV463OBVzztUXLaVs3NPIZft54WP2-FB-ZWobcPufu085lcu7oEu8S3k6b1B0dC2b_u_Pc3TBi30ULDjGouzZOM)

O card "**Default**" também permite a inserção de um <mark style="background-color:yellow;">**Título**</mark> e de <mark style="background-color:yellow;">**Texto**</mark> (editor HTML).

O <mark style="background-color:yellow;">**Título**</mark> será exibido no topo do card.

O <mark style="background-color:yellow;">**Texto**</mark> permite que você insira (e formate) qualquer conteúdo.

<div align="left"><figure><img src="https://lh5.googleusercontent.com/esEAL9Jg2YB9FSUrtwwqzPWrGGxsHunt3M8QN5BEqm-WTL2Ez5VX6B5gcamle27_3qJ8LBQQC9gPJr9hcBI1N3BEBuoMaw2vF_fa57qxjNKwAb6iftveYRv8bhhiGWSOTgOoSdqWbujelOMKikVhQzc" alt=""><figcaption><p>Campos "Título" e "Texto"</p></figcaption></figure></div>

No editor você possui as funcionalidades básicas de bold, itálico, incluir bullets, aumentar, diminuir e trocar o texto da fonte. Além disso, é possível adicionar imagens, links e até embedar vídeos.

Por fim, caso você queira adicionar um botão (que abra um link externo), basta você adicionar a URL no campo "<mark style="background-color:yellow;">**Botão - Url Externa**</mark>" e o nome do botão no campo "<mark style="background-color:yellow;">**Botão - Label**</mark>"

<div align="left"><figure><img src="https://lh5.googleusercontent.com/S5J4kl8z0wSW--RKQPx503H8hHcmWNeytliaFcyOL30whdcmV7l3KnW4eVfGSjlBYL-Z5VzxOtF8vMvmXSKhQqfMDySRMdb3C0DMXcnRW-7DkYg3enszKFjml-Wn-OmcgnHyAJYQydv5bRWFURY-a8A" alt=""><figcaption><p>campos para "Botão"</p></figcaption></figure></div>

{% hint style="warning" %}
Na Grano, é necessário que você fique atento aos **tamanhos** dos arquivos e mídias no momento de fazer o cadastro dos cards.\
\
**Cards imagem = até 800 KB**\
**Gifs e Vídeos que são cadastrados direto na plataforma =** **até 200KB** - Esse peso não se aplica para vídeos que serão hospedados em outras ferramentas (Vimeo, Youtube, etc)\
**Sons = até 10 MB**\
\
**Lembre-se:** arquivos mais leves são preferíveis. Eles contribuem para o desempenho otimizado da plataforma e aprimoram a experiência do usuário. Antes de fazer o upload, confira o tamanho dos arquivos que você planeja enviar e realize os ajustes necessários. \
\
Se precisar reduzir o tamanho de um arquivo, ferramentas de compressão online gratuitas podem ser uma solução útil.
{% endhint %}

## <mark style="color:blue;">**Alguns Exemplos do Card "Default"**</mark>

No exemplo abaixo, o card foi montando com:

* Campo **Alinhamento**: Top.
* Campos **Cores**: utilizadas 2 cores.
* Campo **Título**: "Lorem ipsum".
* Campo **Texto**: "lorem upsum dolor sit amet lorem ipsum dolor sit amet".
* Campo **Texto**: incluído um [gif](https://giphy.com/gifs/sakshi-popshift-oh-my-what-f64l7PsWjQw1UUj4qm).&#x20;
* Campo **Texto**: palavra "teste", abaixo da imagem.
* Campo **Texto**: Link "CLIQUE AQUI".
* Campo **Texto**: "Abra o seu bônus"
* Campo **Texto**: incluída uma imagem de um presente.

![](https://lh3.googleusercontent.com/8y-C-FQ7QIm6KNuu0SLSZH8bvWRf56SZDxnaG4Hl9gHkwitj0xQbkl0374NZVzVLXxbtBtjHiIRYYge7HcN0Ldp7qc60Y821HS6UYgDj7U6Kp8Z35arFDRYKfbPKn8CXl5wqR_fNKFvx4pDm1UU1lVw)

Exemplo com um background como **imagem** e botão com acesso à **URL externa**:

* Campo **Alinhamento**: Bottom (posição do botão).
* Campo **Background - Imagem:** Incluída uma imagem .jpg
* Campo **Botão - Url Externa**: Link para a matéria em um site externo.
* Campo **Botão - Label**: ''CLIQUE E ACESSE"

![](https://lh4.googleusercontent.com/QbMESPExTc4oGfGuHSjOxj73yh8QnVivTlgklG42chqwhnwklSHDGRlP-qj_kKP1FgVhNlfya-L2i4ApI2Ydgr60ald0T25bZaLjtoYWx21hC_9LGho1ddPFeilgKGgneRcTuydY4qHQF4gmxvd7ToI)

Exemplo com um background como **.gif** inserido via campo "Background - Imagem".

* Campo **Background - Imagem:** Incluída um arquivo. gif com tamanho 1080x1920px

![](https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FHJY2PKZ3pltnPvXIWDMb%2Fstory01-1edd3ba3-6181-65ec-968a-0a6e31593e36.gif?alt=media\&token=79463157-1c92-482c-8b97-a235e653caa6)

Sugere-se que, no caso de uso de .gif, o peso não seja superior a 200 KB.

Uma alternativa para melhor experiência é gerar um vídeo (.mp4) e subir o arquivo no campo ''Background - Vídeo''. O peso também não deve ser superior a 200 KB.

Exemplo com um background como **.mp4** inserido via campo "Background - Vídeo".

* Campo **Background - Vídeo:** Incluído um arquivo .mp4 com tamanho 500x200px
* Campo **Background - Fit:** Cover. Isso faz com que a plataforma estique o vídeo para que ele ocupe 100% da altura do card.

![](https://2827513436-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCPx2ELgQWpxklwSvTR2v%2Fuploads%2FTN07Tfcucg8JNoxuxnV8%2FFrame%201.gif?alt=media\&token=ed8eba33-5bda-4023-97f9-68ee879e4b46)

{% hint style="success" %}
Lembrar de sempre clicar na opção “**Salvar Card**” ao final de cada cadastro ou edição.
{% endhint %}

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*