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

# 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](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)[Or go home](https://95a1408e.head-start.pages.dev/api/content/en.md)

## Action block inside a Text Block

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

## Action block as a Body Block

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

## Action Block in a Text Image Block

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

![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](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

### Action Block in a Page Partial Block Body

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

## Action Block with 2 Internal Links set to Primary

The second one should render as a secondary action instead.

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

## Primary and Default action

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

## Secondary and Default action

[Try our demos](https://95a1408e.head-start.pages.dev/api/content/en/demos.md)[Read the docs](https://95a1408e.head-start.pages.dev/api/content/en/documentation.md)

## 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!)