# Prose Components > Components to help you structure your content. ### Accordion Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way. div]:*:my-0\"]">

Tenant access is managed through your corporate domain administrator. Once provisioned in the central directory, permissions synchronize immediately across the Unified Login portal.

Verify that your point-of-sale digital certificate is active in the Billing settings. If the tax authority service is experiencing delays, invoices are queued automatically for retry.

#undefined ```mdc ::accordion :::accordion-item{label="How do I request access to an additional tenant or warehouse module?" icon="i-lucide-circle-help"} Tenant access is managed through your corporate domain administrator. Once provisioned in the central directory, permissions synchronize immediately across the Unified Login portal. ::: :::accordion-item{label="What should I do if a fiscal invoice authorization (CAE) fails?" icon="i-lucide-circle-help"} Verify that your point-of-sale digital certificate is active in the Billing settings. If the tax authority service is experiencing delays, invoices are queued automatically for retry. ::: :: ``` ### Badge Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content. **v3.0.0-alpha.10** #undefined ```mdc ::badge **v3.0.0-alpha.10** :: ``` ### Callout Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out. Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles. div]:*:my-0\",\"[&>div]:*:w-full\"]"> This is a `callout` with full **markdown** support. #undefined ```mdc ::callout This is a `callout` with full **markdown** support. :: ```

Here's some additional information for you. Here's a helpful suggestion. Be careful with this action as it might have unexpected results. This action cannot be undone.

#undefined ```mdc ::note Here's some additional information. :: ::tip Here's a helpful suggestion. :: ::warning Be careful with this action as it might have unexpected results. :: ::caution This action cannot be undone. :: ``` ### Card Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers. Customize with `title`, `icon`, and `color` props. Cards can also act as links using `` properties for navigation. div]:*:my-0\",\"[&>div]:*:w-full\"]"> Omnichannel marketplace orders and courier labels routing. #undefined ```mdc ::card --- title: Order Management (OMS) icon: i-lucide-shopping-cart to: /categories/general --- Omnichannel marketplace orders and courier labels routing. :: ``` ### CardGroup Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid. Omnichannel marketplace sync and automated dispatching. Alphanumeric bin locations, picking waves, and audits. Electronic invoice emission and CAE authorization. Idempotent order injections and ERP synchronization. #undefined ```mdc ::card-group ::card --- title: Order Management (OMS) icon: i-lucide-shopping-cart to: /categories/general --- Omnichannel marketplace sync and automated dispatching. :: ::card --- title: Warehouse & Inventory (WMS) icon: i-lucide-boxes to: /categories/general --- Alphanumeric bin locations, picking waves, and audits. :: ::card --- title: Billing & Fiscal Connectors icon: i-lucide-receipt to: /categories/general --- Electronic invoice emission and CAE authorization. :: ::card --- title: APIs & Webhooks icon: i-lucide-cpu to: /categories/general --- Idempotent order injections and ERP synchronization. :: :: ``` ### Collapsible Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information. div]:*:w-full\"]"> | Prop | Default | Type | | ------- | --------- | -------- | | `name` | | `string` | | `size` | `md` | `string` | | `color` | `neutral` | `string` | #undefined ```mdc ::collapsible | Prop | Default | Type | |---------|-----------|--------------------------| | `name` | | `string`{lang="ts-type"} | | `size` | `md` | `string`{lang="ts-type"} | | `color` | `neutral` | `string`{lang="ts-type"} | :: ``` ### Field Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options. The `description` can be set as prop or in the default slot with full **markdown** support. #undefined ```mdc ::field{name="name" type="string" required} The `description` can be set as prop or in the default slot with full **markdown** support. :: ``` ### FieldGroup Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties. Default to `false` - Enables analytics for your project (coming soon). Default to `false` - Enables blob storage to store static assets, such as images, videos and more. Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` Default to `false` - Enables SQL database to store your application's data. #undefined ```mdc ::field-group ::field{name="analytics" type="boolean"} Default to `false` - Enables analytics for your project (coming soon). :: ::field{name="blob" type="boolean"} Default to `false` - Enables blob storage to store static assets, such as images, videos and more. :: ::field{name="cache" type="boolean"} Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` :: ::field{name="database" type="boolean"} Default to `false` - Enables SQL database to store your application's data. :: :: ``` ### Icon Use `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation. #undefined ```mdc :icon{name="i-simple-icons-nuxtdotjs"} ``` ### Kbd Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references. div]:*:my-0\"]"> ` ` #undefined ```mdc :kbd{value="meta"} :kbd{value="K"} ``` ### Tabs Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization. div]:*:my-0\"]">

```mdc ::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :: ```

Lorem velit voluptate ex reprehenderit ullamco et culpa.

#undefined ```mdc ::tabs :::tabs-item{label="Code" icon="i-lucide-code"} ```mdc ::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :: ``` ::: :::tabs-item{label="Preview" icon="i-lucide-eye"} ::::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :::: ::: :: ``` ### Steps Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials. Set the `level` prop to define the heading level to include in the step-by-step guide. div]:*:w-full\"]"> #### Configure your environment credentials ```bash [.env] INTRASISTEMA_API_URL=https://api.intrasistema.com INTRASISTEMA_TENANT_ID=company-xyz INTRASISTEMA_API_KEY=intra_live_key_xxxxxxxx ``` #### Initialize the webhook listener ```ts [server/api/dispatch.post.ts] export default defineEventHandler(async (event) => { const payload = await readBody(event) return { status: 'DISPATCH_CONFIRMED', order_id: payload.order_id } }) ``` #undefined ```mdc ::steps{level="4"} #### Configure your environment credentials ```bash [.env] INTRASISTEMA_API_URL=https://api.intrasistema.com INTRASISTEMA_TENANT_ID=company-xyz INTRASISTEMA_API_KEY=intra_live_key_xxxxxxxx ``` #### Initialize the webhook listener ```ts [server/api/dispatch.post.ts] export default defineEventHandler(async (event) => { const payload = await readBody(event) return { status: 'DISPATCH_CONFIRMED', order_id: payload.order_id } }) ``` :: ```