LogoLogo
CTRL + /

CRM

ContactsDealsPipeline
CompaniesLeadsActivities
  • Main
  • Dashboard
    • Admin Dashboard
    • Employee Dashboard
    • Deals Dashboard
    • Leads Dashboard
  • Super Admin
    • Dashboard
    • Companies
    • Subscriptions
    • Packages
    • Domain
    • Purchase Transaction
  • Application
    • Chat
    • Calls
      • Voice Call
      • Video Call
      • Outgoing Call
      • Incoming Call
      • Call History
    • Calendar
    • Email
    • To Do
    • Notes
    • Social Feed
    • File Manager
    • Kanban
    • Invoices
  • Layouts
    • Horizontal
    • Detached
    • Modern
    • Two Column
    • Hovered
    • Boxed
    • Horizontal Single
    • Horizontal Overlay
    • Horizontal Box
    • Menu Aside
    • Transparent
    • Without Header
    • RTL
    • Dark
  • Projects
    • Clients
    • Projects
      • Projects
      • Tasks
      • Task Board
    • Crm
      • Contacts
      • Companies
      • Deals
      • Leads
      • Pipeline
      • Analytics
      • Activities
    • Employee
      • Employees List
      • Employees Grid
      • Employees Details
      • Departments
      • Designations
      • Policies
    • Tickets
      • Tickets
      • Tickets Detail
    • Holidays
    • Attendance
      • Leaves (Admin)
      • Leaves (Employee)
      • Leave Settings
      • Attendance (Admin)
      • Attendance (Employee)
      • Timesheet
      • Shift & Schedule
      • Overtime
    • Performance
      • Performance Indicator
      • Performance Review
      • Performance Appraisal
      • Goal List
      • Goal Type
    • Training
      • Training List
      • Trainers
      • Training Type
    • Promotion
    • Resignation
    • Termination
  • Administration
    • Requirment
      • Jobs
      • Candidates
      • Referrals
    • Sales
      • Estimates
      • Invoices
      • Payments
      • Expenses
      • Provident Fund
      • Taxes
    • Accounting
      • Categories
      • Budgets
      • Budget Expenses
      • Budget Revenues
    • Payroll
      • Employee Salary
      • Payslip
      • Payroll Items
    • Assets
      • Assets
      • Asset Categories
    • Help & Supports
      • Knowledge Base
      • Activities
    • User Management
      • Users
      • Roles & Permissions
    • Reports
      • Expense Report
      • Invoice Report
      • Payment Report
      • Project Report
      • Task Report
      • User Report
      • Employee Report
      • Payslip Report
      • Attendance Report
      • Leave Report
      • Daily Report
    • General Settings
      • Profile
      • Security
      • Notifications
      • Connected Apps
    • Website Settings
      • Business Settings
      • SEO Settings
      • Localization
      • Prefixes
      • Preferences
      • Appearance
      • Language
      • Authentication
      • AI Settings
    • App Settings
      • Salary Settings
      • Approval Settings
      • Invoice Settings
      • Leave Type
      • Custom Fields
    • System Settings
      • Email Settings
      • Email Templates
      • SMS Settings
      • SMS Templates
      • OTP
      • GDPR Cookies
      • Maintenance Mode
    • Financial Settings
      • Payment Gateways
      • Tax Rate
      • Currencies
    • Other Settings
      • Custom CSS
      • Custom JS
      • Cronjob
      • Storage
      • Ban IP Address
      • Backup
      • Clear Cache
  • Pages
    • Starter
    • Profile
    • Gallery
    • Search Results
    • Timeline
    • Pricing
    • Coming Soon
    • Under Maintenance
    • Under Construction
    • API Keys
    • Privacy Policy
    • Terms & Conditions
    • Pages
    • Blogs
      • All Blogs
      • Categories
      • Comments
      • Blog Tags
    • Locations
      • Countries
      • States
      • Cities
    • Testimonials
    • FAQ’S
    • Login
      • Cover
      • Illustration
      • Basic
    • Register
      • Cover
      • Illustration
      • Basic
    • Forgot Password
      • Cover
      • Illustration
      • Basic
    • Reset Password
      • Cover
      • Illustration
      • Basic
    • Email Verification
      • Cover
      • Illustration
      • Basic
    • 2 Step Verification
      • Cover
      • Illustration
      • Basic
    • Lock Screen
    • 404 Error
    • 500 Error
    • Base UI
      • Alerts
      • Accordions
      • Avatar
      • Badges
      • Borders
      • Buttons
      • Button Group
      • Breadcrumb
      • Cards
      • Carousel
      • Colors
      • Dropdowns
      • Grid
      • Images
      • Lightbox
      • Media
      • Modals
      • Offcanvas
      • Pagination
      • Progress Bars
      • Placeholders
      • Spinner
      • Range Slider
      • Toasts
      • Tooltip
      • Typography
      • Videos
    • Advanced UI
      • Ribbon
      • Clipboard
      • Drag & Drop
      • Rating
      • Text Editor
      • Counter
      • Scrollbar
      • Timeline
    • Forms
      • Basic Inputs
      • Checkbox & Radios
      • Input Groups
      • Grid & Gutters
      • Form Select
      • Input Masks
      • File Uploads
      • Horizontal Form
      • Vertical Form
      • Floating Labels
      • Form Validation
    • Tables
      • Basic Tables
      • Data Tables
    • Charts
      • Apex Charts
      • Prime Charts
      • Chart JS
    • Icons
      • Fontawesome Icons
      • Feather Icons
      • Ionic Icons
      • Material Icons
      • pe7 Icons
      • Simpleline Icons
      • Themify Icons
      • Weather Icons
      • Typicon Icons
      • Flag Icons

