Skip to main content

​
Basic Example

{
  "type": "callout",
  "variant": "info",
  "color": "sample-color",
  "icon": {},
  "title": "sample-title",
  "elements": [],
  "margin": "small 0"
}

​
Live Example

Example Code
[
  {
    "type": "callout",
    "variant": "info",
    "title": "What You'll Learn",
    "elements": [
      {
        "type": "bullet_list",
        "items": [
          {
            "type": "listitem",
            "text": "HTML and CSS fundamentals"
          },
          {
            "type": "listitem",
            "text": "JavaScript programming concepts"
          },
          {
            "type": "listitem",
            "text": "Responsive web design"
          }
        ]
      }
    ]
  }
]

​
Properties

​
type
string
required
Identifies this as a callout blockMust be callout
​
variant
string
default:"info"
required
The visual style variant of the calloutAllowed values: info, success, warning, error, note
​
color
string
required
Optional custom color for the callout
​
icon
object
required
Icon configuration for the callout
​
title
string
required
Optional title text for the callout
​
elements
array
required
Array of BlockKit elements to render inside the callout
​
margin
string
default:"small 0"
required
Margin spacing around the callout block

​
Usage Notes

  • This element is part of the BlockKit system for building dynamic user interfaces
  • All properties marked as (required) must be included in your JSON structure
  • Optional properties can be omitted and will use their default values when applicable