MediCore — Documentation

Introduction

MediCore is a clean, fully responsive admin dashboard template designed for medical clinics, hospitals, and healthcare SaaS products. Built entirely on Bootstrap 5.3 with zero jQuery dependency, it ships with 40 production-ready HTML pages and a consistent --mc-* design-token system.

📄

40 Pages

Dashboard variants, patient & doctor management, appointments, finance, auth, UI kit, and settings.

🎨

Design System

50+ CSS custom properties covering colors, spacing, radii, shadows — light & dark.

🌙

Dark Mode

Full dark theme via [data-bs-theme="dark"] with localStorage persistence.

⚡

No jQuery

Pure Vanilla JS — lightweight, fast, and dependency-free beyond Bootstrap 5.3.

📱

Fully Responsive

Mobile-first layout with collapsible sidebar, hamburger menu, and breakpoint-aware components.

🔍

Global Search

Keyboard-driven search overlay (Ctrl+K) with patient, doctor, and page search results.

What's Included

After extracting the downloaded ZIP archive, you will find the following folder structure:

medical-template-theme-setup/
│
├── index.html             ← Entry point (auto-redirects to dashboard)
├── README.md
├── CHANGELOG.md
├── LICENSE.txt
│
├── assets/
│   ├── css/
│   │   └── app.css            ← Full design system (3 300 lines)
│   ├── js/
│   │   └── app.js             ← Dark mode, sidebar, search, toasts
│   ├── img/
│   │   ├── doctor_profile_card.jpg
│   │   └── female_doctor_avatar.jpg
│   └── vendor/
│       └── remixicon/         ← Remix Icon font (eot, svg, ttf, woff, woff2)
│
├── components/            ← 24 isolated component demo pages
│   ├── accordions.html
│   ├── alerts.html
│   ├── avatars.html
│   ├── badges.html
│   ├── breadcrumbs.html
│   ├── buttons.html
│   ├── cards.html
│   ├── carousels.html
│   ├── dropdowns.html
│   ├── forms.html
│   ├── grid.html
│   ├── links.html
│   ├── list-group.html
│   ├── modals.html
│   ├── offcanvas.html
│   ├── pagination.html
│   ├── placeholders.html
│   ├── popovers.html
│   ├── progress.html
│   ├── ribbons.html
│   ├── spinners.html
│   ├── tables.html
│   ├── tabs.html
│   ├── tooltips.html
│   └── typography.html
│
├── pages/                 ← 40 full application pages
│   └── dashboard.html     ← Main dashboard (v1.0 — more pages releasing)
│
└── docs/
    └── documentation.html ← This file

Quick Start

1 · Open in a browser

MediCore is a static HTML template — no build step required. Simply open index.html in any modern browser and you will be automatically redirected to the main dashboard.

Tip: For the best local development experience, use a local server such as VS Code's Live Server extension or run npx serve . in the project root. Some browsers block cross-origin requests on file:// URLs.

2 · Link the required assets

Every page requires the following assets in its <head>:

<!-- Google Fonts —— Plus Jakarta Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Remix Icon (bundled) -->
<link href="../assets/vendor/remixicon/remixicon.css" rel="stylesheet">

<!-- MediCore Design System -->
<link href="../assets/css/app.css" rel="stylesheet">

And at the bottom of <body>:

<!-- Bootstrap 5.3 JS Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- MediCore JS -->
<script src="../assets/js/app.js"></script>

3 · Start customizing

Override any --mc-* CSS custom property in your own stylesheet to instantly retheme the entire template. See the Design Tokens section for the full token reference.

Tech Stack

🅱️

Bootstrap

v5.3.3

⚡

Vanilla JS

ES2022 · No jQuery

📊

Chart.js

v4.x (CDN)

📅

Flatpickr

Date / Time picker

📋

DataTables

Vanilla init

🔤

Plus Jakarta Sans

Google Fonts

🎨

Remix Icon

Self-hosted font

Dependency	Purpose	Delivery
Bootstrap 5.3.3	CSS grid, utilities, JS components	CDN
Plus Jakarta Sans	Primary typeface	Google Fonts CDN
Remix Icon	Icon font (1 000+ icons)	Self-hosted in `assets/vendor/`
Chart.js 4	Dashboard charts & graphs	CDN (per page)
Flatpickr	Date & time pickers	CDN (per page)
DataTables	Sortable, searchable tables	CDN (per page)