Applications

CalendarTo DoNotesFile ManagerKanbanInvoices
5

Notifications (2)

Mark all as read
Today
  • This Week
  • Last Week
  • Last Month
Profile

Shawnperformance in Math is below the threshold.

Just Now
Profile

Sylvia added appointment on 02:00 PM

10 mins ago
DenyApprove
Profile

New student record Georgeis created by Teressa

2 hrs ago
Profile

A new teacher record for Elisa

09:45 AM
CancelView All
Img
img
Kevin Larry

[email protected]

My ProfileSettingsStatusMy AccountKnowledge Base
Logout
My ProfileSettingsLogout
LogoLogoLogo
Img
Adrian Herman

System Admin

  • Menu
  • Chats
  • Inbox
Img
Adrian Herman

System Admin

CTRL + /
5
5
  • Main Menu
    • DashboardHot
      • Admin Dashboard
      • Employee Dashboard
      • Deals Dashboard
      • Leads Dashboard
    • Applications
    • Super Admin
  • LAYOUT
    • Horizontal
    • Detached
    • Modern
    • Two Column
    • Hovered
    • Boxed
    • Horizontal Single
    • Horizontal Overlay
    • Horizontal Box
    • Menu Aside
    • Transparent
    • Without Header
    • RTL
    • Dark
  • PROJECTS
    • Clients
    • Projects
  • CRM
    • Contacts
    • Companies
    • Deals
    • Leads
    • Pipeline
    • Analytics
    • Activities
  • HRM
    • Employees
    • Tickets
    • Holidays
    • Attendance
    • Performance
    • Training
    • Promotion
    • Resignation
    • Termination
  • RECRUITMENT
    • Jobs
    • Candidates
    • Refferals
  • Finance & Accounts
    • Sales
    • Accounting
    • Payroll
  • Administration
    • Assets
    • Help & Supports
    • User Management
    • Reports
    • Settings
  • Content
    • Pages
    • Blogs
    • Locations
    • Testimonials
    • FAQ’S
  • Pages
    • Starter
    • Profile
    • Gallery
    • Search Results
    • Timeline
    • Pricing
    • Coming Soon
    • Under Maintenance
    • Under Construction
    • API Keys
    • Privacy Policy
    • Terms & Conditions
  • Authentication
    • Login
    • Register
    • Forgot Password
    • Reset Password
    • Email Verification
    • 2 Step Verification
    • Lock Screen
    • 404 Error
    • 500 Error
  • UI Interface
    • Base UI
    • Advanced Ui
    • Charts
    • Icons
    • Forms
    • Tables
    • Maps
  • Extras
    • Documentation
    • Change Logv1.5.7
  • Main
  • Dashboard
    • Admin Dashboard
    • Employee Dashboard
    • Deals Dashboard
    • Leads Dashboard
  • Super Admin
    • Dashboard
    • Companies
    • Subscriptions
    • Packages
    • Domain
    • Purchase Transaction
  • Application
    • Chat
    • Calls
      • Voice Call
      • Video Call
      • Outgoing Call
      • Incoming Call
      • Call History
    • Calendar
    • Email
    • To Do
    • Notes
    • Social Feed
    • File Manager
    • Kanban
    • Invoices
  • Layouts
    • Horizontal
    • Detached
    • Modern
    • Two Column
    • Hovered
    • Boxed
    • Horizontal Single
    • Horizontal Overlay
    • Horizontal Box
    • Menu Aside
    • Transparent
    • Without Header
    • RTL
    • Dark
  • Projects
    • Clients
    • Projects
      • Projects
      • Tasks
      • Task Board
    • Crm
      • Contacts
      • Companies
      • Deals
      • Leads
      • Pipeline
      • Analytics
      • Activities
    • Employee
      • Employees List
      • Employees Grid
      • Employees Details
      • Departments
      • Designations
      • Policies
    • Tickets
      • Tickets
      • Tickets Detail
    • Holidays
    • Attendance
      • Leaves (Admin)
      • Leaves (Employee)
      • Leave Settings
      • Attendance (Admin)
      • Attendance (Employee)
      • Timesheet
      • Shift & Schedule
      • Overtime
    • Performance
      • Performance Indicator
      • Performance Review
      • Performance Appraisal
      • Goal List
      • Goal Type
    • Training
      • Training List
      • Trainers
      • Training Type
    • Promotion
    • Resignation
    • Termination
  • Administration
    • Requirment
      • Jobs
      • Candidates
      • Referrals
    • Sales
      • Estimates
      • Invoices
      • Payments
      • Expenses
      • Provident Fund
      • Taxes
    • Accounting
      • Categories
      • Budgets
      • Budget Expenses
      • Budget Revenues
    • Payroll
      • Employee Salary
      • Payslip
      • Payroll Items
    • Assets
      • Assets
      • Asset Categories
    • Help & Supports
      • Knowledge Base
      • Activities
    • User Management
      • Users
      • Roles & Permissions
    • Reports
      • Expense Report
      • Invoice Report
      • Payment Report
      • Project Report
      • Task Report
      • User Report
      • Employee Report
      • Payslip Report
      • Attendance Report
      • Leave Report
      • Daily Report
    • General Settings
      • Profile
      • Security
      • Notifications
      • Connected Apps
    • Website Settings
      • Business Settings
      • SEO Settings
      • Localization
      • Prefixes
      • Preferences
      • Appearance
      • Language
      • Authentication
      • AI Settings
    • App Settings
      • Salary Settings
      • Approval Settings
      • Invoice Settings
      • Leave Type
      • Custom Fields
    • System Settings
      • Email Settings
      • Email Templates
      • SMS Settings
      • SMS Templates
      • OTP
      • GDPR Cookies
      • Maintenance Mode
    • Financial Settings
      • Payment Gateways
      • Tax Rate
      • Currencies
    • Other Settings
      • Custom CSS
      • Custom JS
      • Cronjob
      • Storage
      • Ban IP Address
      • Backup
      • Clear Cache
  • Pages
    • Starter
    • Profile
    • Gallery
    • Search Results
    • Timeline
    • Pricing
    • Coming Soon
    • Under Maintenance
    • Under Construction
    • API Keys
    • Privacy Policy
    • Terms & Conditions
    • Pages
    • Blogs
      • All Blogs
      • Categories
      • Comments
      • Blog Tags
    • Locations
      • Countries
      • States
      • Cities
    • Testimonials
    • FAQ’S
    • Login
      • Cover
      • Illustration
      • Basic
    • Register
      • Cover
      • Illustration
      • Basic
    • Forgot Password
      • Cover
      • Illustration
      • Basic
    • Reset Password
      • Cover
      • Illustration
      • Basic
    • Email Verification
      • Cover
      • Illustration
      • Basic
    • 2 Step Verification
      • Cover
      • Illustration
      • Basic
    • Lock Screen
    • 404 Error
    • 500 Error
    • Base UI
      • Alerts
      • Accordions
      • Avatar
      • Badges
      • Borders
      • Buttons
      • Button Group
      • Breadcrumb
      • Cards
      • Carousel
      • Colors
      • Dropdowns
      • Grid
      • Images
      • Lightbox
      • Media
      • Modals
      • Offcanvas
      • Pagination
      • Progress Bars
      • Placeholders
      • Spinner
      • Range Slider
      • Toasts
      • Tooltip
      • Typography
      • Videos
    • Advanced UI
      • Ribbon
      • Clipboard
      • Drag & Drop
      • Rating
      • Text Editor
      • Counter
      • Scrollbar
      • Timeline
    • Forms
      • Basic Inputs
      • Checkbox & Radios
      • Input Groups
      • Grid & Gutters
      • Form Select
      • Input Masks
      • File Uploads
      • Horizontal Form
      • Vertical Form
      • Floating Labels
      • Form Validation
    • Tables
      • Basic Tables
      • Data Tables
    • Charts
      • Apex Charts
    • Icons
      • Fontawesome Icons
      • Feather Icons
      • Ionic Icons
      • Material Icons
      • pe7 Icons
      • Simpleline Icons
      • Themify Icons
      • Weather Icons
      • Typicon Icons
      • Flag Icons
