# Persona

Use the persona shortcode to display a custom card.

## Overview

Use the persona shortcode to display a custom card. As an example, the following shortcode displays a persona card with a primary color.

```markdown
{{< persona thumbnail="/img/placeholder.png" title="Creators" color="primary" >}}
  As a content creator you value your independence. You like to take control of your
  online and offline presence. You want to focus on growing your audience, without
  limitations.

  Hinode gives you the tools to publish your blog in the way that you want. You have
  full ownership and control of your content. That is why content creators choose
  Hinode.
{{< /persona >}}
```

## Styling

The file `assets/scss/components/_persona.scss` defines the Hinode-specific styling of the `persona` shortcode.

```scss
.persona {
    min-height: 320px !important
}
```

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `class` | string |  |  | Class attribute of the card element, e.g. `w-50`. |
| `color` | select |  | `primary` | Theme color of the element. Supported values: [`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `white`, `black`, `body`, `body-tertiary`]. |
| `href` | string |  |  | Address for the button or hyperlink. |
| `path` | path |  |  | Path of the page that defines the card content. You can set `title`, `href`, `thumbnail` and the inner content individually too. |
| `thumbnail` | url |  |  | Thumbnail image url, displayed on top or the left of the card. |
| `title` | string |  |  | Title of the card. |