Zero build-step. MediCore requires no Node.js, no npm, no Webpack. Open and ship.

Pages (40 Total)

Dashboard 3 pages

pages/dashboard.html — Main overview

pages/dashboard-doctor.html — Doctor view

pages/dashboard-patient.html — Patient portal

Patient Management 6 pages

pages/patient-list.html

pages/patient-detail.html

pages/patient-edit.html

pages/patient-history.html

pages/patient-prescription.html

pages/patient-lab.html

Appointments 4 pages

pages/appointment-calendar.html

pages/appointment-list.html

pages/appointment-add.html

pages/appointment-detail.html

Doctors / Staff 4 pages

pages/doctor-list.html

pages/doctor-profile.html

pages/staff.html

pages/department.html

Finance 4 pages

pages/invoice-list.html

pages/invoice-detail.html

pages/payment.html

pages/income-report.html

UI Kit 8 pages

pages/ui-buttons.html

pages/ui-cards.html

pages/ui-forms.html

pages/ui-tables.html

pages/ui-modals.html

pages/ui-icons.html

pages/ui-typography.html

pages/ui-colors.html

Auth 4 pages

pages/login.html

pages/register.html

pages/forgot-password.html

pages/error.html — 404 / 500

Miscellaneous 7 pages

pages/settings.html

pages/profile.html

pages/notifications.html

pages/messages.html

pages/calendar.html

pages/license.html (EN)

pages/lisans.html (TR)

Component Library

The components/ folder contains 24 isolated demo pages — each showcasing a specific UI component in full detail. These pages share the same assets as the main template and are ideal for copying ready-to-use markup snippets.

Accordions Alerts Avatars Badges Breadcrumbs Buttons Cards Carousels Dropdowns Forms Grid Links List Group Modals Offcanvas Pagination Placeholders Popovers Progress Ribbons Spinners Tables Tabs Tooltips Typography

MediCore-specific Components

Beyond standard Bootstrap components, MediCore ships these custom UI primitives:

Component	Class / Usage	Description
Stat Card	`.stat` / `.stat-val` / `.stat-lbl`	KPI metric block with icon, value, label, and trend pill
Trend Pill	`.pill-up` / `.pill-dn` / `.pill-neu`	Colored percentage badge for metric trends
Status Badge	`.status-badge .badge-ok` etc.	Patient/appointment status (ok · warn · crit · info · neu)
Filter Tabs	`.tabs` / `.tab` / `.tab.active`	Pill-style tab switcher with optional count chip
Appointment Row	`.appt-row`	Flex row for listing appointments with inline status
Vital Box	`.vital-box`	Compact metric container for vitals / lab values
Mini Calendar	`.mini-cal` / `.mini-day`	Inline 7-column calendar grid with today/selected states
Full Calendar	`.cal-head` / `.cal-body` / `.cal-cell`	Month-view calendar with appointment chips
Patient Avatar	`.pt-avi`	Coloured initials avatar for patient listings
Search Overlay	`#search-overlay` (JS-driven)	Full-screen keyboard-navigable search (Ctrl+K)
Toast Notification	`showMedToast(type, title, msg)`	Animated toast with auto-dismiss progress bar
Avatar	`.avatar` + size/shape modifiers	Flexible avatar system (6 sizes, 3 shapes, status dots)
Card Status Stripe	`.card-status-top` / `.card-status-start`	Colored accent bar on top or left edge of cards

Layout System

MediCore uses a three-part fixed layout: a fixed sidebar, a sticky topbar, and a scrollable main content area.

<body>
  <!-- Search Overlay -->
  <div class="search-overlay" id="search-overlay">…</div>

  <!-- Mobile sidebar backdrop -->
  <div class="sb-overlay" id="sb-overlay"></div>

  <!-- Desktop collapse toggle -->
  <button class="sb-toggle" id="sb-toggle">…</button>

  <!-- Sidebar -->
  <aside class="sidebar" id="sidebar">…</aside>

  <!-- Main wrapper -->
  <div class="mc-main" id="mc-main">

    <!-- Sticky topbar -->
    <header class="topbar">…</header>

    <!-- Page content -->
    <main class="mc-content">
      <!-- Your page markup here -->
    </main>

    <!-- Footer -->
    <footer class="mc-footer">…</footer>

  </div>