profile
Logo
LogoLogo
Welcome to SmartHR
Img
Adrian Herman

System Admin

    • APPLICATION
    • Voice Call
    • Video Call
    • Outgoing Call
    • Incoming Call
    • Call History
    • Calendar
    • Email
    • To Do
    • Notes
    • File Manager
    • Kanban
    • Invoices
    • SUPER ADMIN
    • Dashboard
    • Companies
    • Subscriptions
    • Packages
    • Domain
    • Purchase Transaction
    • LAYOUT
    • Horizontal
    • Detached
    • Modern
    • Two Column
    • Hovered
    • Boxed
    • Horizontal Single
    • Horizontal Overlay
    • Horizontal Box
    • Menu Aside
    • Transparent
    • Without Header
    • RTL
    • Dark
    • PROJECTS
    • Clients
    • Projects
      • Projects
      • Tasks
      • Task Board
    • CRM
    • Contacts
    • Companies
    • Deals
    • Leads
    • Pipeline
    • Analytics
    • Activities
    • HRM
    • Employees
      • Employee Lists
      • Employee Grid
      • Employee Details
      • Departments
      • Designations
      • Policies
    • Tickets
      • Tickets
      • Ticket Details
    • Holidays
    • Attendance
      • Leaves
        • Leaves (Admin)
        • Leave (Employee)
        • Leave Settings
      • Attendance (Admin)
      • Attendance (Employee)
      • Timesheets
      • Shift & Schedule
      • Overtime
    • Performance
      • Performance Indicator
      • Performance Review
      • Performance Appraisal
      • Goal List
      • Goal Type
    • Training
      • Training List
      • Trainers
      • Training Type
    • Promotion
    • Resignation
    • Termination
    • FINANCE & ACCOUNTS
    • Sales
      • Estimates
      • Invoices
      • Payments
      • Expenses
      • Provident Fund
      • Taxes
    • Accounting
      • Categories
      • Budgets
      • Budget Expenses
      • Budget Revenues
    • Payroll
      • Employee Salary
      • Payslip
      • Payroll Items
    • ADMINISTRATION
    • Assets
      • Assets
      • Asset Categories
    • Help & Supports
      • Knowledge Base
      • Activities
    • User Management
      • Users
      • Roles & Permissions
    • Reports
      • Expense Report
      • Invoice Report
      • Payment Report
      • Project Report
      • Task Report
      • User Report
      • Employee Report
      • Payslip Report
      • Attendance Report
      • Leave Report
      • Daily Report
    • General Settings
      • Profile
      • Security
      • Notifications
      • Connected Apps
    • Website Settings
      • Business Settings
      • SEO Settings
      • Localization
      • Prefixes
      • Preferences
      • Appearance
      • Language
      • Authentication
      • AI Settings
    • App Settings
      • Salary Settings
      • Approval Settings
      • Invoice Settings
      • Leave Type
      • Custom Fields
    • System Settings
      • Email Settings
      • Email Templates
      • SMS Settings
      • SMS Templates
      • OTP
      • GDPR Cookies
      • Maintenance Mode
    • Financial Settings
      • Payment Gateways
      • Tax Rate
      • Currencies
    • Other Settings
      • Custom CSS
      • Custom JS
      • Cronjob
      • Storage
      • Ban IP Address
      • Backup
      • Clear Cache
    • CONTENT
    • Pages
    • Blogs
      • All Blogs
      • Categories
      • Comments
      • Blog Tags
    • Locations
      • Countries
      • States
      • Cities
    • Testimonials
    • FAQ’S
    • PAGES
    • Starter
    • Profile
    • Gallery
    • Search Results
    • Timeline
    • Pricing
    • Coming Soon
    • Under Maintenance
    • Under Construction
    • API Keys
    • Privacy Policy
    • Terms & Conditions
    • AUTHENTICATION
    • Login
      • Cover
      • Illustration
      • Basic
    • Register
      • Cover
      • Illustration
      • Basic
    • Forgot Password
      • Cover
      • Illustration
      • Basic
    • Reset Password
      • Cover
      • Illustration
      • Basic
    • Email Verification
      • Cover
      • Illustration
      • Basic
    • 2 Step Verification
      • Cover
      • Illustration
      • Basic
    • Lock Screen
    • 404 Error
    • 500 Error
    • UI INTERFACE
    • Base UI
      • Alerts
      • Accordion
      • Avatar
      • Badges
      • Border
      • Buttons
      • Button Group
      • Breadcrumb
      • Card
      • Carousel
      • Colors
      • Dropdowns
      • Grid
      • Images
      • Lightbox
      • Media
      • Modals
      • Offcanvas
      • Pagination
      • Popovers
      • Progress
      • Placeholders
      • Spinner
      • Sweet Alerts
      • Tabs
      • Toasts
      • Tooltips
      • Typography
      • Video
      • Sortable
      • Swiperjs
    • Advanced UI
      • Ribbon
      • Clipboard
      • Drag & Drop
      • Range Slider
      • Rating
      • Text Editor
      • Counter
      • Scrollbar
      • Sticky Note
      • Timeline
    • Forms
      • Form Elements
        • Basic Inputs
        • Checkbox & Radios
        • Input Groups
        • Grid & Gutters
        • Form Select
        • Input Masks
        • File Uploads
        • Form Picker
      • Layouts
        • Horizontal Form
        • Vertical Form
        • Floating Labels
      • Form Validation
      • Select2
      • Form Wizard
      • Form Picker
    • Tables
      • Basic Tables
      • Data Table
    • Charts
      • Apex Charts
      • Chart C3
      • Chart Js
    • Icons
      • Fontawesome Icons
      • Bootstrap Icons
      • Remix Icons
      • Ionic Icons
      • Material Icons
      • Pe7 Icons
      • Themify Icons
      • Weather Icons
      • Typicon Icons
      • Flag Icons
      • Bootstrap Icons
    • Maps
      • Leaflet
    • EXTRAS
    • Documentation
    • Change Log
    • Multi Level
      • Multilevel 1
      • Multilevel 2
        • Multilevel 2.1
        • Multilevel 2.2
          • Multilevel 2.2.1
          • Multilevel 2.2.2
      • Multilevel 3
    Logo
    5
    5
    Welcome to SmartHR
    Img
    Adrian Herman

    System Admin

    Dashboard

    Application

    Super Admin

    Layouts

    Projects

    Crm

    Hrm

    Finance & Accounts

    Administration

    Content

    Pages

    Authentication

    UI Interface

      DocumentationChange Logv4.0.2

      Theme Customizer

      Choose your themes & layouts etc.

      imgRTL

      Pattern
      Colors

      Reset
      Buy Product

      Accordion

      Basic Accordion

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      Always Open Accordion

      Omit the data-bs-parentattribute on each.accordion-collapseto make accordion items stay open when another item is opened.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      With Spacing

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Flush Accordion

      Add .accordion-flush to remove the defaultbackground-color, borders, and rounded corners.

      Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

      Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

      Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
      Light Colors:
      Primary

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Secondary

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Solid Colors:
      Primary

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Secondary

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Warning

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Info

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Success

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Danger

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Colored Borders:
      Primary

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Secondary

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Success

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Info

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Warning

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Danger

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Left Aligned Icons

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      Without Icon

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

      This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
      Custom Icon Accordion

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Custom Accordion

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.

      This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the.accordion-body, though the transition does limit overflow.
      Example

      Link with href

      Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
      Targets Collapse

      Toggle first element

      Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      Horizontal Collapse

      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.