Link Blocks
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.
- Highlight key informationCreate attention-grabbing cards for important announcements or updates.
- Showcase related contentLink to additional resources, articles, or products.
- Create a visually appealing directoryOrganize information into clickable cards for easy navigation.
- Enhance user experienceProvide a clear and interactive way to guide users through your content.
Type / to open Archbee block menu
Search for Link Blocks and click to insert
Customize the card header in your own way! You have two options:
- Or you can to leave it empty, and in that case, we will only display the content from inside.
Solid color header
Image header
Empty header
Feel free to add your content. You can style the content however you like using the WYSIWYG Menu or even insert other blocks, like:
🚨 Limitations
You can't reareange them, so be carefull when you are creating Link Blocks (we have it on our roadmap).
You can use a color as the header to make your card more visible. You can even use code colors to match your features.
Click on the Color button
Click on the Change header area
Select your preferred color. Any changes made will be saved automatically
To manage the card header, use the following buttons:
- — go to main menu to change the header
- — remove the card
You can use an image as the header to describe the content inside the card and make it more aesthetically pleasing.
Click on Image button
Click on the + Add Image area
Choose your desired image. Any changes made will be saved automatically
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
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 below, you can ensure that your content is not cut off.
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:
- 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:
- 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:
To clarify, the primary content or logo should be positioned in this designated area.
Please find below a live demonstration of the cover image and its behavior.
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)
Here's how to create a tab in your document using markdown code:
Create the link block Start with the ::::link-array line.
Add a link card Each link block content goes between :::link-array-item and ::: markers.
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.
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"
Add content inside of your link card.
🚨 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.
Here is the result:
- list item 1
- list item 2
unchecked list box
checked list box
Check the Use Markdown shortcuts page to see more markdown shortcuts for other blocks.
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.
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.
Set your links inside of the Link Block to be sticky at the bottom of the card.
Find other blocks
Discover new ways and blocks to create stunning and functional documentation pages.
Need help? ⬇️
Use the blue chat bubble from bottom right corner.
Or try AI Chat (from search box) for quick answers.
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.
