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 welcome to archbee! / / /getting started/welcome to archbee! mdhow to get started / / /getting started/how to get started mdlearn the basics / / /getting started/learn the basics md 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 three options none color #image # none header color header image header add your content you can style the content however you like using the wysiwyg menu # or even insert other blocks, like headings docid\ hfa9lt8l1maixspms jpbexpandable headings docid\ mtfalsx3qk7qdyhy0fena lists docid\ xxsww4kuag09a 25bb eicallout docid\ fxthokvc7x2q1jqe6mm1nhorizontal divider docid\ nvnt5nfpjebhgsd wocwifile docid\ tx enkfyowr13mr vq himage docid\ xffeje1mhdumozvfg3nabvideo docid\ xgwqco mrldg4uh qnz9q 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 embed examples / / /integrations/embed examples md 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 seo meta controls / / /hosted spaces/seo meta controls md 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 visible area guide # 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 use markdown shortcuts / /use markdown shortcuts md 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 / / /hosted spaces/custom css md 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 check out all blocks / /editor blocks md \&#xnan; need help? ⬇️ use the blue chat bubble from bottom right corner or try ai chat (from search box) for quick answers \&#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