Hextra

Hextra Shortcodes

The main usage of these shortcodes are within the layout hextra-home.

`hextra/feature-card`

A shortcode for displaying a feature card.

Usage

{{< hextra/feature-card title="Title" subtitle="Subtitle" >}}

Options

Parameter	Description
`title`	The title of the card.
`subtitle`	The subtitle of the card.
`class`	The class of the card.
`image`	The image of the card.
`imageClass`	The class of the image.
`style`	The style of the card.
`icon`	The icon of the card.
`link`	The link of the card.

`hextra/feature-grid`

A shortcode for displaying a feature grid.

Usage

{{< hextra/feature-grid cols="3" >}}
  {{< hextra/feature-card title="One" >}}
  {{< hextra/feature-card title="Two" >}}
  {{< hextra/feature-card title="Three" >}}
{{< /hextra/feature-grid >}}

Options

Parameter	Description
`cols`	The number of columns.
`style`	The style of the grid.

`hextra/hero-badge`

A shortcode for rendering a badge with a link.

Usage

{{< hextra/hero-badge >}}
  <div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
  <span>Free, open source</span>
  {{< icon name="arrow-circle-right" attributes="height=14" >}}
{{< /hextra/hero-badge >}}

Options

Parameter	Description
`link`	The link of the badge.
`class`	The class of the badge.
`style`	The style of the badge.

`hextra/hero-button`

A shortcode for rendering a button with a link.

Usage

{{< hextra/hero-button text="Get Started" link="/docs" >}}

Options

Parameter	Description
`link`	The link of the button.
`text`	The text of the button.
`style`	The style of the button.

`hextra/hero-container`

A simple hero container with an image on the left side.

Usage

{{< hextra/hero-container image="images/logo.svg"  imageTitle="title" >}}
    Content
{{< /hextra/hero-container >}}

Options

Parameter	Description
`class`	The class of the container.
`cols`	The number of columns (default: `2`).
`image`	The image of the container.
`imageCard`	Whether to display the image as a card (default: `false`).
`imageClass`	The class of the image.
`imageLink`	The link of the image.
`imageStyle`	The style of the image.
`imageTitle`	The title of the image.
`imageWidth`	The width of the image (default: `350`).
`imageHeight`	The height of the image (default: `350`).
`style`	The style of the container.

`hextra/hero-headline`

A shortcode for displaying a hero headline.

Usage

{{< hextra/hero-headline >}}
  Build modern websites&nbsp;<br class="hx:sm:block hx:hidden" />with Markdown and Hugo
{{< /hextra/hero-headline >}}

Options

Parameter	Description
`style`	The style of the headline.

`hextra/hero-section`

A simple hero section with a heading and optional style.

Usage

{{< hextra/hero-section heading="h3" >}}Title{{< /hextra/hero-section >}}>

Options

Parameter	Description
`heading`	The heading level (default: `h2`).
`style`	The style of the heading.
`content`	The content of the heading.

`hextra/hero-subtitle`

A shortcode for displaying a hero subtitle.

Usage

{{< hextra/hero-subtitle >}}
  Fast, batteries-included Hugo theme&nbsp;<br class="hx:sm:block hx:hidden" />for creating beautiful static websites
{{< /hextra/hero-subtitle >}}

Options

Parameter	Description
`style`	The style of the subtitle.

Hextra Deploy Site