</body>

CSS Variable	Default	Description
`--mc-sb-w`	`260px`	Expanded sidebar width
`--mc-sb-collapsed-w`	`68px`	Collapsed (icon-only) sidebar width
`--mc-tb-h`	`64px`	Topbar height reference (used for toggle positioning)

Sidebar

Structure

The sidebar is built from semantic grouping elements:

<aside class="sidebar" id="sidebar">

  <!-- Logo area -->
  <div class="logo-area">…</div>

  <!-- Navigation group -->
  <div class="nav-group">
    <span class="nav-lbl">Section Label</span>

    <!-- Standard nav item -->
    <a class="nav-item active" href="dashboard.html">
      <!-- Icon SVG -->
      <span class="nav-text">Dashboard</span>
      <span class="n-bdg">34</span>  <!-- optional count badge -->
    </a>

    <!-- Collapsible nav item with submenu -->
    <a class="nav-item collapsed" data-bs-toggle="collapse" href="#sub-reports">
      <span class="nav-text">Reports</span>
      <i class="ri-arrow-right-s-line menu-arrow ms-auto"></i>
    </a>
    <div class="collapse" id="sub-reports">
      <ul class="nav-sub">
        <li><a class="nav-sub-item active" href="income-report.html">Income</a></li>
      </ul>
    </div>
  </div>

  <!-- Separator line -->
  <div class="sb-sep"></div>

  <!-- Footer area (user info etc.) -->
  <div class="sb-foot">…</div>

</aside>

Collapse Behavior

Viewport	Behavior
≥ 1200px (desktop)	Always visible. Toggle button (`#sb-toggle`) collapses to icon-only (`68px`) and persists state to `localStorage`.
< 1200px (tablet / mobile)	Hidden off-screen. Hamburger button (`#hamburger`) slides it in. Dark overlay closes it on click.

Topbar

The sticky topbar stacks horizontally: hamburger (mobile) · search bar · spacer · action buttons · user pill.

<header class="topbar">

  <!-- Mobile hamburger -->
  <button class="hamburger" id="hamburger">…</button>

  <!-- Inline search bar (opens overlay) -->
  <div class="search-bar">
    <input placeholder="Search…" readonly>
  </div>

  <!-- Right actions -->
  <div class="tb-right">

    <!-- Dark-mode toggle -->
    <button class="icon-btn" id="dark-toggle">…</button>

    <!-- Notification bell -->
    <button class="icon-btn">
      <!-- SVG bell icon -->
      <span class="notif-dot"></span>  <!-- red unread indicator -->
    </button>

    <!-- User pill -->
    <div class="user-pill">
      <div class="avi">DR</div>
      <span>Dr. Reynolds</span>
    </div>

  </div>
</header>

Design Tokens

All visual values are defined as CSS custom properties on :root in assets/css/app.css. Override any token in your own stylesheet to retheme globally.

Core Tokens

Token	Light value	Dark value	Role
`--mc-primary`	`#2563EB`	`#2563EB`	Brand / interactive accent
`--mc-primary-hover`	`#1D4ED8`	`#1D4ED8`	Hover state of primary
`--mc-primary-soft`	`#EFF6FF`	`rgba(37,99,235,.14)`	Soft primary background
`--mc-bg`	`#F8FAFC`	`#0F172A`	Page background
`--mc-surface`	`#FFFFFF`	`#1E293B`	Card / panel background
`--mc-text`	`#0F172A`	`#F1F5F9`	Primary text
`--mc-text-muted`	`#64748B`	`#94A3B8`	Secondary / helper text
`--mc-text-subtle`	`#94A3B8`	`#64748B`	Placeholder / disabled text
`--mc-border`	`#E2E8F0`	`#334155`	Dividers, input borders
`--mc-sb-bg`	`#0F172A`	`#020617`	Sidebar background
`--mc-shadow`	Layered box-shadow (sm)		Card elevation
`--mc-shadow-lg`	Layered box-shadow (lg)		Modal / panel elevation

Radius Tokens

Token	Value
`--mc-radius-sm`	`6px`
`--mc-radius`	`8px`
`--mc-radius-lg`	`12px`
`--mc-radius-xl`	`16px`

Semantic Status Tokens

Token pair	State	Use case
`--mc-ok-bg / --mc-ok-text`	Success / Active	Confirmed appointments, normal vitals
`--mc-warn-bg / --mc-warn-text`	Warning / Pending	Pending payments, at-risk patients
`--mc-crit-bg / --mc-crit-text`	Critical / Danger	Overdue invoices, critical vitals
`--mc-info-bg / --mc-info-text`	Informational	New messages, general notices
`--mc-neu-bg / --mc-neu-text`	Neutral	Cancelled, on-hold, draft states

Medical Color Palette

MediCore ships 12 specialty-mapped colors as CSS custom property triplets (--mc-{name}, --mc-{name}-lt, --mc-{name}-text). Each maps to a clinical domain for semantic use in the UI.

Blue

#1e40af

Azure

#2563eb

Indigo

#4f46e5

Purple

#7c3aed

Pink

#db2777

Red

#b91c1c

Orange

#d97706

Yellow

#ca8a04

Lime

#4d7c0f

Green

#047857

Teal

#0f766e

Cyan

#0369a1

Color	Medical Domain	CSS Prefix
Blue	General / Oncology	`--mc-blue`
Azure	Primary brand	`--mc-azure`
Indigo	Neurology / Psychiatry	`--mc-indigo`
Purple	Mental health	`--mc-purple`
Pink	Maternity / Care	`--mc-pink`
Red	Emergency / Cardiology	`--mc-red`
Orange	Dental / Nutrition	`--mc-orange`
Yellow	Laboratory / Alert	`--mc-yellow`
Lime	Holistic / Herbal medicine	`--mc-lime`
Green	Pharmacy / Recovery	`--mc-green`
Teal	Surgical / Sterile	`--mc-teal`
Cyan	Dermatology / Diagnostic	`--mc-cyan`

Usage: Text, Background & Soft Utilities

<!-- Text color -->
<span class="text-teal">Surgery</span>

<!-- Solid background -->
<div class="bg-purple">Mental Health Dept</div>

<!-- Soft background (auto-sets matching text color) -->
<span class="badge bg-teal-lt">Surgical</span>

Dark Mode

Dark mode is implemented entirely through CSS custom property overrides on the [data-bs-theme="dark"] attribute on <html>. No additional stylesheets are needed — it is built into app.css.

How it works

On page load, app.js reads localStorage.getItem('mc-dark').
If the value is '1', it sets <html data-bs-theme="dark">.
The #dark-toggle button flips the state and persists to localStorage.
A global mc-theme-changed custom event fires so charts can redraw.

// Listen for theme changes in your own scripts:
window.addEventListener('mc-theme-changed', (e) => {
  const isDark = e.detail.isDark;
  // re-render chart colors, map tiles, etc.
});

Required: Every page must include a button with id="dark-toggle" in the topbar for the toggle to function. The icon is swapped automatically by app.js.

Typography

MediCore uses Plus Jakarta Sans at weights 400, 500, 600, and 700. The font is loaded via Google Fonts CDN and set as the primary font-family on body.

Element / Class	Size	Weight	Use
`.page-hdr h1`	1.1875rem	700	Page title
`.card-title`	0.9375rem	700	Card heading
`.card-subtitle`	0.75rem	400	Card sub-heading
`.stat-val`	1.875rem	800	KPI metric value
`.stat-lbl`	0.8125rem	500	KPI metric label
`.nav-item`	0.8125rem	500	Sidebar nav link
`.nav-lbl`	0.625rem	700	Sidebar section label
`.t-name`	0.875rem	600	Table primary cell
`.t-sub`	0.7rem	400	Table secondary cell

JavaScript — Dark Mode

The dark mode module is self-contained in initDarkMode() inside assets/js/app.js. It requires a button with id="dark-toggle" anywhere on the page.

// Trigger programmatically (e.g. from a settings page):
document.getElementById('dark-toggle').click();

JavaScript — Sidebar

The sidebar system requires four elements with specific IDs:

ID	Element	Purpose
`#sidebar`	`<aside>`	The sidebar itself
`#sb-overlay`	`<div>`	Mobile backdrop
`#hamburger`	`<button>`	Mobile open trigger
`#mc-main`	`<div>`	Main content wrapper
`#sb-toggle`	`<button>`	Desktop collapse toggle

