Link grids
5 min
link grid docid\ z vgvwifbolvuazqd6vwm blocks organize content into responsive card layouts they are useful for creating landing pages, navigation hubs, documentation indexes, and collections of related resources syntax you can add this component using either markdown or mdx \ linkarray{contentsource="custom" itemsperrow="3"} \ linkarrayitem{headertype="color" headercolor="#hex"} card content \ \ \<linkarray contentsource="custom" itemsperrow="3"> \<linkarrayitem headertype="color" headercolor="#2166ae"> card content \</linkarrayitem> \</linkarray> link grid cards support three header styles no header for a simple card layout color , using the headercolor property image , using the headerimage property the itemsperrow property controls how many cards are displayed on each row mdx example the following example demonstrates the three available card styles plain cards \<linkarray contentsource="custom" itemsperrow="3"> \<linkarrayitem> getting started learn the basics of setting up your documentation project \</linkarrayitem> \<linkarrayitem> configuration customize every aspect of your docs with `archbee json` \</linkarrayitem> \<linkarrayitem> templates choose from 4 built in templates to match your brand \</linkarrayitem> \</linkarray> colored header cards \<linkarray contentsource="custom" itemsperrow="3"> \<linkarrayitem headertype="color" headercolor="#2166ae"> api reference complete endpoint documentation with examples \</linkarrayitem> \<linkarrayitem headertype="color" headercolor="#16a34a"> guides step by step tutorials for common tasks \</linkarrayitem> \<linkarrayitem headertype="color" headercolor="#dc2626"> troubleshooting solutions to common issues and faq \</linkarrayitem> \</linkarray> image header cards \<linkarray contentsource="custom" itemsperrow="3"> \<linkarrayitem headertype="image" headerimage="https //images archbee com/k jwzranxy1td6qvlg2v6 yow4gia62kke1bvech6ix 20250910 182430 png?format=webp"> visual docs add images and media to your documentation \</linkarrayitem> \<linkarrayitem headertype="image" headerimage="https //images archbee com/k jwzranxy1td6qvlg2v6 tigukok 9dziwy l92fx 20250910 190316 png?format=webp"> code examples syntax highlighted code with copy support \</linkarrayitem> \<linkarrayitem headertype="image" headerimage="https //images archbee com/k jwzranxy1td6qvlg2v6 vjd5vtfjngji8v0mulhgv 20250910 190329 png?format=webp"> api blocks interactive api endpoint documentation \</linkarrayitem> \</linkarray>
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.