---
title: Check out a few blocks
slug: check-out-a-few-blocks
icon: 🏗️
createdAt: 2022-12-14T06:34:27.000Z
---

:::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
:::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
:::LinkArrayItem{headerType="COLOR" headerColor="#439466"}
This is the Link List
:::

:::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/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"}

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

## 📣 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();
        }
    }
}
```
:::

## 🌏 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;