Collapse state is persisted to localStorage under the key mc-sb-collapsed.

JavaScript — Search Overlay

The global search overlay is triggered by clicking the topbar search bar or pressing Ctrl+K. Navigation uses ↑↓ arrow keys and Enter to open a result. Escape closes the panel.

Required HTML elements

ID	Description
`#search-overlay`	Outer backdrop layer
`#search-input`	Text input inside the panel
`#search-body`	Results container (populated by JS)
`.search-bar`	Topbar trigger element

Extending search data

The search index lives in the SEARCH_DATA array inside initSearchOverlay(). Each entry has four fields:

{
  type:  'patient' | 'doctor' | 'page',
  title: 'Patient Name',
  sub:   'P-00892 · Hypertension',
  href:  'patient-detail.html'
}

Replace this array with a fetch() call to wire up a real API backend.

JavaScript — Toast Notifications

Call showMedToast() from anywhere in your page scripts to display an animated toast notification. The function is exposed on window so it is globally accessible.

// Signature:
showMedToast(type, title, message, duration?)

// Examples:
showMedToast('green', 'Appointment Saved', 'Patient booked for 10:30 AM.');
showMedToast('red',   'Payment Failed',    'Card was declined.', 6000);
showMedToast('orange', 'Lab Alert',        'Glucose level is elevated.');
showMedToast('blue',  'New Message',       'Dr. Kim sent you a note.');

Parameter	Type	Options	Default
`type`	string	`'blue'` · `'green'` · `'red'` · `'orange'`	—
`title`	string	Any text	—
`message`	string	Any text	—
`duration`	number	Milliseconds before auto-dismiss	`4000`

Toasts stack vertically in the top-right corner (.med-toast-container) and include a progress-bar countdown animation.

Browser Support

Browser	Minimum version	Notes
Chrome / Edge (Chromium)	90+	Fully supported
Firefox	89+	Fully supported
Safari	15+	Fully supported (CSS backdrop-filter requires 15.4)
Opera	76+	Fully supported
Internet Explorer	—	Not supported

CSS Custom Properties (CSS variables) and CSS Grid are fundamental to MediCore and require a modern browser. IE 11 is not supported.

Credits & Third-Party Resources

Resource	License	URL
Bootstrap 5.3	MIT	getbootstrap.com
Remix Icon	Apache 2.0	remixicon.com
Plus Jakarta Sans	OFL-1.1	fonts.google.com
Chart.js	MIT	chartjs.org
Flatpickr	MIT	flatpickr.js.org
DataTables	MIT	datatables.net

Changelog

v1.0.0 — June 29, 2026 Initial Release

Initial release of MediCore by Arasix UI
Bootstrap 5.3 base with --mc-* design-token system (50+ tokens)
Full dark mode via [data-bs-theme="dark"] overrides + localStorage persistence
Dashboard page (pages/dashboard.html)
24 component demo pages in components/
Global search overlay with keyboard navigation (Ctrl+K)
Sidebar: desktop collapse + mobile slide-in with overlay
Sticky topbar with search, dark toggle, notifications, user pill
Custom component set: stat cards, trend pills, status badges, avatars, mini calendar, full calendar, vital boxes, appointment rows
Toast notification system (showMedToast()) with progress bar
Medical specialty color palette (12 colors × 3 tokens each)
Remix Icon self-hosted (all font formats bundled)
Full responsive layout (xs → xxl breakpoints)
LICENSE.txt · README.md · CHANGELOG.md · docs/documentation.html

Roadmap: Upcoming releases will add the remaining 39 application pages, reaching the 40-page milestone. Update notifications are sent via the Codecanyon account page.

Support

MediCore is supported by Arasix UI. For questions, bug reports, and feature requests, please use the Codecanyon item support tab or contact us directly.

💬

Codecanyon Support

Use the support tab on the item page for the fastest response.

📧

Email

info@arasix.com

🌐

Website

arasix.com

Before submitting a support request, please check this documentation and the CHANGELOG. Include your browser, OS, and a description of the issue for the fastest resolution.

License

MediCore is released under the Arasix UI Commercial License. The purchased license grants the right to use this template in a single end-project (one domain / one application). For multi-use or unlimited licenses, please contact info@arasix.com. See LICENSE.txt for the full terms.