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

An utility to visualize and automatically highlight code. Use it for documentation, debug output or snippet previews; use [HTMLView](htmlview.md) for rendering raw HTML output and [Card](card.md) when you need a titled container around arbitrary components.

![image](img/codeview_1.png)

```php
{!!
  \KFramework\Components\Visual\CodeView::make()
    ->setLabel('Code')
    ->setContent('
Card::make()
->setContent(\'
    <div class="w-100 flex align-items-center justify-content-center pt-5 pb-5 pl-10 pr-10 text-center">
        <p popup-message="This is the simple popup">Hover the mouse on this text to display it</p>
    </div>
\')');

!!}
```

**End-to-end example:** webhook payload preview in docs.
```php
// Blade:
{!!
  \KFramework\Components\Visual\CodeView::make()
    ->setLabel('Payload')
    ->setType('json')
    ->setContent('{ "event": "user.created", "id": 1 }')
!!}

// Controller:
use KFramework\Components\Visual\CodeView;

$code = CodeView::make()
    ->setLabel('Payload')
    ->setType('json')
    ->setContent('{ "event": "user.created" }');

return view('docs.webhooks', compact('code'));
```

---
## Usage

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

---
## Standard attributes

- `uuid`
- `id`
- `classes`
- `extraAttributes`
- `type`
  - Optional, if code language isn't correctly recognized, then set using type. Example: `php`, `html`, ...
- `label`
- `content` — raw code string rendered with highlighting; set `type` when auto-detection picks the wrong language.
- `columnSpan`

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

## See also
- [Components basics](../basics.md)
- [HTMLView](htmlview.md), [Card](card.md)
- [content](../shared_attributes/content.md), [type](../shared_attributes/type.md), [label](../shared_attributes/label.md)