Docs

Persona

Posted on December 28, 2023  (Last modified on June 7, 2025) • 2 min read • 418 words
Component  
Component  
Share via

Use the persona shortcode to display a custom card.

Overview   Arguments  

Overview  

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

Creators
Creators

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.

Creators
Creators

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.

markdown 
{{< persona thumbnail="/img/creator-1x1.jpg" 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 >}}

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
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].
content string, template.HTML Content of the card.
href string, template.URL 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, template.HTML Title of the card.
Name Type Required Default
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].
content string, template.HTML
Content of the card.
href string, template.URL
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, template.HTML
Title of the card.
On this page: