+++
title = "Shortcodes"
template = "page.html"
date = 2025-03-18
+++

# Zola Shortcodes

This page documents the custom shortcodes available in this Zola site. Shortcodes are reusable components that can be included in your Markdown content.

## Hero Shortcode

The hero shortcode creates a prominent banner section at the top of a page.

### Usage

```
{{ hero(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-600", text_color="text-white") }}
```

### Parameters

- `title` (required): The main heading text
- `subtitle` (optional): Secondary text displayed below the title
- `button_text` (optional): Text for the call-to-action button
- `button_link` (optional): URL the button links to
- `bg_color` (optional): Background color class (default: "bg-indigo-600")
- `text_color` (optional): Text color class (default: "text-white")

### Example

```html
{{ hero(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-gradient-to-r from-purple-600 to-indigo-600") }}
```

## Hero2 Shortcode

The hero2 shortcode creates a centered hero section with a patterned background.

### Usage

```
{{ hero2(title="Your Title", subtitle="Your subtitle text", button_text="Button Text", button_link="/link", bg_color="bg-blue-700", text_color="text-white", image="/path/to/image.jpg") }}
```

### Parameters

- `title` (required): The main heading text
- `subtitle` (optional): Secondary text displayed below the title
- `button_text` (optional): Text for the call-to-action button
- `button_link` (optional): URL the button links to
- `bg_color` (optional): Background color class (default: "bg-blue-700")
- `text_color` (optional): Text color class (default: "text-white")
- `image` (optional): Path to an optional image to display below the text

### Example

```html
{{ hero2(title="Welcome to My Site", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about", bg_color="bg-blue-700") }}
```

## Feature Card Shortcode

The feature card shortcode creates a card to highlight a feature or service.

### Usage

```
{{ feature_card(title="Feature Name", description="Feature description", icon="🚀", bg_color="bg-white", hover_color="hover:bg-gray-50") }}
```

### Parameters

- `title` (required): The feature name
- `description` (optional): Description of the feature
- `icon` (optional): An emoji or icon to display
- `bg_color` (optional): Background color class (default: "bg-white")
- `hover_color` (optional): Hover effect color class (default: "hover:bg-gray-50")

### Example

```html
{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}
```

## Call-to-Action (CTA) Shortcode

The CTA shortcode creates an attention-grabbing section with a button.

### Usage

```
{{ cta(title="Call to Action", description="Description text", button_text="Button Text", button_link="/link", bg_color="bg-indigo-100", text_color="text-indigo-800", button_color="bg-indigo-600", button_text_color="text-white") }}
```

### Parameters

- `title` (required): The main heading text
- `description` (optional): Description text
- `button_text` (optional): Text for the call-to-action button
- `button_link` (optional): URL the button links to
- `bg_color` (optional): Background color class (default: "bg-indigo-100")
- `text_color` (optional): Text color class (default: "text-indigo-800")
- `button_color` (optional): Button background color class (default: "bg-indigo-600")
- `button_text_color` (optional): Button text color class (default: "text-white")

### Example

```html
{{ cta(title="Ready to Get Started?", description="Create your own beautiful website with Zola and Tailwind CSS today.", button_text="View Blog", button_link="/blog") }}
```

## Using Multiple Shortcodes Together

You can combine multiple shortcodes on a single page. For example, you might use a hero at the top, followed by feature cards in a grid, and a CTA at the bottom:

```markdown
+++
title = "Home"
+++

{{ hero(title="Welcome", subtitle="A modern website") }}

## Features

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
{{ feature_card(title="Feature 1", description="Description 1", icon="🚀") }}
{{ feature_card(title="Feature 2", description="Description 2", icon="⚡") }}
{{ feature_card(title="Feature 3", description="Description 3", icon="🔍") }}
</div>

{{ cta(title="Ready?", description="Get started today", button_text="Sign Up", button_link="/signup") }}
```

## Advanced Usage: Nested Content

Some shortcodes support nested content using the block syntax. This allows you to include more complex content inside the shortcode.

```
{% call hero(title="Welcome") %}
  <div class="custom-content">
    <p>This is custom content inside the hero.</p>
  </div>
{% endcall %}
