> For the complete documentation index, see [llms.txt](https://docs.cffoundry.technology/cf-coding-practices/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cffoundry.technology/cf-coding-practices/developing-with-the-mura-platform/components.md). # Components ## Components We make extensive use of components to compartmentalize page content to facilitate information reuse and allow for drag-n-drop page building in Mura's inline editor. Also, because we can assign templates to components, in addition to text, graphics, etc., it allows for a uniform way for formatting information sections of the website across multiple pages. Components elements can be accessed just like page elements and, like pages, folders, etc., components can be extended with custom attributes. Finally, components can have templates (.cfm files) associated with them (optionally) to which all of these content elements are available. As previously explained above, pages, folders, etc., content is typically accessed using the Mura "Content" bean. For components, the component bean is used for retrieving a components information. For example: ``` $.component('title') //Gets the title of the component $.setDynamicContent($.component('body')) //Gets the body of the component and allows it to display mura beans within it ``` ### Component Image We often find a need to associate a primary image file with a component, just as can be done with a page or folder element. This image can then be used by the template to create a background image for the component area. By default, Mura Components do not support this feature. Mura does support images being part of the body content for the component. If we need to add the ability to associated a primary image with the component that isn't part of the body, we start by extending the default component by adding a class extension in the form of an attribute set. In the attribute set we add an attribute (typically called "backgroundImage" or the such) that is a file type input. We can then access the attribute and create a URL to it as follows: ``` ``` {% hint style="info" %} NOTE: The above example includes a reference to using a custom image size of "slider". This isn't a default cropped image size created by the Mura CMS. Instead, this is a custom size defined in the "Images" section of the "Edit Site Settings" area of the Mura CMS. {% endhint %} ## --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.cffoundry.technology/cf-coding-practices/developing-with-the-mura-platform/components.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.