Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente do cartão

Última atualização:

Cartão CSS Tailwind somente CSS com estilos de contorno, sombra e planos. Tamanhos compactos, padrão e grandes. Conteúdo do cartão, título do cartão e slots de rodapé do cartão. WCAG AA, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes do cartão são recipientes versáteis para combinar informações relacionadas em uma unidade única e visualmente coesa. Construídos com HTML semântico e áreas de conteúdo flexíveis, os cartões organizam o conteúdo hierarquicamente e se adaptam a diversos layouts. O sistema de cartões Frutjam oferece diversas variantes de cores, tamanhos e estilos para vitrines de produtos, postagens em blogs, depoimentos e elementos de painel.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
cardBaseRecipiente de conteúdo elevado com cantos arredondados
card-outlineEstiloPreenchimento transparente com borda visível
card-dashedEstiloEstilo de borda tracejada
card-titleModificadorElemento de título dentro do cartão
card-contentModificadorÁrea de conteúdo acolchoada do cartão
card-actionsModificadorÁrea de rodapé para botões e controles de ação
card-xsTamanhoPreenchimento extra pequeno
card-smTamanhoPreenchimento pequeno
card-mdTamanhoPreenchimento médio (padrão)
card-lgTamanhoGrande preenchimento
card-xlTamanhoPreenchimento extra grande
card-primaryCorCor do tema principal
card-secondaryCorCor do tema secundário
card-accentCorCor do tema de destaque
card-neutralCorCor neutra do tema
card-infoCorCor semântica da informação
card-successCorCor semântica de sucesso
card-warningCorCor semântica de aviso
card-errorCorCor semântica do erro

Uso Básico

1
2
3
4
5
6
7
8
9
<div class="card shadow w-88">
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=600&height=400" alt="Card Image" loading="lazy" />
  </figure>
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>The Card component is a versatile container for combining related information into a single, visually appealing unit.</p>
  </div>
</div>

1
2
3
4
5
6
7
8
9
<div className="card shadow w-88">
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=600&height=400" alt="Card Image" loading="lazy" />
  </figure>
  <div className="card-content">
    <h2 className="card-title">Card Title</h2>
    <p>The Card component is a versatile container for combining related information into a single, visually appealing unit.</p>
  </div>
</div>

Cartão com Ações

Use card-actions para adicionar uma área de rodapé para botões e controles de ação.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="card card-md shadow w-88">
  <div class="card-content">
    <h2 class="card-title">Card Title</h2>
    <p>A card with an actions footer for user interactions like buttons and links.</p>
    <div class="card-actions">
      <button class="btn btn-primary">Accept</button>
      <button class="btn">Dismiss</button>
    </div>
  </div>
</div>

Tamanhos de cartão

Escolha entre cinco variantes de tamanho para se adequar a diferentes densidades de conteúdo e casos de uso.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="card card-xs card-outline">
  <div class="card-content">
    <h2 class="card-title">Extra Small</h2>
    <p>Compact card for minimal content.</p>
  </div>
</div>

<div class="card card-sm card-outline">
  <div class="card-content">
    <h2 class="card-title">Small</h2>
    <p>Small card for condensed information.</p>
  </div>
</div>

<div class="card card-md card-outline">
  <div class="card-content">
    <h2 class="card-title">Medium</h2>
    <p>Medium card for standard content.</p>
  </div>
</div>

<div class="card card-lg card-outline">
  <div class="card-content">
    <h2 class="card-title">Large</h2>
    <p>Large card for prominent content display.</p>
  </div>
</div>

<div class="card card-xl card-outline">
  <div class="card-content">
    <h2 class="card-title">Extra Large</h2>
    <p>Extra large card for expansive content layouts.</p>
  </div>
</div>

Cores do cartão

Aplique variantes de cores aos cartões para diferenciação visual e significado semântico.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<div class="card card-md">
  <div class="card-content">
    <h2 class="card-title">Default</h2>
    <p>Base card color using default theme background.</p>
  </div>
</div>

<div class="card card-md card-primary">
  <div class="card-content">
    <h2 class="card-title">Primary</h2>
    <p>Primary color card for featured content.</p>
  </div>
</div>

<div class="card card-md card-secondary">
  <div class="card-content">
    <h2 class="card-title">Secondary</h2>
    <p>Secondary color card for supporting content.</p>
  </div>
</div>

<div class="card card-md card-accent">
  <div class="card-content">
    <h2 class="card-title">Accent</h2>
    <p>Accent color card for emphasis.</p>
  </div>
</div>

<div class="card card-md card-info">
  <div class="card-content">
    <h2 class="card-title">Info</h2>
    <p>Information card for helpful content.</p>
  </div>
</div>

<div class="card card-md card-success">
  <div class="card-content">
    <h2 class="card-title">Success</h2>
    <p>Success card for positive outcomes.</p>
  </div>
</div>

<div class="card card-md card-warning">
  <div class="card-content">
    <h2 class="card-title">Warning</h2>
    <p>Warning card for caution messages.</p>
  </div>
</div>

<div class="card card-md card-error">
  <div class="card-content">
    <h2 class="card-title">Error</h2>
    <p>Error card for error notifications.</p>
  </div>
