Panels & Cards - X-Cart Admin UI Kit

Basic Panel

Standard content container

Panel Title

This is the panel body content. Use panels to group related content and provide visual separation.

<div class="xcart-panel">
    <div class="xcart-panel-header">
        <h4 class="xcart-panel-title">Panel Title</h4>
    </div>
    <div class="xcart-panel-body">
        Panel content...
    </div>
</div>

Panel with Footer

Panel with action buttons in footer

Settings

API Endpoint

Enable sync

<div class="xcart-panel">
    <div class="xcart-panel-header">...</div>
    <div class="xcart-panel-body">...</div>
    <div class="xcart-panel-footer">
        <button class="xcart-btn xcart-btn-link">Cancel</button>
        <button class="xcart-btn xcart-btn-primary">Save</button>
    </div>
</div>

Collapsible Panel

Panel that can be expanded/collapsed

Advanced Settings

Advanced configuration options go here...

Debug Options (Collapsed)

Metric Cards

Dashboard statistics display

1,234

Total Orders

1,180

Synced Orders

42

Pending

12

Failed

<div class="xcart-metric-card">
    <div class="xcart-metric-value" style="color: #3498db;">1,234</div>
    <div class="xcart-metric-label">Total Orders</div>
</div>

Metric Cards with Icons

Statistics with visual icons

95.6%

Sync Success Rate

2.3s

Avg Sync Time

Last 5min

Last Sync

Info Card

Contextual information display

Acumatica Connection

Connected to production.acumatica.com

Company: MYCOMPANY | Branch: MAIN

Status Cards

Connection and sync status display

Connected

Acumatica ERP

https://acumatica.example.com

Disconnected

Payment Gateway

Connection timeout

Card Grid

Multiple cards in grid layout

Orders

Manage and sync orders to Acumatica

View Orders

Customers

Sync customer data with Acumatica

View Customers

Products

Import products from Acumatica

View Products

CSS Classes Reference

Class	Description
`.xcart-panel`	Base panel container
`.xcart-panel-header`	Panel header section
`.xcart-panel-title`	Panel title text
`.xcart-panel-body`	Panel content area
`.xcart-panel-footer`	Panel footer with actions
`.xcart-panel-collapsible`	Collapsible panel modifier
`.xcart-metric-card`	Statistics card
`.xcart-metric-value`	Large metric number
`.xcart-metric-label`	Metric description
`.xcart-info-card`	Information display card
`.xcart-status-card`	Status indicator card