--- title: Link Blocks slug: archbee-docs/link-blocks docTags: createdAt: 2024-07-24T07:41:15.000Z --- ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-8YxT2IFtVaZfrl_P5GBNc-20240821-134128.png) Link Block is an element that combines the visual appeal of a card with the functionality of a clickable item. It's perfect for highlighting important information or showcasing related resources. ## When to use it - **Highlight key information** Create attention-grabbing cards for important announcements or updates. - **Showcase related content** Link to additional resources, articles, or products. - **Create a visually appealing directory** Organize information into clickable cards for easy navigation. - **Enhance user experience** Provide a clear and interactive way to guide users through your content. ## How to create a Link Block ::::::WorkflowBlock :::WorkflowBlockItem Type `/` to open Archbee block menu ::: :::WorkflowBlockItem Search for **Link Blocks** and click to insert ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-z6qNSbQEG69o6pDPyAjpc-20240820-145854.png "Add Link Blocks") ::: :::::WorkflowBlockItem Customize the card header in your own way! You have two options: - [Solid Color](docId\:HGrVGF0SidjsxxdOEgY-U) - [Image](docId\:HGrVGF0SidjsxxdOEgY-U) - Or you can to leave it empty, and in that case, we will only display the content from inside. ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} Solid color header ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} Image header ::: :::LinkArrayItem Empty header ::: :::: ::::: :::WorkflowBlockItem Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](#) or even insert other blocks, like: - [Headings](docId\:HJdVQeZ0tJqfx88wgF7xN) - [Expandable headings - OLD](#) - [Lists](docId\:aRskGvFrwY6-wF6cKKC4f) - [Callout](docId\:u_-mnLN9zIkGr4dgRPnHj) - [Horizontal Divider](docId:-qJ6Yd_DxXPXUtHngNvM6) - [File](docId:2Fz6hcIMG9kghdshL630-) - [Image](docId\:C3qLCZS4vLdWK6dONt8Mh) - [Video](docId\:WpJbOyKMAOIklvJJvkL03) ::: :::::: :::hint{type="danger"} 🚨 **Limitations** You can't reareange them, so be carefull when you are creating Link Blocks (we have it on our roadmap). ::: ## Solid color header You can use a color as the header to make your card more visible. You can even use code colors to match your features. ::::WorkflowBlock :::WorkflowBlockItem Click on the \&#xNAN;** Color** button ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-zTONygH44NjKKypayZ4jB-20240820-150443.png "Choose color") ::: :::WorkflowBlockItem Click on the **Change header **area ::: :::WorkflowBlockItem Select your preferred color. Any changes made will be saved automatically ::: :::: ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-lVZm7wfdSGVfYvnkdh5gN-20240821-081544.png "Change header") To manage the card header, use the following buttons: - — go to main menu to change the header - — remove the card ## Image header You can use an image as the header to describe the content inside the card and make it more aesthetically pleasing. ::::WorkflowBlock :::WorkflowBlockItem Click on \&#xNAN;** Image **button ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-oTpE0eUCeT_Ua0E4PmyRZ-20240821-082042.png "select image header") ::: :::WorkflowBlockItem Click on the** + Add Image **area ::: :::WorkflowBlockItem Choose your desired image. Any changes made will be saved automatically ::: :::: ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-4Nlkug9YBue7jiKXV01hz-20240821-082641.png "Add image to the link block") To manage the card, use the following buttons: - — go to main menu to change the header - — remove the card - — choose/reupload another image - — delete the image ### Guide ![](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Image Guide for Link Block") To ensure that your content is displayed properly, we recommend to create an image with a **height of 480px** and a **width of 1324px**. By following the [visible area guide](docId\:HGrVGF0SidjsxxdOEgY-U) below, you can ensure that your content is not cut off. ### Visible Area The main image has dimensions of 480px in height and 1324px in width. - In the case of having **3 link blocks** per row, the visible area will be **480px** in **height** and **860px in width**. This visible area will be centered within the main dimensions. Please refer to the image below for a visual representation: ![](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "Visible Area 3 link blocks per row") - When there are **2 link blocks** per row, the visible area will be determined by the main dimensions. To provide a better understanding, please refer to the image below: ![2 link blocks per row](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "Visible Area 2 link blocks per row") - When there is only **1 link block** per row, the visible area will be centered within the main dimensions. Specifically, it will have a width of 1324px and a height of 234px. To get a better understanding, please refer to the image below: ![Link block per row](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "Visible Area 1 link block per row") To clarify, the primary content or logo should be positioned in this designated area. ![](https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "content positioning") Please find below a live demonstration of the cover image and its behavior. # this is a heading 1 ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"} ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"} ::: :::LinkArrayItem ::: :::: :::hint{type="info"} **PRO TIP 😎** To make link block in the Archbee way, leave the header emplty and insert an image block inside of a link block. You will love it! 😉 ( 🚨 The downside is that clicking on an image will display a glitch for a second as the image viewer loads) ::: ## Markdown Here's how to create a tab in your document using markdown code: :::::WorkflowBlock :::WorkflowBlockItem **Create the link block** Start with the `::::link-array` line. ::: :::WorkflowBlockItem **Add a link card** Each link block content goes between `:::link-array-item` and `:::` markers. ::: :::WorkflowBlockItem **Choose the **`headerType` You have two options for your header: - `IMAGE`**:** This displays an image as your header background. - `COLOR`**:** This allows you to use a solid color for your header. ::: :::WorkflowBlockItem **Add the appropriate attribute** For `IMAGE` headers: - Add the image URL as the value for the `headerImage` attribute. - Example: `headerImage="https://placehold.co/600x400")` For `COLOR` headers: - Define the desired color using a hex code for the `headerColor` attribute. - Example: `headerColor="#ff00FF"` ::: ::::WorkflowBlockItem Add content inside of your link card. :::hint{type="warning"} **🚨 Attention!** When using the triple colon (`:::`) syntax to create a nested markdown element, ensure that each parent element above it also has an extra colon (`:`) before its opening triple colon. ::: :::: ::::: ```markdown ## Link Array - Example ::::link-array :::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"} - list item 1 - list item 2 ::: :::link-array-item{headerType="COLOR" headerColor="#ff00FF"} - [ ] unchecked list box - [x] checked list box ::: :::: ``` Here is the result: ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/HCIek7I0UxvyNHQ0EFzVX-jN_ub-zPpT4q3Fkc-DUqi-20250218-123720.svg"} - list item 1 - list item 2 ::: :::LinkArrayItem{attributes="[object Object]" headerType="COLOR" headerColor="#ff00FF"} - [ ] unchecked list box - [x] checked list box ::: :::: Check the [Use Markdown shortcuts](#) page to see more markdown shortcuts for other blocks. ## Examples Examples? For a link block? Dude, it's like finding water in the ocean. You can't avoid it. Our docs are swimming with 'em! On this page there are 8 of them, plus images. ## Custom CSS Throughout our extensive experience, we have been dedicated to helping customers personalize their documentation according to their unique preferences. Additionally, we have offered valuable assistance that we believe will also be of great benefit to you in crafting exceptional documentation for your product. [See how Custom CSS works](#) ### Set link to be sticky at bottom Set your links inside of the Link Block to be sticky at the bottom of the card. ```css ``` *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} ** Find other blocks** Discover new ways and blocks to create stunning and functional documentation pages. [Check out all blocks](#) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} \&#xNAN;** Need help? ⬇️** Use the **blue** **chat bubble **from bottom right corner. Or try **AI Chat** (from search box) for quick answers. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} \&#xNAN;** Your opinion matters** Use the below feedback form, anonymously. Or ask a question in **Q\&A section** and our team or AI will give you a solution. ::: ::::