# Card

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Componente container para agrupar conteúdo relacionado de forma visual e organizada. Suporta imagem de banner, templates personalizados para header, body e footer, ou uso simplificado com atributos.

## Quando usar

- Agrupar informações relacionadas em dashboards
- Exibir itens de lista com mais estrutura visual (portfólio, catálogo, galeria)
- Encapsular formulários ou seções de conteúdo com header e footer de ações
- Mostrar dados com imagem contextual no topo

## Quando não usar

- Para agrupamento simples de campos em formulários — use `Fieldset` em vez disso
- Quando o conteúdo precisa expandir/colapsar — use `Panel` (expansível) ou `Accordion`
- Para exibição de texto corrido sem necessidade de separação visual — use `<section>` nativo

## Instalação

```typescript
import { CardModule } from '@seniorsistemas/angular-components/card';
import { TemplateModule } from '@seniorsistemas/angular-components/template';

@NgModule({
  imports: [CardModule, TemplateModule],
})
export class MeuModule {}
```

## Uso básico

```html
<s-card title="Título" subtitle="Subtítulo" icon="fas fa-rocket">
  <p>Conteúdo via ng-content.</p>
</s-card>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `title` | `string` | `''` | não | Título exibido no cabeçalho |
| `subtitle` | `string` | `''` | não | Subtítulo exibido abaixo do título |
| `icon` | `string` | `''` | não | Classe do ícone no cabeçalho (ex.: `'fas fa-rocket'`) |
| `bannerImage` | `string` | `undefined` | não | URL da imagem de banner exibida no topo do card |
| `fullWidth` | `boolean` | `false` | não | Faz o card ocupar 100% da largura disponível |

### Tipos de template (via `sTemplate`)

```typescript
type CardTemplateTypes = 'header' | 'body' | 'footer';
```

## Exemplos

### Card simples com ng-content

```html
<s-card>
  <p>Conteúdo simples sem header configurado.</p>
</s-card>
```

### Com header via inputs

```html
<s-card title="Informações do Usuário" subtitle="Dados cadastrais" icon="fas fa-user">
  <p>Nome, e-mail e telefone.</p>
</s-card>
```

### Com imagem de banner

```html
<s-card
  bannerImage="https://exemplo.com/imagem.jpg"
  title="Card com Banner"
  subtitle="Exemplo de card com imagem">
  <p>Conteúdo abaixo da imagem.</p>
</s-card>
```

### Com template de footer (ações)

```html
<s-card title="Confirme a Ação" icon="fas fa-exclamation-triangle">
  <p>Você tem certeza que deseja continuar?</p>

  <ng-template sTemplate="footer">
    <div style="display: flex; justify-content: flex-end; gap: 8px;">
      <s-button label="Cancelar" priority="secondary"></s-button>
      <s-button label="Confirmar" priority="danger"></s-button>
    </div>
  </ng-template>
</s-card>
```

### Com templates completos (header, body e footer)

```html
<s-card [fullWidth]="true">
  <ng-template sTemplate="header">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <strong>Header Customizado</strong>
      <s-button label="Ação" priority="secondary" size="small"></s-button>
    </div>
  </ng-template>

  <ng-template sTemplate="body">
    <p>Corpo totalmente customizado.</p>
  </ng-template>

  <ng-template sTemplate="footer">
    <div style="display: flex; justify-content: flex-end;">
      <s-button label="Salvar" priority="primary"></s-button>
    </div>
  </ng-template>
</s-card>
```

## Acessibilidade

- Use `title` e `subtitle` com textos descritivos para que leitores de tela entendam o contexto do card
- Quando o banner é apenas decorativo, ele não precisa de texto alternativo (é exibido como `background-image`)
- Botões no footer devem ter `label` ou `tooltip` claros

## Componentes relacionados

- [`Accordion`](../accordion/README.md) — quando o conteúdo do card precisa ser expansível/colapsável