---
title: Check out a few blocks
slug: cloudfiles/check-out-a-few-blocks
description: Learn about the various types of blocks in Archbee, such as Basic, Media, Developer, and Embed blocks, and discover how to effectively utilize them for presenting content, creating navigation menus, and customizing headings. Explore the use of tabs, callo
icon: 🏗️
createdAt: 2026-09-29T15:34:43.363Z
---

:::hint{type="info"}
Archbee provides 4 types of blocks: **Basic, Media, Developer, and Embed**

For a better view of this page, publish it (see how to do this in **Publish your portal **guide)
:::

# 🧱 Check out some of our Basic blocks

::::::ExpandableHeading
## 🖱️Click here to expand/collapse the heading



:::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
You can use this **Vertical Split **to present content side by side.











On the right, you have a **Button. **Click the settings icon on the button to select where you want it to navigate.
:::

::::VerticalSplitItem
| And you can also add      |
| ------------------------- |
| other **blocks**          |
| inside the vertical split |





:::CtaButton{label="Button" openInNewTab="true"}

:::










::::
:::::
::::::

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem{headerType="COLOR" headerColor="#439466"}
This is the Link List
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.qa.archbee.co/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9Z-IdYFgZ3mspG9jA_Lqx_fileexamplejpg500kb.jpeg"}
You can use it to create navigation menus
:::

:::LinkArrayItem
And you can customize the heading by color, image or just leave it blank
:::
::::

:::DropList
```json
{
  "columns": [
    {
      "id": "1",
      "name": "Doing ",
      "items": [
        {
          "id": "SW5Z7mmfK5cda7vSrT9eo",
          "content": "If you want to organise your tasks"
        },
        {
          "id": "svWas9lGJCDshcgJDE_Gm",
          "content": "You can use the Mini Tasks"
        }
      ]
    },
    {
      "id": "2",
      "name": "Testing",
      "items": [
        {
          "id": "ucwGIt1UV5vm697w6GNdA",
          "content": "You can create categories"
        },
        {
          "id": "7BCthBkWjat1ifHygKRAl",
          "content": "Add tasks to each category"
        }
      ]
    },
    {
      "id": "3",
      "name": "Done",
      "items": [
        {
          "id": "fyWJP8-QzFvcLimBdtGdL",
          "content": "And if you want to change the state of a task"
        },
        {
          "id": "zC-PS84P4C515XdE3uZun",
          "content": "Simply drag & drop the task to another category"
        }
      ]
    }
  ]
}
```
:::

:::::Tabs
::::Tab{title="Use tabs to display your content"}
This is the first tab.

You can also add blocks inside here:

:::hint{type="success"}
This is a nested Callout block
:::
::::

::::Tab{title="Click here to see the 2nd tab"}
:::hint{type="warning"}
Welcome to the 2nd Tab :)
:::
::::
:::::

## 📣 Need to draw attention? Use Callouts

:::hint{type="danger"}
### 🔴 Danger

Warn your readers of potential dangers when they take a particular action.
:::

:::hint{type="success"}
### 🔮 Well done!

Pat yourself on the back for reaching your documentation goals.
:::

# 🌐  We also have awesome developer blocks

## 🔌  Endpoint docs

Below is a single endpoint descriptor. Great for describing webhooks or single endpoint APIs.

## ⌨️  Code blocks

:::CodeblockTabs
```go
package main

import "fmt"
import "time"

func worker(done chan bool) {
    fmt.Print("working...")
    time.Sleep(time.Second)
    fmt.Println("done")
    done <- true
}

```

```python
# Python3 program to demonstrate 
# the use of sample() function . 
  
# import random  
import random 
  
  
# Prints list of random items of 
# length 3 from the given list. 
list1 = [1, 2, 3, 4, 5, 6]  
print("With list:", random.sample(list1, 3)) 
  
# Prints list of random items of 
# length 4 from the given string.  
string = "GeeksforGeeks"
print("With string:", random.sample(string, 4)) 
  
# Prints list of random items of 
# length 4 from the given tuple. 
tuple1 = ("ankit", "geeks", "computer", "science", 
                   "portal", "scientist", "btech") 
print("With tuple:", random.sample(tuple1, 4)) 
  
  
# Prints list of random items of 
# length 3 from the given set. 
set1 = {"a", "b", "c", "d", "e"} 
print("With set:", random.sample(set1, 3)) 
```

```csharp
/*
 * C# Program to Check Whether the Entered Year is a Leap Year or Not
 */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
namespace Program
{
    class leapyear
    {
        static void Main(string[] args)
        {
            leapyear obj = new leapyear();
            obj.readdata();
            obj.leap();
        }
        int y;
        public void readdata()
        {
            Console.WriteLine("Enter the Year in Four Digits : ");
            y = Convert.ToInt32(Console.ReadLine());
        }
        public void leap()
        {
            if ((y % 4 == 0 && y % 100 != 0) || (y % 400 == 0))
            {
                Console.WriteLine("{0} is a Leap Year", y);
            }
            else
            {
                Console.WriteLine("{0} is not a Leap Year", y);
            }
            Console.ReadLine();
        }
    }
}
```

```none
```
:::

## 🌏 API Docs

You can add OpenAPI apis by typing `(api)` or `(swagger)`. You can also add GraphiQL allowing you to edit your GraphQL endpoints. Just type `(gql)` in the editor.

## 💓 Changelogs

Need good looking changelogs?

:::Changelog{title="Version 2.1.13"}
::ChangelogItem{type="added" description="Ability to foresee the future"}

::ChangelogItem{type="fixed" description="Bug that took you too far into the past "}

::ChangelogItem{type="improved" description="Velocity of time rewind"}

::ChangelogItem{type="broken" description="Broken time forward"}

::ChangelogItem{type="knownIssue" description="You cannot stop time"}
:::

## 💡 Diagrams

Below is a [Mermaid.js diagram, markdown based](https://mermaid-js.github.io/mermaid/#/).&#x20;

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

:::hint{type="info"}
Don't forget: If you need help, we're one click away. Click the `?` icon on the bottom right-hand corner of the screen and access the Archbee <u>**[help center](#)**</u> or send a message to support.
:::

&#x20;