> For the complete documentation index, see [llms.txt](https://docs.acpt.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acpt.io/dynamic-blocks/examples.md).

# Examples

Three complete dynamic block examples with controls, TWIG templates, and CSS

These examples demonstrate real-world dynamic blocks. Each one includes the controls to configure, the TWIG callback template, and a CSS block for the Step 5 Style tab.

***

## Example 1 — Event Card

A card that displays an event's key details, with an optional featured badge controlled by the editor.

### Meta box setup

Assumes a meta box named `event_details` with the following fields on the `event` post type:

| Field name    | Type   | TWIG variable                    |
| ------------- | ------ | -------------------------------- |
| `date`        | Date   | `acpt_event_details_date`        |
| `time`        | Time   | `acpt_event_details_time`        |
| `location`    | Text   | `acpt_event_details_location`    |
| `description` | Editor | `acpt_event_details_description` |
| `ticket_url`  | URL    | `acpt_event_details_ticket_url`  |

### Block controls

| Control name  | Type   | Default    |
| ------------- | ------ | ---------- |
| `show_badge`  | Toggle | off        |
| `badge_label` | Text   | `Featured` |

### Callback (TWIG)

```twig
<article class="event-card">

    {% if show_badge %}
        <span class="event-card__badge">
            {{ badge_label|default('Featured') }}
        </span>
    {% endif %}

    <div class="event-card__body">
        <h2 class="event-card__title">
            <a href="{{ get_permalink() }}">{{ get_the_title()|raw }}</a>
        </h2>

        {% if acpt_event_details_date %}
            <p class="event-card__meta">
                📅 {{ acpt_event_details_date }}
                {% if acpt_event_details_time %}
                    at {{ acpt_event_details_time }}
                {% endif %}
            </p>
        {% endif %}

        {% if acpt_event_details_location %}
            <p class="event-card__meta">
                📍 {{ acpt_event_details_location }}
            </p>
        {% endif %}

        {% if acpt_event_details_description %}
            <div class="event-card__description">
                {{ acpt_event_details_description|raw }}
            </div>
        {% endif %}

        {% if acpt_event_details_ticket_url %}
            <a class="event-card__cta" href="{{ acpt_event_details_ticket_url }}">
                Get tickets →
            </a>
        {% else %}
            <a class="event-card__cta event-card__cta--secondary" href="{{ get_permalink() }}">
                Learn more →
            </a>
        {% endif %}
    </div>

</article>
```

### Style (CSS)

```css
.event-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    padding: 24px;
    font-family: inherit;
}

.event-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f97316;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

.event-card__title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}

.event-card__title a {
    color: inherit;
    text-decoration: none;
}

.event-card__title a:hover {
    text-decoration: underline;
}

.event-card__meta {
    margin: 4px 0;
    font-size: 14px;
    color: #6b7280;
}

.event-card__description {
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
}

.event-card__cta {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 20px;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.event-card__cta--secondary {
    background: transparent;
    color: #2563eb;
    border: 1px solid #2563eb;
}
```

***

## Example 2 — Property Listing Card

A card for a real estate listing. Displays the property's gallery, price, address, and key specs — all driven by ACPT meta fields, with no custom controls needed.

### Meta box setup

Assumes a meta box named `property` on post type `listing`:

| Field name  | Type    | TWIG variable                                 |
| ----------- | ------- | --------------------------------------------- |
| `gallery`   | Gallery | `acpt_property_gallery` (array of image URLs) |
| `price`     | Number  | `acpt_property_price`                         |
| `currency`  | Select  | `acpt_property_currency`                      |
| `address`   | Address | `acpt_property_address` (object)              |
| `bedrooms`  | Number  | `acpt_property_bedrooms`                      |
| `bathrooms` | Number  | `acpt_property_bathrooms`                     |
| `area_sqm`  | Number  | `acpt_property_area_sqm`                      |

### Block controls

None — this block is fully data-driven.

### Callback (TWIG)

```twig
<div class="property-card">

    {# Gallery — show first image as cover #}
    {% if acpt_property_gallery|length > 0 %}
        <div class="property-card__image">
            <img src="{{ acpt_property_gallery[0] }}" alt="{{ get_the_title() }}" />
            {% if acpt_property_gallery|length > 1 %}
                <span class="property-card__image-count">
                    +{{ acpt_property_gallery|length - 1 }} photos
                </span>
            {% endif %}
        </div>
    {% endif %}

    <div class="property-card__body">

        {# Price #}
        {% if acpt_property_price %}
            <p class="property-card__price">
                {{ acpt_property_currency|default('$') }}{{ acpt_property_price|number_format(0, '.', ',') }}
            </p>
        {% endif %}

        {# Title & address #}
        <h2 class="property-card__title">
            <a href="{{ get_permalink() }}">{{ get_the_title()|raw }}</a>
        </h2>

        {% if acpt_property_address %}
            {% set addr = acpt_property_address %}
            <p class="property-card__address">
                {{ addr.street }}, {{ addr.city }}{% if addr.state %}, {{ addr.state }}{% endif %}
            </p>
        {% endif %}

        {# Specs #}
        <ul class="property-card__specs">
            {% if acpt_property_bedrooms %}
                <li>🛏 {{ acpt_property_bedrooms }} bed</li>
            {% endif %}
            {% if acpt_property_bathrooms %}
                <li>🚿 {{ acpt_property_bathrooms }} bath</li>
            {% endif %}
            {% if acpt_property_area_sqm %}
                <li>📐 {{ acpt_property_area_sqm }} m²</li>
            {% endif %}
        </ul>

    </div>
</div>
```

### Style (CSS)

```css
.property-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    background: #fff;
    font-family: inherit;
}

.property-card__image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card__image-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.property-card__body {
    padding: 20px;
}

.property-card__price {
    font-size: 22px;
    font-weight: 700;
    color: #1d4ed8;
    margin: 0 0 4px;
}

.property-card__title {
    font-size: 17px;
    margin: 0 0 4px;
}

.property-card__title a {
    color: inherit;
    text-decoration: none;
}

.property-card__address {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
}

.property-card__specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #374151;
}
```

***

## Example 3 — Configurable Text Banner

A flexible banner block where the editor can set the message text, pick an accent colour, and toggle a call-to-action button — all from the block sidebar.

### Meta box setup

No ACPT meta fields needed. This block is entirely control-driven.

### Block controls

| Control name   | Type     | Options / Default                    |
| -------------- | -------- | ------------------------------------ |
| `message`      | Textarea | —                                    |
| `accent_color` | Select   | `blue` / `green` / `orange` / `dark` |
| `show_cta`     | Toggle   | off                                  |
| `cta_label`    | Text     | `Learn more`                         |
| `cta_url`      | Text     | —                                    |

### Callback (TWIG)

```twig
<div class="text-banner text-banner--{{ accent_color|default('blue') }}">

    <div class="text-banner__content">

        {% if message %}
            <p class="text-banner__message">
                {{ message|nl2br|raw }}
            </p>
        {% endif %}

        {% if show_cta %}
            <a class="text-banner__cta"
               href="{{ cta_url|default(site_url) }}">
                {{ cta_label|default('Learn more') }}
            </a>
        {% endif %}

    </div>

</div>
```

### Style (CSS)

```css
.text-banner {
    padding: 32px;
    border-radius: 10px;
    font-family: inherit;
    text-align: center;
}

/* Colour themes */
.text-banner--blue  { background: #dbeafe; color: #1e3a8a; }
.text-banner--green { background: #dcfce7; color: #14532d; }
.text-banner--orange { background: #ffedd5; color: #7c2d12; }
.text-banner--dark  { background: #1f2937; color: #f9fafb; }

.text-banner__message {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.text-banner__cta {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    background: currentColor;
    font-size: 14px;
}

.text-banner--blue  .text-banner__cta { color: #fff; background: #1d4ed8; }
.text-banner--green .text-banner__cta { color: #fff; background: #16a34a; }
.text-banner--orange .text-banner__cta { color: #fff; background: #ea580c; }
.text-banner--dark  .text-banner__cta { color: #1f2937; background: #f9fafb; }
```

***

## Going further

* [TWIG reference](/dynamic-blocks/twig-reference.md) — complete variable and function documentation
* [Block controls](/dynamic-blocks/block-controls.md) — all 11 control types explained
* [save\_acpt\_block](/developers/functions/save_acpt_block.md) — create blocks programmatically via PHP