Reference: Layout blocks

Blocks are a series of components that can be combined to create visually rich and compellingly interactive messages.

Read our guide to building block layouts to learn where and how to use each of these components. You can include up to 50 blocks in each message, and 100 blocks in modals or home tabs.

The lists of fields and values below describe the JSON that apps can use to generate each block:

Section Block

Available in surfaces: Modals Messages Home tabs

A section is one of the most flexible blocks available - it can be used as a simple text block, in combination with text fields, or side-by-side with any of the available block elements.

Fields

Examples

A simple text section block:

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "A message *with some bold text* and _some italicized text_."
  }
}

View this block

A section block containing text fields:

{
  "type": "section",
  "text": {
    "text": "A message *with some bold text* and _some italicized text_.",
    "type": "mrkdwn"
  },
  "fields": [
    {
      "type": "mrkdwn",
      "text": "High"
    },
    {
      "type": "plain_text",
      "emoji": true,
      "text": "String"
    }
  ]
}

View this block

A section block containing a datepicker element:

{
  "type": "section",
  "text": {
    "text": "*Sally* has requested you set the deadline for the Nano launch project",
    "type": "mrkdwn"
  },
  "accessory": {
    "type": "datepicker",
    "action_id": "datepicker123",
    "initial_date": "1990-04-28",
    "placeholder": {
      "type": "plain_text",
      "text": "Select a date"
    }
  }
}

View this block

Divider Block

Available in surfaces: Modals Messages Home tabs

A content divider, like an <hr>, to split up different blocks inside of a message. The divider block is nice and neat, requiring only a type.

Fields

Example

{
  "type": "divider"
}

View this block

Image Block

Available in surfaces: Modals Messages Home tabs

A simple image block, designed to make those cat photos really pop.

Fields

Example

{
  "type": "image",
  "title": {
    "type": "plain_text",
    "text": "Please enjoy this photo of a kitten"
  },
  "block_id": "image4",
  "image_url": "http://placekitten.com/500/500",
  "alt_text": "An incredibly cute kitten."
}

View this block

Actions Block

Available in surfaces: Modals Messages Home tabs

A block that is used to hold interactive elements.

Fields

Examples

An actions block with a select menu and a button:

{
  "type": "actions",
  "block_id": "actions1",
  "elements": [
    {
      "type": "static_select",
      "placeholder":{
          "type": "plain_text",
          "text": "Which witch is the witchiest witch?"
      },
      "action_id": "select_2",
      "options": [
        {
          "text": {
              "type": "plain_text",
              "text": "Matilda"
          },
          "value": "matilda"
        },
        {
          "text": {
              "type": "plain_text",
              "text": "Glinda"
          },
          "value": "glinda"
        },
        {
          "text": {
              "type": "plain_text",
              "text": "Granny Weatherwax"
          },
          "value": "grannyWeatherwax"
        },
        {
          "text": {
              "type": "plain_text",
              "text": "Hermione"
          },
          "value": "hermione"
        }
      ]
    },
    {
      "type": "button",
      "text": {
          "type": "plain_text",
          "text": "Cancel"
      },
      "value": "cancel",
      "action_id": "button_1"
    }
  ]
}

View this block

An actions block with a datepicker, an overflow, and a button:

{
  "type": "actions",
  "block_id": "actionblock789",
  "elements": [
    {
      "type": "datepicker",
      "action_id": "datepicker123",
      "initial_date": "1990-04-28",
      "placeholder": {
        "type": "plain_text",
        "text": "Select a date"
      }
    },
    {
      "type": "overflow",
      "options": [
        {
          "text": {
            "type": "plain_text",
            "text": "*this is plain_text text*"
          },
          "value": "value-0"
        },
        {
          "text": {
            "type": "plain_text",
            "text": "*this is plain_text text*"
          },
          "value": "value-1"
        },
        {
          "text": {
            "type": "plain_text",
            "text": "*this is plain_text text*"
          },
          "value": "value-2"
        },
        {
          "text": {
            "type": "plain_text",
            "text": "*this is plain_text text*"
          },
          "value": "value-3"
        },
        {
          "text": {
            "type": "plain_text",
            "text": "*this is plain_text text*"
          },
          "value": "value-4"
        }
      ],
      "action_id": "overflow"
    },
    {
      "type": "button",
      "text": {
        "type": "plain_text",
        "text": "Click Me"
      },
      "value": "click_me_123",
      "action_id": "button"
    }
  ]
}

View this block

Context Block

Available in surfaces: Modals Messages Home tabs

Displays message context, which can include both images and text.

Fields

Example

{
  "type": "context",
  "elements": [
    {
      "type": "image",
      "image_url": "https://image.freepik.com/free-photo/red-drawing-pin_1156-445.jpg",
      "alt_text": "images"
    },
    {
      "type": "mrkdwn",
      "text": "Location: **Dogpatch**"
    }
  ]
}

View this block

Input block

Available in surfaces: Modals

A block that collects information from users - it can hold a plain-text input element, a select menu element, a multi-select menu element, or a datepicker.

Read our guide to using modals to learn how input blocks pass information to your app.

Fields

File Block

Available in surfaces: Messages

Displays a remote file.

Fields

Example

{
  "type": "file",
  "external_id": "ABCD1",
  "source": "remote",
}