Prose Components

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.

::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.

::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.

::callout
This is a `callout` with full **markdown** support.
::

::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 <NuxtLink> properties for navigation.

::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.

::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.

::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.

::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.

::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.

: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.

: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.

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

::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.

INTRASISTEMA_API_URL=https://api.intrasistema.com
INTRASISTEMA_TENANT_ID=company-xyz
INTRASISTEMA_API_KEY=intra_live_key_xxxxxxxx

export default defineEventHandler(async (event) => {
  const payload = await readBody(event)
  return { status: 'DISPATCH_CONFIRMED', order_id: payload.order_id }
})

::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 }
})
```

::