Link Grid

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 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 grid type / to open archbee block menu search for link grid and click to insert choose how you want to create it manual vs auto fill link grid as you continue to write content manually in link grid, the next steps are choose a header type you have tree options none docid\ z vgvwifbolvuazqd6vwm docid\ z vgvwifbolvuazqd6vwm none header color header image header add your content you can style the content however you like using the or even insert other blocks, like docid\ ch1eclxgmlpa xazawy6u docid\ ajpn6hemcswfb9rr4hdhz docid\ d02 vq5gnbt sueqotq3g docid\ c sjub ir1v0j8c bksmc docid\ yuthnhc9mnprzrtwxpb4l docid\ t1ky085lzcmkkp3h9eba docid\ mfibzf9k ya8z3ldzq37v 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 click on the header type dropdown button and select color click on the change color and select your preferred color any changes made will be saved automatically 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 the header type dropdown button and select image click on the add image button choose your image any changes made will be saved automatically 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 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 example below is an example from our documentation showing link grid auto fill used in docid\ ejegs visaok25 lby1x0 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 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 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 link view of link grid itemscard view of link grid items card details for card display, the image, title, and description are automatically pulled from the document’s 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 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 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 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 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 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 to clarify, the primary content or logo should be positioned in this designated area please find below a live demo how look the cover image and its behavior markdown here's how to create a tab in your document using markdown code create the link grid start with the link array line add a link card each link grid 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 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 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 \<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 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