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 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 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 link blocks docid\ z vgvwifbolvuazqd6vwm link blocks docid\ z vgvwifbolvuazqd6vwm 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 headings docid\ ch1eclxgmlpa xazawy6u expandable headings old docid\ v0pyughjiscqk87fvtqgc 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 🚨 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 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 image header 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 guide 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 link blocks docid\ z vgvwifbolvuazqd6vwm 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 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 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 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) markdown 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 \## 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 list item 1 list item 2 unchecked list box checked list box check the use markdown shortcuts docid 9aacrqjmq9jnyvzsgnofs 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 custom css docid\ d4gup0qqxinigdthftqcn set link to be sticky at bottom set your links inside of the link block to be sticky at the bottom of the card \<style> ab link block content wrap ab link { position absolute; bottom 0; } \</style> find other blocks discover new ways and blocks to create stunning and functional documentation pages editor blocks docid 6b0vtqtvunmp93e szq2p 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