</div>

<div class="card card-md card-neutral">
  <div class="card-content">
    <h2 class="card-title">Neutral</h2>
    <p>Neutral card for balanced design.</p>
  </div>
</div>

Fundo personalizado e cor do texto

Use qualquer utilitário de fundo e cor de texto do Tailwind diretamente no cartão para controle total de cores.

html 
1
2
3
4
5
6
<div class="card bg-primary text-on-primary w-88">
  <div class="card-content">
    <h2 class="card-title">Custom Colors</h2>
    <p>Apply any background and text color using Tailwind utilities.</p>
  </div>
</div>

Estilos de cartão

Aplique diferentes variantes de bordas e estilos aos cartões para distinção visual.

Cartão de esboço

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="card card-md card-outline">
  <div class="card-content">
    <h2 class="card-title">Outline Style</h2>
    <p>Cards with visible borders for subtle separation from background.</p>
  </div>
</div>

<div class="card card-md card-outline card-primary">
  <div class="card-content">
    <h2 class="card-title">Primary Outline</h2>
    <p>Outline card with primary color border.</p>
  </div>
</div>

Cartão tracejado

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="card card-md card-dashed">
  <div class="card-content">
    <h2 class="card-title">Dashed Style</h2>
    <p>Cards with dashed borders for visual interest.</p>
  </div>
</div>

<div class="card card-md card-dashed card-secondary">
  <div class="card-content">
    <h2 class="card-title">Secondary Dashed</h2>
    <p>Dashed card with secondary color border.</p>
  </div>
</div>

Cartões com Imagens

Combine cartões com figuras para obter conteúdo que inclua elementos visuais.

Imagem no topo

html 
1
2
3
4
5
6
7
8
9
<div class="card card-md w-88 shadow-sm">
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=600&height=400" alt="Blog Post" loading="lazy" />
  </figure>
  <div class="card-content">
    <h2 class="card-title">Blog Post Card</h2>
    <p>Display articles with featured images, titles, and summaries for content discovery.</p>
  </div>
</div>

Imagem na parte inferior

html 
1
2
3
4
5
6
7
8
9
<div class="card card-md w-88 shadow-sm">
  <div class="card-content">
    <h2 class="card-title">Image Below Content</h2>
    <p>Place images after content for reverse visual hierarchy.</p>
  </div>
  <figure>
    <img src="https://cdn.frutjam.com/images/photo-3.jpg?format=webp&width=600&height=400" alt="Footer Image" loading="lazy" />
  </figure>
</div>

Cartão de preços

Apresente níveis de preços com recursos e botões de call to action.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="card card-lg card-outline">
  <div class="card-content gap-4">
    <div>
      <h2 class="card-title">Startup Plan</h2>
      <div class="flex items-baseline gap-2">
        <span class="text-3xl font-bold">$49</span>
        <span class="text-sm text-on-base/60">/month</span>
      </div>
    </div>
    <div class="divider my-0"></div>
    <ul class="flex flex-col gap-3">
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>25 websites</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>150 templates</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-success badge-sm">✓</span>
        <span>Advanced eCommerce</span>
      </li>
      <li class="flex items-center gap-2">
        <span class="badge badge-error badge-sm opacity-50">✗</span>
        <span class="opacity-50">Unlimited storage</span>
      </li>
    </ul>
    <button class="btn btn-primary w-full">Get Started</button>
  </div>
</div>

Layout de cartão responsivo

Crie layouts de cartão flexíveis que se adaptam a diferentes tamanhos de tela.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div class="card card-lg w-160 shadow-sm">
  <div class="grid grid-cols-12 gap-0">
    <div class="col-span-12 lg:col-span-5">
      <figure class="h-64">
        <picture>
          <source media="(max-width: 1024px)" srcset="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=640&height=427">
          <img src="https://cdn.frutjam.com/images/photo-4.jpg?format=webp&width=600&height=400" alt="Layout Image" class="w-full h-full object-cover" loading="lazy" />
        </picture>
      </figure>
    </div>
    <div class="col-span-12 lg:col-span-7">
      <div class="card-content">
        <h2 class="card-title">Responsive Layout</h2>
        <p>On desktop, image and content display side by side. On mobile, they stack vertically for optimal viewing experience.</p>
      </div>
    </div>
  </div>
</div>

Variantes Combinadas

Misture e combine variantes de tamanho, cor e estilo para designs de cartões personalizados.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="card card-lg card-primary card-outline">
  <div class="card-content">
    <h2 class="card-title">Large Primary Outline</h2>
    <p>Combination of large size, primary color, and outline style.</p>
  </div>
</div>

<div class="card card-sm card-dashed card-secondary">
  <div class="card-content">
    <h2 class="card-title">Small Secondary Dashed</h2>
    <p>Compact card with dashed border in secondary color.</p>
  </div>
</div>

<div class="card card-xl card-accent">
  <div class="card-content">
    <h2 class="card-title">Extra Large Accent</h2>
    <p>Prominent card with accent color for feature display.</p>
  </div>
</div>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Cartão e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP