# [Usage](../../../usage.md) > [Components](../basics.md) > [Visuals](../basics.md) > Card

General content container with title, icons and a `schema` grid for forms or display components. Use it for grouped sections, detail panels or form wrappers; use [FastCard](fastcard.md) for compact KPI numbers and [Fieldset](fieldset.md) for a bordered sub-group inside a form.

![image](img/card_1.png)

```php
{!!
  \KFramework\Components\Visual\Card::make('Card title')
    ->setPostIcon('cog')
    ->setSchema([
        \KFramework\Components\Forms\Form::make()
            ->setSchema([
                \KFramework\Components\Forms\Input::make()
                    ->setLabel('Input')
            ])
    ])
!!}
```

**End-to-end example:** customer detail card with header action.
```php
// Blade:
{!!
  \KFramework\Components\Visual\Card::make('Customer')
    ->setPostIcon('account')
    ->setColumns(2)
    ->setSchema([
        \KFramework\Components\Forms\Input::make('name')->setLabel('Name')->setDisabled(),
        \KFramework\Components\Forms\Input::make('email')->setLabel('E-mail')->setDisabled(),
    ])
    ->setHeaderButton(\KFramework\Components\Visual\Button::make('Edit')->setType('primary')->setUrl('/customers/1/edit'))
!!}

// Controller:
use KFramework\Components\Visual\Button;
use KFramework\Components\Visual\Card;

$card = Card::make('Customer')
    ->setSchema([])
    ->setHeaderButton(Button::make('Edit')->setType('primary'));

return view('customers.show', compact('card'));
```

---
## Usage

- Blade:
```php
{!! \KFramework\Components\Visual\Card::make() !!}
```
- Controller:
```php
Card::make()
```

---
## Standard attributes

- `uuid`
- `id`
- `classes`
- `extraAttributes`
- `name` | `label`
  -  Setting the name will set the label of the card, `name` overrides `label`.
- `content` — static HTML/text body; ignored when `schema` is set.
- `schema` — array of nested components rendered in the card body grid.
- `values`
- `defaults`
- `value`
  - In this case, value is not used to fill schema, but to fill the footer of the card. It accepts a string.
- `preIcon`
- `postIcon`
- `columns`
- `columnSpan`

See their usage and description [here](../basics.md).

---
## Component-specific attributes

### `accordable` | `->setAccordable()`

Enable the Card accordable mode, will overwrite the postIcon. A card in accordable mode can be open/closed like a master detail, hiding/displaying card body with an arrow.

| Types  | Default |
|--------|---------|
| `bool` | `false` |

### `headerButton` | `->setHeaderButton()`

Will add something to the right of card title, before the postIcon or the accordable. Can handle a closure, a Button, a ButtonsGroup or a string, it will print HTML.

| Types                              | Default |
|------------------------------------|---------|
| `Button`, `ButtonsGroup`, `string` |  `null` |

## See also
- [Components basics](../basics.md)
- [FastCard](fastcard.md), [Fieldset](fieldset.md), [Form](../forms/form.md)
- [schema](../shared_attributes/schema.md), [columns](../shared_attributes/columns.md), [content](../shared_attributes/content.md)