pageHeading(title, action)

{{ c.pageHeading("Page Title", { label: "ACTION", href: "#" }) }}

heroHeader(title, action, description)

{{ c.heroHeader("Hero Title", { label: "Create New", href: "#" }, "Description") }}

sectionHeading(title, id)

Section Heading

{{ c.sectionHeading("Section Heading", "section-id") }}

fieldText(label, value, optional, link)

{{ c.fieldText("First Name", "John") }}
{{ c.fieldText("Email", "john@example.com", true, true) }}

inputText(placeholder, name, value, fullWidth)

{{ c.inputText("Enter your name...", "name", "", true) }}

fieldCheckbox(label, checked, name)

{{ c.fieldCheckbox("Option label", true, "name") }}

fieldGrid(cols, content)

{{ c.fieldGrid(2, content) }}

card(content, classes)

{{ c.card('
Content here
', 'extra-classes') }}

settingsSection(id, title, content)

{{ c.settingsSection("id", "Title", content) }}

grid(content, columns)

{{ c.grid(content, 3) }}

subnav(items, size)

{{ c.subnav([{ label: "Tab", href: "#", active: true }, ...]) }}

breadcrumb(items)

{{ c.breadcrumb([{ label: "Home", href: "#" }, { label: "Current" }]) }}

pagination(currentPage, totalPages)

{{ c.pagination(2, 5) }}

statCard(value, label)

{{ c.statCard("1,234", "Total Users") }}

tableHeader + tableRow

{{ c.tableHeader(["Col1", "Col2"]) }}
{{ c.tableRow(["data", "data"]) }}

avatar(size, hasBadge, badgeColor)

{{ c.avatar("w-12 h-12", true, "bg-green-500") }}

statusBadge(label, status)

{{ c.statusBadge("Active", "active") }}

registrationStatus(status)

{{ c.registrationStatus("completed") }}

badge(count)

{{ c.badge(5) }}

contentCard

{{ c.contentCard(image, title, description, metadata, actions) }}

courseCard

{{ c.courseCard(title, visibility, availability, signUps, completed, href) }}

learningCourseCard

{{ c.learningCourseCard(title, description, modules, status, progress, href) }}

userCard

{{ c.userCard(name, email, organization, tier, pointRange, lastLogin, href) }}

revenueCard

{{ c.revenueCard(title, href, updated, revenue, registrants) }}

courseModuleSection + courseModuleItem

{{ c.courseModuleSection("Title") }}
  {{ c.courseModuleItem("Item", "#", "document", completed) }}
{{ c.courseModuleSectionEnd() }}

scheduleEventMilestone

{{ c.scheduleEventMilestone(title, dates, description, isPast) }}

scheduleEventVideoConference

{{ c.scheduleEventVideoConference(title, dateTime, duration, description, showMoreInfo, isPast) }}

learningObjective

• Understanding Basics
  Learn the fundamental concepts and terminology.
• Practical Application
  Apply concepts to real-world scenarios.

{{ c.learningObjective("Title", "Description") }}