RTFM #01: o guia básico do componente Card

Saiba o que é card, suas diferenças com outros componentes e suas regras de uso em um design system

Jan Klever
Jul 10, 2020 · 4 min read

E damos largada oficialmente ao RTFM, nosso guia básico de utilização de componentes do nosso design system, o Zilla.

Componentes como o Card têm caráter multifacetado, com ampla utilização em nossos produtos e é, por isso, que ele foi escolhido para inaugurar nossa documentação.

Antigo cartão de futebol com foto e nome do jogador David Beckham dentro de uma caixa etiquetada de colecionador
Cartão de colecionável de David Beckham. Fonte: Collectors.com

Eu não sou nada fã de esportes, admito. Mas resolvi assumir o risco de fazer uma analogia equivocada ao emprestar a referência feita por Nathan Curtis no artigo “Cards and Composability in Design Systems”. Afinal, reutilizar é preciso e criar algo novo nem sempre é uma das melhores opções (assim como em um design system).

Se, assim como ele, você é fissurado em esportes e conhece esses cartões. Ótimo. (Se não dá um pesquisada aí ou compara com… Magic, sei lá).

O objetivo desses cartões de astros do esporte era reunir informações daquele indivíduo. Pelo menos nome e foto, mas alguns incluíam até data de nascimento, time ou equipe e altura. Parando agora para pensar parece bem nostálgico mesmo, Nathan!

Se você chegou até aqui e ainda está se perguntando que tipo de artigo é esse, eu sugiro você dá uma lida antes no artigo de introdução ao RTFM, o Recurso Técnico de Fixação Mental.

Três colunas de exemplos de diferentes cards utilizados em três diferentes produtos da Quero
Cards utilizados no Melhor Escola, Mundo Vestibular e Quero Bolsa.

Definição: O que são cards?

Essa relação dos Cards com os cartões dos esportes não é mera coincidência, isso é conhecido como esqueumorfismo. Seu objetivo é evidenciar conteúdos e ações em um mesmo contexto, podendo ainda se utilizar de sombras para simular elevações, gerando hierarquia. Tecnicamente, cards são contêineres para outros elementos em um design system, o que pode acabar gerando algumas confusões.

Início da seção sobre diferenças

Comparando os Cards com outros elementos

Cards ≠ Backgrounds

Backgrounds são planos de fundo (tradução livre? rs) de páginas ou seções e não possuem o objetivo de evidenciar conteúdos ou ações específicas. Inclusive, background nem é componente, né? É apenas um parâmetro.

Cards ≠ Dividers

Dividers são utilizados para dividir (okay, parei, parei! haha) conteúdos, mas sem agrupar as partes. Enquanto os cards, separam conteúdos enquanto os agrupa.

Cards ≠ Buttons

Buttons são utilizados para realizar ações e possuem uma estrutura tecnicamente planejada para isso. Portanto, não adianta querer fazer de card um superbotão. Os cards possuem um conteúdo informativo independente da sua ação.

Início da seção de regras

Os do’s e don’ts dos cards

Caso decida utilizar os cards, atente-se ao que você pode e não pode fazer com eles. Não estamos em um jogo de futebol, mas, como disse um comentarista por aí, “a regra é clara”.

Para exemplificar cada regra, utilizei exemplos dos cards presentes em nossos marketplaces, que utilizam-se do Zilla, o design system da Quero Educação.

01 Independência

O card precisa funcionar sem que haja dependência de algo externo. Ele é único, mesmo que em grupo.

Com relação a independência, o exemplo incorreto apresenta-se com o título fora do card

02 Completude

O card não pode ser dividido ou se integrar a outro para que haja uma informação completa. Card não é Lego®!

Com relação a completude, o exemplo incorreto apresenta seu conteúdo dividido em dois cards

03 Individualidade

O card possui conteúdo e ações relacionados a um único contexto. Cada macaco no seu galho — quer dizer, cada conteúdo no seu card.

Com relação a individualidade, o exemplo incorreto apresenta-se dois conteúdos distintos em um único card

04 Elevação

O card pode se sobrepor a outro, mas precisa diferenciar sua elevação. Só não se esqueça das regras anteriores.

Com relação a elevação, o exemplo incorreto apresenta-se com cards sobrepostos a outra com o mesmo acabamento de sombra

05 Interatividade

O card deve interagir com o mouseover caso possua ação. Isso tornará essa interatividade mais evidente e mais acessível.

Com relação a interatividade, o exemplo incorreto mostra uma animação do cursor interagindo com um card inerte

Como utilizamos os cards na Quero Educação

Talvez o card seja um dos componentes mais utilizados aqui na Quero, principalmente para apresentar ofertas de bolsas de estudo ou informações de cursos. Card é o que não falta em nossos produtos: tem aqueles com imagem, tem aqueles mais minimalistas, tem aqueles abarrotados de informações, tem com interação, tem com botões… tem pra mais de uma seleção inteira.

Antes de apitarmos o fim do jogo, ganhei uns minutinhos de prorrogação para convidar vocês a acompanhar o RTFM também por vídeo no Instagram do time de design.

Fiquem a vontade para nos mandar aquele alô no comentários falando dos melhores lances ou daquelas faltas. É tóis!

Além disso, acompanhe outros materiais do squad Design System:

Quer ter contato com os cards do nosso design system? Estamos com vagas abertas.

Tech at Quero

Blog do time de Tecnologia da Quero Educação — A EdTech que…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store