> ## Documentation Index > Fetch the complete documentation index at: https://sidedish.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Layout Components > Mix and match these building blocks to build your pages ## All items All items share these properties: CSS class name to enable styling Connect to a dynamic field of a product. **Only relevant for product pages.** If the dynamic field is not set, use this as the default value. If the dynamic field is empty, don't show the item, but show this instead. ### Stack Represents a container `
` and is used as a parent for other items. The items to be rendered inside the stack. Whether to hide the stack when a search is made. Whether to hide the stack when the user is not authenticated. Whether to show the stack only when the user has purchased the product or only when the user has not made a purchase. **Only relevant for product pages.** Only show the stack when data with this key was transferred as part of a purchase. **Only relevant for product pages.** Only show if the dynamic field of this key is set. **Only relevant for product pages.** ### Text Renders text The text to be rendered. Required only if `field` is not set. ### HTML Represents HTML Placeholder text for the search bar. Required only if `field` is not set. ### Image Renders an image The URL of the image. Required only if `field` is not set. The alt text of the image. The height of the image, in pixels. The width of the image, in pixels. ### Video Renders a video player The URL of the video. Required only if `field` is not set. The alt text of the video. The URL of the poster image. Whether to autoplay the video. Autoplay is only allowed when muted. Whether to loop the video. The height of the video, in pixels. The width of the video, in pixels. ### Link Represents a link The text to be rendered. Required only if `field` is not set. The url to link. Required only if `field` is not set. The target of the link. The icon to be rendered next to the text. Use from the lucide icon library ([https://lucide.dev/icons](https://lucide.dev/icons)) - like LuBox ### List Item Represents a value of an item in a list. Can only be used with a dynamic field of type `List`. ### Gallery Represents a gallery of images. The items, either image or video. Required only if `field` is not set. CSS class name to enable styling CSS class name to enable styling The height of the thumbnails, in pixels. Required for optimization purposes. The width of the thumbnails, in pixels. Required for optimization purposes. Wether to render captions for the items. CSS class name to enable styling Wether to render controls for carousel. ### Iterator Iterates over a list of items. Can only be used with a dynamic field of array. Item type. How to render the items. Any props to pass to the item. Whether to limit the number of items to show. ### Toggle Represents a toggle. ### Search bar Represents a search bar. Placeholder text for the search bar. CSS class names to enable styling Object with these keys: `form`, `input`, `reset`, `submit`, `submitIcon`, `resetIcon`, `loadingIndicator`. ### Search results Displays the search results. Number of columns to show. CSS class name to enable styling Number of results to show per page. ### Products Renders a predefined list of products. ### Product card Renders a product card. ### Filter option by collection(any including category, keywords) / by custom field / by other fields view in links, dropwdown, allow multiple ### Tabs Renders tabs, that the user can navigate between. ### Accordion Renders an accordion like component, with header and hidden content that toggles on click. ### Reviews box Renders a dynamic content of reviews. **Only relevant for product pages.**