--- title: Link Grid slug: docs/link-grid docTags: createdAt: 2024-07-24T07:41:15.178Z --- ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png) Link Grid 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 ::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"} :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-star"} **Highlight key information** Create attention-grabbing cards for important announcements or updates. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-file-pen"} **Showcase related content** Link to additional resources, articles, or products. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-folder-tree"} **Create a visually appealing directory** Organize information into clickable cards for easy navigation. ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-arrow-pointer"} **Enhance user experience** Provide a clear and interactive way to guide users through your content. ::: :::: ## How to create a Link Grid ::::WorkflowBlock :::WorkflowBlockItem Type `/` to open **Archbee Block** menu ::: :::WorkflowBlockItem Search for **Link Grid** and click to insert ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png) ::: :::WorkflowBlockItem Choose how you want to create it. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png) ::: :::: ## Manual vs. Auto-fill Link Grid ::::::::Tabs :::::::Tab{title="Manual Link Grid"} As you continue to write content manually in Link Grid, the next steps are: ::::::WorkflowBlock :::::WorkflowBlockItem Choose a header type. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png) You have three options: - None - [Color](docId\:Z_VgvWiFBolvUazqD6vWM) - [Image](docId\:Z_VgvWiFBolvUazqD6vWM) ::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"} :::LinkArrayItem **None** header ::: :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} **Color** header ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} **Image** header ::: :::: ::::: :::WorkflowBlockItem Add your content. You can style the content however you like using the [WYSIWYG Menu](docId\:WBvFMF8cfYoJgkqNrJVIG) or even insert other blocks, like: - [Headings](docId\:CH1EclxGmlPa-XaZAwY6u) - [Expandable Headings](docId\:aJpn6HeMcswfb9RR4hDHZ) - [Lists](docId\:D02_VQ5GNbt-SUeqoTQ3g) - [Callout](docId\:c-sJUb-iR1V0j8c_BKSmC) - [Horizontal Divider](docId\:YUthnHc9mNprZRTwXPB4L) - [File](docId\:t1Ky085LzcMKkp3H9EBA_) - [Image](docId\:MfIBZf9K-Ya8z3ldzQ37V) - [Video](docId\:B2Ip7DJZj3gHcRxc42rIL) ::: :::::: ### 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 **Header Type **:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} dropdown button and select **Color** ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" darkWidth="1806" darkHeight="962" showCaption="false"} ::: :::WorkflowBlockItem Click on the **Change Color **and select your preferred color. Any changes made will be saved automatically. ::: :::: ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" darkWidth="1688" darkHeight="1324" showCaption="false"} ### 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 the **Header Type **:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} dropdown button and select **Image** ::: :::WorkflowBlockItem Click on the** Add Image **button ::: :::WorkflowBlockItem Choose your image. Any changes made will be saved automatically. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png) ### Layout options **Items per row **- control how many items appear on each row: - 3 items per row - 2 items per row - 1 item per row ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" darkWidth="1920" darkHeight="1160" showCaption="false"} ::::::: :::::Tab{title="Auto-fill Link Grid"} Save time and keep your documentation structure in sync by automatically populating a **Link Grid **with child documents based on a selected parent. Each item is rendered as a clickable link or card that navigates to the corresponding document. ### Choose a source Choosing a source is the first step and determines which documents will appear in the Link Grid. Select where the Link Grid should pull documents from: - **Any parent document in space** – Choose a specific document or category as the source. - **Current parent document** – Use the parent of the page you are editing. The Link Grid will include all documents directly under the selected parent. Drafts, hidden docs, permission-restricted documents, and deeper nested levels will not be included. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png) ### Example Below is an example from our documentation showing Link Grid Auto-fill used in [Embed Examples](docId\:ejEgS_viSAOk25-lby1x0). ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png) ### Layout options These options let you control the structure, order, and visual appearance of your Link Grid. After selecting a source, customize how the Link Grid is displayed. **Items per row **- control how many items appear on each row: - 3 items per row - 2 items per row - 1 item per row ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" darkWidth="1920" darkHeight="1160" showCaption="false"} **Sort options** - choose how items are ordered: - **Default** – Matches the order in the portal tree. - **Manual** – Drag and drop items to define a custom order. - **Alphabetical** – Sort A–Z or Z–A. - **Date created** – Newest first or oldest first. ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" darkWidth="1920" darkHeight="1160" showCaption="false"} **Display style** - choose how items appear in your documentation: - **Link** – A compact list, ideal for large numbers of documents. - **Card** – A visual layout with image, title, and description. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![Link view of Link Grid items](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "Link view of Link Grid items") ::: :::VerticalSplitItem ![Card view of Link Grid items](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "Card view of Link Grid items") ::: :::: :::hint{type="info"} ### Card details For **Card** display, the image, title, and description are automatically pulled from the document’s [SEO Meta Controls](docId\:E-aARn44KIsrXycjGAMZg) . You can edit these values directly in each document’s settings under **SEO Meta Controls**. See the SEO Meta Controls documentation to learn how to update images, titles, and descriptions. ::: ::::: :::::::: *** ## Image Guide ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Image Guide for Link Grid") 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\:Z_VgvWiFBolvUazqD6vWM) below, you can ensure that your content is not cut off. ### Visible Area Guide The main image has dimensions of 480px in height and 1324px in width. ::::Tabs :::Tab{title="3 items / row"} In the case of having **3 Link Grids** 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://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "Visible Area 3 Link Grids per row") ::: :::Tab{title="2 items / row"} When there are **2 Link Grids** 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 Grids per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "Visible Area 2 Link Grids per row") ::: :::Tab{title="1 item / row"} When there is only **1 Link Grid** 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 Grid per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "Visible Area 1 Link Grid per row") ::: :::: :::hint{type="info"} To clarify, the primary content or logo should be positioned in this designated area. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "content positioning") ::: Please find below a live demo how look the cover image and its behavior. ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"} ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"} ::: :::: ## Markdown Here's how to create a tab in your document using markdown code: :::::WorkflowBlock :::WorkflowBlockItem **Create the Link Grid** Start with the `::::link-array` line. ::: :::WorkflowBlockItem **Add a link card** Each Link Grid 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{attributes="[object Object]" contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"} - 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](docId:9aaCRqJMq9JnYvzSgNOfs) page to see more markdown shortcuts for other blocks. ## Examples Examples? For a Link Grid? 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](docId\:d4gup0qqxInIgDThftqCn) ### Set link to be sticky at bottom Set your links inside of the Link Grid to be sticky at the bottom of the card. ```css ``` *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** Find other blocks** Discover new ways and blocks to create stunning and functional documentation pages. [Check out all blocks](docId:6B0VTQTVUnMP93e-SZQ2p) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** 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://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** 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. ::: ::::