---
title: "Action Block Demo"
description: "Base setup on top of headless services to help you get started quickly"
language: "English"
url: "https://head-start.pages.dev/en/demos/action-block-demo/"
---

Copy page

* [Open in Claude ](https://claude.ai/new?q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Faction-block-demo%2F+and+explain+it+to+me.)
* [Open in ChatGPT ](https://chatgpt.com/?hints=search\&q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Faction-block-demo%2F+and+explain+it+to+me.)

# Action Block Demo

!Note: this piece of documentation is auto-generated from [blocks/ActionBlock/README.md](https://github.com/voorhoede/head-start/tree/main/src/blocks/ActionBlock/README.md).

**Renders a group of actions within a styleable container with a specific style per action (primary, secondary or default).**

## Actions in 3 styles: Primary, Secondary and Default

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)[Or go home](/en/)

## Action block inside a Text Block

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

## Action block as a Body Block

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

## Action Block in a Text Image Block

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

![Head Start](https://www.datocms-assets.com/145765/1730394116-head-start-cover.jpg?auto=format%2Ccompress\&q=80\&w=1280)

## Action Block Demo Partial

### Action Block in a Text block in a Page Partial Block

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

### Action Block in a Page Partial Block Body

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

## Action Block with 2 Internal Links set to Primary

The second one should render as a secondary action instead.

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

## Primary and Default action

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

## Secondary and Default action

[Try our demos](/en/demos/)[Read the docs](/en/documentation/)

## Action block with External Links

[Meet us here](https://www.voorhoede.nl/)[Meet us there](https://www.voorhoede.nl/)

## Action block with Email Links

[Email us](mailto:post@voorhoede.nl)[Email us (+ subject)](mailto:post@voorhoede.nl?subject=Example%20subject)[Email us (+ subject & body)](mailto:post@voorhoede.nl?subject=Example%20subject\&body=And%20a%20short%0Amultiline%0Atext%20body)

## Action block with Phone Links

### Action: Call

[Call us](tel:+31202610954)

### Action: Text (SMS)

[Send SMS (no text)](sms:+31202610954)[Send SMS with text](sms:+31202610954?body=Hello%20World!)

### Action: WhatsApp

[Chat on Whatsapp](https://wa.me/31202610954)[Chat with prepared text](https://wa.me/31202610954?text=Hello%20World!)