Installation

CDN (Recommended)

<!-- CSS Axcora CSS  -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/axcora.min.css">

<!-- JavaScript (Optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/axcora.min.js"></script>

NPM Install

npm install axcora-css

npm install axcora-js

Manual Download

Download and include all files in your project:

Download Now

Axcora CSS .min.css - CSS (12KB gzipped)
Axcora CSS .min.js - JavaScript components (6KB gzipped)

Quick Start

HTML Template:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/axcora.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-primary">Hello World!</h1>
        <button class="btn btn-primary">Get Started</button>
    </div>
    
    <script src="Axcora CSS .min.js"></script>
</body>
</html>

Accordion Components

Live Accordion Example

This is a fully responsive accordion component with smooth transitions and dark mode support.

Absolutely! Accordions are perfect for FAQs, content toggling, and more.

Yes, the accordion automatically adapts to dark and light themes using CSS variables.

How to Use

Trigger Accordion: Click any <button class="accordion-button"> to expand or collapse its section.
Behavior: Only one item is expanded at a time for a clean and interactive experience.

This accordion features smooth transitions, responsive layout, and automatic dark mode adaptation using CSS variables.

Accordion Structure:

<div class="accordion" id="demoAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" aria-expanded="true">
                Accordion Title
            </button>
        </h2>
        <div class="accordion-collapse" style="height: auto;">
            <div class="accordion-body">
                
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" aria-expanded="false">
                Second Item
            </button>
        </h2>
        <div class="accordion-collapse" style="height: 0px;">
            <div class="accordion-body">
                
            </div>
        </div>
    </div>
</div>

Import on Axcora SSG

Installation : npm i axcora-accroidon

Example templates/index.axcora


---
layouts: base
css:
  theme: 'essentials'
    components:
        - accroidon
---

{% axcora-accordion id="demo" title1="Axcora Accordion" text1="hello world lopre ipsum dolor" title2="Axcora Accordion 2" text2="hello world lopre ipsum dolor 2"  /%}

Implement on Markdown .md content/about.md
Make sure you have import components in to your layouts for example on template/pages.axcora


---
layouts: base
css:
    theme: 'essentials'
    components:
        - accroidons
---

Now you can add axcora-accordion Component in to your content.


---
title: About Axcora
description: Modern static site generator built with TypeScript for fast, scalable websites
layout: page
---
Your content in here....


{% axcora-accordion id="demo" title1="Axcora Accordion" text1="hello world lopre ipsum dolor" title2="Axcora Accordion 2" text2="hello world lopre ipsum dolor 2"  /%}

Badge Component

Demo

Live Badge Example

Primary Secondary Success Danger Info Warning Light Dark
Outline Primary Outline Success Outline Danger Outline Warning Outline Info
Small Large

How to Use

Colors: Use .badge-{color} for solid and .badge-outline-{color} for outline badges.
Sizes: Add .badge-sm (small) or .badge-lg (large) for different badge sizes.
Flexible: Badges can be placed in buttons, navs, cards, and anywhere quick context is needed.

Badges are perfect for labeling, counts, status, and as visual highlights.

Badge Structure:

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success badge-sm">Small</span>
<span class="badge badge-outline-danger badge-lg">Outline Large</span>

Component for axcora SSG.

Installation : npm i axcora-badge


{% axcora-badge 
title="Badge Title Here.."
color="primary" 
/%}

Breadcrumb Component

How to Use

Structure: Use .breadcrumb for the list and .breadcrumb-item for each item.
Navigation: Anchor (<a>) children link to pages; the last item gets .active.
Visual: Use .breadcrumb-modern for a background and border style, which adapts to dark mode.

Breadcrumbs provide navigation trail and context, improving user experience across complex interfaces and multi-level navigation.

Breadcrumb Structure:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb breadcrumb-modern">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

Blockquote

Modern Blockquote

Demo

The greatest glory in living lies not in never falling, but in rising every time we fall.
Nelson Mandela

<blockquote class="blockquote">
  The greatest glory in living lies not in never falling, but in rising every time we fall.
  <div class="blockquote-footer">Nelson Mandela</div>
</blockquote>

Component for axcora SSG.

Installation : npm i axcora-blockquote


{% axcora-blockquote
text="The greatest glory in living lies not in never falling, but in rising every time we fall"
footer="Nelson Mandela" 
/%}

Class	Description
`.blockquote`	Main container for the blockquote. Includes gradient background, left border, and custom quote mark styling.
`.blockquote-footer`	Author/attribution, styled as footer below the quote.

Dark Theme Support

In dark mode, the blockquote automatically uses a deeper gradient background and adjusts text and border colors for contrast.

Buttons

Basic Buttons

Demo

<button class="btn btn-primary">Primary</button>
<a href="https://www.axcora.com" class="btn btn-secondary">Secondary</a>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>

Component for axcora SSG.

Installation : npm i axcora-button


{% axcora-button
text="Click Me"
href="/"
color="primary"
/%}

Outline Buttons

Demo

Button Sizes

Demo

Class	Description
`.btn`	Base button class
`.btn-primary`	Primary button style
`.btn-outline-*`	Outline button variants
`.btn-sm`	Small button size
`.btn-lg`	Large button size

Cards

Flexible content containers with header, body, and footer.

Demo

Card Header

Card Title

Some example text to build on the card title.

Glass Card

Glass morphism effect dengan backdrop blur untuk tampilan modern.

Modern

Simple Card

Card tanpa header dan footer.

Footer content

<div class="card">
    <div class="card-header">Card Header</div>
    <div class="card-body">
        <h5>Card Title</h5>
        <p>Card content goes here.</p>
        <button class="btn btn-primary">Action</button>
    </div>
    <div class="card-footer">Footer content</div>
</div>

<!-- Glass Effect -->
<div class="glass p-4">
    <h5>Glass Morphism</h5>
    <p>Modern glass effect.</p>
</div>

Component for axcora SSG support with 3 grid card .

Installation : See axcora card components


{% axcora-card
title="Card"
card_title="Card Title"
text="Content in here"
footer="footer here"
/%}

Carousel

Basic Carousel

Demo

Caption for Slide 1

Caption for Slide 2

Caption for Slide 3

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" alt="Slide 1">
      <div class="carousel-caption">Caption for Slide 1</div>
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" alt="Slide 2">
      <div class="carousel-caption">Caption for Slide 2</div>
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" alt="Slide 3">
      <div class="carousel-caption">Caption for Slide 3</div>
    </div>
  </div>
  <button class="carousel-control-prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
  <div class="carousel-indicators">
    <button class="active"></button>
    <button></button>
    <button></button>
  </div>
</div>

Component for axcora SSG support with 5 image .

Installation : See axcora carousel components


{% axcora-carousel
title1="Image 1 Title"
text1="Content 1 in here"
image1="/img/ax.jpg"

title2="image 2 Title"
text2="Content 2 in here"
image2="/img/axcora.jpg"

title3="Image 3 Title"
text3="Content 3 in here"
image3="/img/axcora1.jpg"

title4="Image 4 Title"
text4="Content 4 in here"
image4="/img/axs.jpg"


title5="Image 5 Title"
text5="Content 5 in here"
image5="/img/ax-1.jpg"
/%}

Class	Description
`.carousel`	Main container for the carousel.
`.carousel-inner`	Wrapper for all carousel items.
`.carousel-item`	Individual slide item.
`.carousel-item.active`	Indicates the current visible slide.
`.carousel-control-prev`	Button to navigate to the previous slide.
`.carousel-control-next`	Button to navigate to the next slide.
`.carousel-indicators`	Dot indicators for slide navigation.
`.carousel-caption`	Displays a caption for each slide.

Dropdown Component

Demo

Live Dropdown Example

How to Use

Structure: Use a .dropdown with a .dropdown-toggle button and a .dropdown-menu containing .dropdown-item or dividers.
Interaction: Clicking the toggle shows/hides the menu. JS handles ARIA and .show class toggling.
Accessibility: Menu uses ARIA roles and is keyboard accessible.

Dropdowns provide selectable menu lists—great for navigation, filters, actions, and account menus. Supports dark and light themes, smooth animations, and modern style.

Dropdown Structure:

<div class="dropdown">
    <button class="dropdown-toggle" type="button">Menu</button>
    <div class="dropdown-menu">
        <button class="dropdown-item">First action</button>
        <button class="dropdown-item">Second action</button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item">Separated link</button>
    </div>
</div>

Forms

Form components with floating labels and validation states.

Demo

Full Name

Email Address

Select Option

<div class="form-floating mb-3">
    <input type="text" class="form-control" id="name" placeholder=" ">
    <label for="name">Full Name</label>
</div>

<div class="form-floating mb-3">
    <select class="form-select" id="country">
        <option value="">Choose...</option>
        <option value="id">Indonesia</option>
    </select>
    <label for="country">Country</label>
</div>

Glassmorphism Components

Demo

Live Glassmorphism Example

Frosted Glass Panel

This panel uses the glass class to create a modern glassmorphism effect using background blur and semi-transparency.

How to Use

Add the Effect: Apply the .glass class to any container (card, section, modal, etc) to apply glassmorphism styling.
Supports Dark Mode: The glass effect automatically adapts for dark and light themes.

Glassmorphism provides a clear, frosted-glass look that elevates your UI by adding depth and a modern, luxurious feel.

Glassmorphism Structure:

<div class="glass p-5">
    <h4>Frosted Glass Panel</h4>
    <p>This container uses the glass morphism effect.</p>
    <button class="btn btn-primary">Try Glass UI</button>
</div>

Component for axcora SSG support with 3 grid glass .

Installation : See axcora glass components


{% axcora-glass
title="Glass Title"
text="Content in here"
/%}

Hero

Basic Hero

Demo

Modern Hero Section

Create a beautiful introduction area for your website with a modern gradient background and bold text.

<div class="hero">
  <div class="hero-content">
    <h1>Modern Hero Section</h1>
    <p>Create a beautiful introduction area for your website with a modern gradient background and bold text.</p>
    <div class="hero-actions">
      <button class="btn btn-primary">Get Started</button>
      <button class="btn btn-outline-secondary">Learn More</button>
    </div>
  </div>
</div>

Component for axcora SSG.

Installation : See axcora hero components


{% axcora-hero-button title="Hero with button Title" text="Content Hero with button in here" button1="Get Started" button1_color="primary" button1_url="/start" button2="Learn More" button2_color="warning" button2_url="/learn" /%}

Class	Description
`.hero`	Main container for the hero section with gradient background and central alignment.
`.hero-content`	Used to center and restrict the max width of hero content.
`.hero-actions`	Container for action buttons below hero text.

Images

Responsive Images

Demo

<img src="/img/ax.jpg" alt="Example" class="img-responsive">

Component for axcora SSG.

Installation : See axcora image components


{% axcora-image-responsive 
title="Title"
image="/img/ax.jpg"
/%}

Fluid Images

Demo

<img src="/img/axcora1.jpg" alt="Example" class="img-fluid">

Component for axcora SSG.


{% axcora-image-fluid 
title="Title"
image="/img/ax.jpg"
/%}

Thumbnail Image

Demo

<img src="/img/logo.png" alt="Logo Thumbnail" class="img-thumbnail">

Component for axcora SSG.


{% axcora-image-thumbnail 
title="Title"
image="/img/ax.jpg"
/%}

Image Aspect Ratios

Demo

<div class="ratio ratio-16x9">
  <img src="/img/axcora1.jpg" alt="16:9 Example">
</div>

Component for axcora SSG.


{% axcora-image-ratio 
title="Title"
image="/img/ax.jpg"
ratio="16x9"
/%}

Object Fit Utilities

Demo

<img src="/img/logo.png" class="object-cover">
<img src="/img/ax.jpg" class="object-contain">

Component for axcora SSG.


{% axcora-image-cover title="Title" image="/img/ax.jpg"/%} 

{% axcora-image-contain title="Title" image="/img/ax.jpg"/%}

Class	Description
`.img-responsive`, `.img-fluid`	Makes the image scale with the parent container (responsive image).
`.img-thumbnail`	Displays image with padding, border, and rounded corners (thumbnail style).
`.ratio`, `.ratio-16x9`, `.ratio-4x3`, `.ratio-1x1`, `.ratio-21x9`	Maintains aspect ratio for image or content. Use helper classes for specific ratio such as `.ratio-16x9`, `.ratio-4x3`, `.ratio-1x1`, `.ratio-21x9`.
`.object-cover`	The image covers the entire container, potentially cropping the image.
`.object-contain`	The image is scaled to maintain its aspect ratio while fitting within the container.
`.object-fill`	The image stretches to fill the container, ignoring its aspect ratio.
`.object-scale`	The image is scaled down as necessary to fit the container.
`.object-none`	The image keeps its original size and proportions, and is not resized to fit the container.

Modal Components

Demo

Live Modal Example

How to Use

Trigger the Modal: Add data-bs-toggle="modal" and data-bs-target="#yourModalId" to any <button> or clickable element to open the modal.
Closing the Modal: Any button with data-bs-dismiss="modal" will close its parent modal. The modal can also be dismissed by clicking the backdrop or pressing Escape.

This modal features backdrop blur, smooth entrance animations, responsive layout, and supports automatic dark mode adaptation via CSS variables.

Modal Structure:

<div class="modal" id="demoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- modal body content -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" 
				data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Component for axcora SSG.

Installation : See axcora modal components


{% axcora-modal 
modal_button="🚀 Get Started"
id="demo"
title="demo"
content="Hello World lorep ipsum dolor siamet"
image="/img/ax.jpg"
button1="Explore"
button1_url="/explore"
button1_color="primary"
button2="View"
button2_url="/views"
button2_color="danger"
/%}

Navbar

Responsive Navigation Bar

Demo

<nav class="navbar">
  <a class="navbar-brand" href="#">BrandName</a>
  <button class="navbar-toggler" onclick="document.querySelector('.navbar-collapse').classList.toggle('show')">☰</button>
  <div class="navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    </ul>
  </div>
</nav>

Mobile Responsive Behavior

On small screens (<768px), the navigation links collapse under a menu button (hamburger toggler). Click the toggler to show or hide the navigation links.

Class	Description
`.navbar`	Main container for the navigation bar.
`.navbar-brand`	Brand or logo link, typically at the left of the navbar.
`.navbar-nav`	Container for navigation list items, either horizontal or vertical based on screen size.
`.nav-item`	Individual navigation link container (list item).
`.nav-link`	Styled link for navigation.
`.navbar-toggler`	Button to expand/collapse the menu on mobile devices. Usually contains the hamburger icon.
`.navbar-collapse`	Container for the collapsible navigation menu. Uses `.show` to toggle visibility on mobile.
`.show`	Applied to `.navbar-collapse` to display the navigation links when toggled on mobile.

Pagination

Basic Pagination

Demo

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">Previous</a>
  </li>
  <li class="page-item active">
    <a class="page-link" href="#"
        >1</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#">Next</a>
    </li>
</ul>

States: Active & Disabled

Demo

Class	Description
`.pagination`	Container for the pagination component, used on a `<ul>` element.
`.page-item`	Individual page item, wrap each link in a `<li>` element.
`.page-link`	Button or link for each page, used inside `.page-item`.
`.active`	Highlights the current (active) page.
`.disabled`	Disables navigation links (for example, 'Previous' on the first page).

Table Components

Demo

Live Table Example

#	Name	Status	Date
1	Alice	Active	2025-08-19
2	Bob	Inactive	2025-07-21
3	Charlie	Pending	2025-06-05

How to Use

Responsive Wrapper: Wrap the .table inside .table-responsive for horizontal scrolling on small screens.
Striped Rows: Use .table-striped for zebra-style alternating row backgrounds.
Bordered: Use .table-bordered for strong borders between cells.
Dark Mode: Table colors and hover will adapt automatically when dark theme is active.

Tables are highly customizable for data presentation, user lists, and any structured layout needs. You can combine with badges or buttons for more interactive dashboards.

Table Structure:

<div class="table-responsive">
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Status</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Alice</td>
                <td><span class="badge badge-success">Active</span></td>
                <td>2025-08-19</td>
            </tr>
        </tbody>
    </table>
</div>

Tabs Component

Demo

Live Tabs Example

Profile

This is the profile tab content.

Settings

This is the settings tab content.

Activity

This is the activity tab content.

How to Use

Tabs Navigation: Use an .nav-tabs list with .nav-link items, linking via href="#tab-pane-id".
Content Area: Use .tab-content with children .tab-pane blocks, each having a unique id.
Active State: The active tab and pane use .active for display and animation.

Tabs break up content into sections users can explore one at a time. Fully modern: supports animations, dark mode, and keyboard navigation.

Tabs Structure:

<ul class="nav-tabs">
    <li class="nav-item">
        <a href="#profile" class="nav-link active">Profile</a>
    </li>
    <li class="nav-item">
        <a href="#settings" class="nav-link">Settings</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="profile">Profile content...</div>
    <div class="tab-pane" id="settings">Settings content...</div>
</div>

Component for axcora SSG support 6 tabs.

Installation : See axcora tabs components


{% axcora-tabs 
tabs_id="demo"

tabs1_id="1"
tabs1_title="Profile"
tabs1_content="Profile content in here"

tabs2_id="2"
tabs2_title="Media"
tabs2_content="Media content in here"

tabs3_id="3"
tabs3_title="Video"
tabs3_content="Video content in here"
/%}

Toast

Toast Notification

Demo

<!-- Button Trigger -->
<button class="btn btn-outline" onclick="Framework.showToast('Hello World!', 'success')">
    ✨ Show Toast
</button>

<!-- Toast container (should be in your HTML once) -->
<div class="toast-container"></div>

Component for axcora SSG support 6 tabs.

Installation : See axcora toast components


{% axcora-toast 
button="✨ Show Toast"
color="success"
text="Congratulations Lorep Ipsum is dolor siamet"
/%}

Class	Description
`.toast-container`	The fixed-position container where toasts appear. Should be present once in your HTML.
`.toast`	The main toast notification element.
`.bg-success`	Green background, use for success status.
`.bg-danger`	Red background, use for error/status.
`.bg-info`	Blue background, use for informational messages.
`.bg-warning`	Yellow background, use for warnings.
`.show`	Adds fade-in and slide-in transitions. Remove this class for fade-out.

Usage

Call the JavaScript method Framework.showToast(message, type) to show a toast.
Types available: success, info, danger, warning.
Only one .toast-container is needed in your HTML.

Video Embed / Responsive Iframe

Responsive Video Embed

Demo

<div class="embed-16x9">
  <iframe src="https://www.youtube.com/embed/sBljFnEB7Sg" title="YouTube video" allowfullscreen></iframe>
</div>

Other Aspect Ratios

Demo

<div class="embed-4x3">
  <iframe src="..." title="4:3 Video"></iframe>
</div>
<div class="embed-1x1">
  <iframe src="..." title="1:1 Video"></iframe>
</div>
<div class="youtube-lite">
  <data-ytid="..." data-title="Youtube lite Video"></iframe>
</div>

Component for axcora SSG.

Installation : See axcora video components


{% axcora-iframe 
url="https://www.youtube.com/embed/sBljFnEB7Sg"
ratio="16x9"
title="Iframe Video"
/%}  

{% axcora-video url="/media/video.mp4" ratio="4x3" alt="Video Local" /%}  

{% axcora-youtube url="sBljFnEB7Sg" ratio="16x9" title="Youtube Lite Video" /%}

Class	Description
`.embed`	Main wrapper for responsive video embeds or iframes.
`.embed-16x9`	Sets aspect ratio to 16:9 for widescreen videos.
`.embed-4x3`	Sets aspect ratio to 4:3.
`.embed-1x1`	Sets aspect ratio to 1:1 (square).
`.embed-21x9`	Sets aspect ratio to 21:9 (extra wide).
`.youtube-lite`	lightweight youtube video.

Scrollspy Navigation

Modern Scrollspy

Demo

Class / Attribute	Description
`.scrollspy-nav`	Container for the fixed vertical scrollspy navigation, positioned on the side of the viewport.
`.scrollspy-nav a`	Individual navigation dots linking to different sections.
`.active`	Highlights the dot for the currently viewed section.
`data-label`	Shows a tooltip for each dot with the section name on hover.

Responsiveness

On mobile devices (width < 768px), the scrollspy navigation automatically hides for better usability.

Scrollspy Component Demo

How to Use Scrollspy

Place the Navigation: Add <nav class="scrollspy-nav"> to your template or content, with links to the section IDs you want tracked.
Add Sections: Make sure your content sections have matching id attributes.
Initialize Script: Enable the provided initScrollspy() script for auto-active highlighting.
Customize: Change data-label or section titles as needed.

Scrollspy visually guides visitors through your content with dynamic, accessible navigation.

Scrollspy Section HTML:

<nav class="scrollspy-nav" aria-label="Scrollspy Navigation">
  <a href="#section1" data-label="Beranda"></a>
  <a href="#section2" data-label="Tentang"></a>
  <a href="#section3" data-label="Layanan"></a>
  <a href="#section4" data-label="Testimoni"></a>
  <a href="#section5" data-label="Kontak"></a>
</nav>
<main>
  <section id="section1" style="min-height:100vh; padding:4rem 2rem;">
    <h2>Beranda</h2>
    <p>Ini adalah bagian Beranda.</p>
  </section>
  <section id="section2" style="min-height:100vh; padding:4rem 2rem;">
    <h2>Tentang</h2>
    <p>Deskripsi tentang kami.</p>
  </section>
  <section id="section3" style="min-height:100vh; padding:4rem 2rem;">
    <h2>Layanan</h2>
    <p>Apa saja layanan kami.</p>
  </section>
  <section id="section4" style="min-height:100vh; padding:4rem 2rem;">
    <h2>Testimoni</h2>
    <p>Pendapat klien kami.</p>
  </section>
  <section id="section5" style="min-height:100vh; padding:4rem 2rem;">
    <h2>Kontak</h2>
    <p>Hubungi kami di sini.</p>
  </section>
</main>

Axcora SSG Integration

Installation : See axcora scrollspy components

Import Scrollspy in your template:

---
layouts: base
css:
  theme: 'essentials'
  components:
    - scrollspy
js:
  - scrollspy
---
<main>{{content}}</main>

Now use the Scrollspy HTML structure in your .md content or templates. With {% axcora-scrollspy ... /%} you can auto-generate sections dynamically.

Tips & Notes

Ensure your section ids match the navigation href!
Update data-label text for user-friendly tooltips.
The .active state will move automatically as the user scrolls with the Scrollspy script enabled.
Modify min-height or padding in each section for your preferred scroll experience.

Use Scrollspy to create elegant, section-based navigation for portfolios, docs, landing pages, and more.

Spinner Components

Live Spinner Example

How to Use

Border Spinner: Use .spinner.spinner-border plus .spinner-primary, .spinner-success, or .spinner-danger for colored borders.
Grow Spinner: Use .spinner.spinner-grow for pulsing grow effect.
Sizes: Add .spinner-sm or .spinner-lg for small or large spinners.

Spinners are perfect for loading indicators in buttons, cards, and anywhere your UI needs to signal activity.

Spinner Structure:

<!-- Border spinner (primary) -->
<span class="spinner spinner-border spinner-primary"></span>

<!-- Border spinner (success) -->
<span class="spinner spinner-border spinner-success"></span>

<!-- Grow spinner (primary) -->
<span class="spinner spinner-grow spinner-primary"></span>

<!-- Small spinner -->
<span class="spinner spinner-border spinner-primary spinner-sm"></span>

<!-- Large spinner -->
<span class="spinner spinner-border spinner-primary spinner-lg"></span>

Grid System

Sistem grid responsif 12-column dengan mobile-first approach.

Demo

col-md-4

col-lg-3

<div class="row">
    <div class="col-12 col-md-6 col-lg-4">
        Content 1
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        Content 2
    </div>
    <div class="col-12 col-md-12 col-lg-4">
        Content 3
    </div>
</div>

Breakpoint	Class Prefix	Screen Size
Mobile	`.col-*`	< 768px
Tablet	`.col-md-*`	≥ 768px
Desktop	`.col-lg-*`	≥ 992px

Container System

Live Container Example

Standard `.container`

This container centers your content and adds responsive horizontal padding. Its width adapts to the screen size, creating readable layouts for any device.

Fluid `.container-fluid`

This container-fluid always takes 100% of the width with extra padding for large content sections and full-bleed backgrounds.

How to Use

Standard Container: Use .container for a responsive, centered layout with a maximum width at each breakpoint.
Fluid Container: Use .container-fluid for sections that should always be 100% wide, with ample side padding.

Both container types add horizontal padding and help keep your layouts readable and balanced across all screen sizes.

Container Structure:

<!-- Standard container -->
<div class="container">
    <h4>Centered Content</h4>
    <p>Your responsive content goes here...</p>
</div>

<!-- Fluid container -->
<div class="container-fluid">
    <h4>Full-width Content</h4>
    <p>Stretches across the whole viewport with padding.</p>
</div>

Columns & Grid System

Live Column Example

.col-4

.col-6

.col-3

How to Use

Columns: Wrap columns (.col-*) inside .row for a responsive grid. Up to 12 units per .row.
Responsive: Use .col-md-* and .col-lg-* for tablet and desktop layouts.
Offset Columns: Add spacing before columns using .offset-* classes.
Vertical/Horizontal Alignment: Use .align-center or .justify-center for quick alignment.

The grid provides a flexible and mobile-first approach to creating responsive layouts, including full rows, offsets, and alignments.

Column Structure:

<div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
</div>

<div class="row">
    <div class="col-6">Column A</div>
    <div class="col-6">Column B</div>
</div>

<div class="row align-center">
    <div class="col-8">Main Content</div>
    <div class="col-4">Sidebar</div>
</div>

<div class="row">
    <div class="col-5 offset-2">Offset Column</div>
    <div class="col-5">Other Column</div>
</div>

Colors

Color palette dengan dukungan dark mode dan variants 50-900.

Demo

Primary
#5C25A7

Success
#10b981

Danger
#ef4444

Info
#0ea5e9

Warning
#f59e0b

Secondary
#475569

Gradient Colors

Demo

Primary Gradient

Success Gradient

Info Gradient

<!-- Background Colors -->
<div class="bg-primary">Primary Background</div>
<div class="bg-success">Success Background</div>

<!-- Text Colors -->
<span class="text-primary">Primary Text</span>
<span class="text-danger">Danger Text</span>

<!-- Gradients -->
<div class="bg-gradient-primary">Primary Gradient</div>
<div class="bg-gradient-success">Success Gradient</div>

Typography System

Live Typography Example

This is a 3XL Bold Primary Heading

This is a 2XL Semibold Success Heading

This is a XL Medium Info Heading

This is a LG Normal Danger Heading

This is a Base Light Secondary Paragraph

This is a Small Warning Text

This is extra small monospace text

How to Use

Font Sizes: Use classes like .text-xs, .text-lg, .text-3xl for scalable typography.
Font Weights: Use .font-light up to .font-bold for different emphasis.
Text Colors: Add color utility classes such as .text-primary, .text-danger, or .text-warning for instant theme color.
Monospace Text: Use the font-mono class or style="font-family: var(--font-mono)" for code or UI text.

The typography system gives you scalable, beautiful, and consistent text for headings, paragraphs, and inline styles—fully responsive and theme adaptive.

Typography Structure:

<p class="text-3xl font-bold text-primary">3XL Bold Primary Heading</p>
<p class="text-xl text-info font-medium">XL Info Medium Heading</p>
<p class="text-base text-secondary font-light">Base Light Secondary Paragraph</p>
<p class="text-xs" style="font-family: var(--font-mono);">Extra Small Monospace Text</p>

Spacing Utilities

Live Spacing Example

.p-4
Padded

.p-3 .m-3

.p-1 .mb-4

How to Use

Margin: .m-*, .mt-*, .mb-*, .ms-*, .me-*
Padding: .p-*, .pt-*, .pb-*, .ps-*, .pe-*
Sizes: Use numbers 0 (none), 1 (xs), 2 (sm), 3 (md), 4 (lg), 5 (xl)

Combine multiple spacing classes for instant layout adjustments without custom CSS.

Spacing Structure:

<div class="p-4 m-2">Padded and margin box</div>
<div class="p-3 m-3">More spacing example</div>
<div class="mt-4 mb-2">Top and bottom margin</div>

Display Utilities

Live Display Example

How to Use

Display Types: Use .d-none, .d-block, .d-inline, .d-inline-block, .d-flex, .d-grid as needed.
Responsive: Combine with breakpoints for responsive changes (e.g. .d-md-block).

Toggle or alter the display of elements instantly for all or specific breakpoints.

Display Structure:

<span class="d-block">Block element</span>
<span class="d-none">Hidden on all</span>
<div class="d-flex">Flex container</div>

Border Radius Utilities

Live Border Radius Example

XS .rounded-xs

SM .rounded-sm

MD .rounded-md

LG .rounded-lg

XL .rounded-xl

2XL .rounded-2xl

Full .rounded-full

TL .rounded-tl

TR .rounded-tr

BL .rounded-bl

BR .rounded-br

How to Use

Radius Base: .rounded-xs, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-full
Radius Advance: .rounded-tl, .rounded-tr, .rounded-bl, .rounded-br

Use the border radius class to instantly soften the corners on any element.

Border Radius Utility Structure:

<div class="rounded-lg">Large rounded corners</div>
<div class="rounded-full">Pill/Full rounded</div>
<div class="rounded-tl">Top Left only rounded</div>

Flex Utilities

Live Flex Example

.d-flex .flex-row .align-center

.flex-column Vertical item Another item

Start Middle End

How to Use

Flex Container: Start with .d-flex or .d-inline-flex for a flex context.
Direction & Wrap: Use .flex-row (horizontal), .flex-column (vertical), .flex-wrap, and .flex-nowrap.
Alignment: Set with .align-center, .align-start, .align-end, .justify-between, .justify-center, etc.

Flex utilities let you create robust layouts and align content responsively with single classes.

Flex Structure:

<div class="d-flex flex-row align-center">
    <span>Aligned horizontally!</span>
    <span>Another item</span>
</div>

<div class="d-flex flex-column align-end">
    <span>Stacked bottom!</span>
    <span>Another item</span>
</div>

Text Utilities

Live Text Utils Example

Left aligned with .text-start

Center aligned with .text-center

Right aligned with .text-end

Uppercase and bold

THIS BECOMES LOWERCASE

this sentence gets Capitalize

Underlined link Text-decoration-none disables underline/strikethrough

How to Use

Text alignment: .text-start, .text-center, .text-end, .text-justify
Text transform: .text-uppercase, .text-lowercase, .text-capitalize
Text decoration: .text-decoration-none, .text-decoration-underline

Instantly control text alignment, decoration, and case for any element.

Text Utility Structure:

<p class="text-center text-uppercase">Centered and uppercase text</p>
<a class="text-decoration-underline">Underlined link</a>
<p class="text-capitalize">this becomes Capitalized</p>

Position Utilities

Live Position Example

.position-absolute .top-0 .end-0

.position-absolute .bottom-0 .start-0

.position-sticky .top-0

How to Use

Set Position: Use .position-static, .position-relative, .position-absolute, .position-fixed, or .position-sticky.
Offset Directions: Quickly move or pin elements with .top-0, .bottom-0, .start-0, .end-0 and 50/100 variants.
Z-index: Bring elements above or below with .z-10, .z-20, up to .z-50.

Easily pin, overlay, and layer elements anywhere with position and z-index utilities—no custom CSS needed.

Position Utility Structure:

<div class="position-relative" style="height:120px;">
    <div class="position-absolute top-0 end-0">Corner!</div>
    <div class="position-absolute bottom-0 start-0 z-20">Bottom left z-20</div>
</div>

<div class="position-fixed bottom-0 end-0 z-40">Fixed bottom-right overlay</div>
<div class="position-sticky top-0">Sticky at top</div>

Fixed Position Utilities

How to Use

Top: Use .fixed-top to fix an element at the top spanning full width.
Bottom: Use .fixed-bottom to fix an element at the bottom spanning full width.
Left / Right: .fixed-left or .fixed-right pin elements to the left or right edge for sidebars or flyouts.

Combine with .z-* and color utilities for best results. All fixed elements maintain a high stacking order so they're always visible.

Fixed Utility Structure:

<div class="fixed-top">Fixed to top</div>
<div class="fixed-bottom">Fixed to bottom</div>
<div class="fixed-left">Fixed to left</div>
<div class="fixed-right">Fixed to right</div>

Opacity Utilities

Live Opacity Example

100% (.opacity-100)

75% (.opacity-75)

50% (.opacity-50)

25% (.opacity-25)

0% (.opacity-0)

How to Use

Control Opacity: .opacity-0, .opacity-25, .opacity-50, .opacity-75, .opacity-100

Class opacity dapat digunakan untuk mengatur transparansi elemen secara instan.

Opacity Utility Structure:

<div class="opacity-100">Fully opaque</div>
<div class="opacity-50">Half transparent</div>
<div class="opacity-0">Invisible</div>

Shadows Utilities

Live Shadows Example

Small Shadow with .shadow-sm

Medium Shadow with .shadow-md

Large Shadow with .shadow-lg

Extra Large Shadow with .shadow-xl

2XL Shadow with .shadow-2xl

How to Use

Apply shadow effects: .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl

Gunakan kelas shadow pada container atau elemen lain untuk memberikan efek bayangan dengan berbagai ketebalan.

Shadows Utility Structure:

<div class="shadow-sm">Small Shadow</div>
<div class="shadow-lg">Large Shadow</div>
<div class="shadow-2xl">2XL Shadow</div>

Customization & Utility Classes

Overview

The framework includes a rich set of CSS utility classes for fast layout and style customization. These utilities provide control over spacing, color, borders, radius, typography, shadow, containers, grid system, responsiveness, and more. You can combine these classes in your HTML for any design or style pattern.

Spacing Utilities

Demo

.p-4 (padding)

.mt-3 (margin top) .mb-3 (margin bottom)

<div class="p-4 bg-light mb-2">.p-4 (padding)</div>
<div class="mt-3 mb-3 text-primary">.mt-3 (margin top) .mb-3 (margin bottom)</div>

Color Utilities

Demo

.bg-primary .text-light .bg-success .bg-danger .bg-info .bg-warning .text-dark

<span class="bg-primary text-light p-2 rounded">.bg-primary .text-light</span>
<span class="bg-success text-light p-2 rounded">.bg-success</span>
<span class="bg-danger text-light p-2 rounded">.bg-danger</span>
<span class="bg-info text-light p-2 rounded">.bg-info</span>
<span class="bg-warning text-dark p-2 rounded">.bg-warning .text-dark</span>

Typography Utilities

Demo

.text-lg .font-bold

.text-xs .font-light

.text-capitalize

.text-center

<div class="text-lg font-bold">.text-lg .font-bold</div>
<div class="text-xs font-light">.text-xs .font-light</div>
<div class="text-capitalize">.text-capitalize</div>
<div class="text-center">.text-center</div>

Border Radius & Shadows

Demo

.rounded-xl .shadow-lg

.rounded-full .shadow-sm

<div class="rounded-xl shadow-lg">.rounded-xl .shadow-lg</div>
<div class="rounded-full shadow-sm">.rounded-full .shadow-sm</div>

Container & Grid System

Demo

.col-6

<div class="container">
  <div class="row">
    <div class="col-6 bg-primary">.col-6</div>
    <div class="col-6 bg-secondary">.col-6</div>
  </div>
</div>

Alignment Utilities

Demo

Centered Item

<div class="d-flex justify-center align-center">
  <span class="bg-success text-light p-2 rounded">Centered Item</span>
</div>

Class	Description
`.p-[0-5], .m-[0-5], .pt-, .pb-, .mt-, .mb-, .ms-, .me-, .ps-, .pe-`	Padding and margin utility classes. Apply spacing (extra small to extra large) to any side or axis.
`.bg-[primary\|secondary\|success\|danger\|info\|warning\|light\|dark]`	Background color utilities for quick theme coloring.
`.text-[primary\|secondary\|success\|danger\|info\|warning\|light\|dark]`	Text color utilities for typography highlights.
`.rounded-*`	Border radius utility (.rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-full).
`.shadow-*`	Shadow effect utilities (.shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl).
`.container, .container-fluid`	Layout containers for responsive and fluid page sections.
`.row, .col-*`	Grid system classes. Use .row for flexbox grid, .col-[1-12] for columns, responsive variants are available (.col-md-, .col-lg-).
`.justify-, .align-`	Flex and grid alignment utilities (justify-center, align-center, justify-between, etc.).
`.d-*`	Display utilities (d-block, d-flex, d-none, d-grid, etc.).
`.text-*`	Typography helpers (text-xs, text-sm, text-lg, text-center, text-uppercase, etc.).
`.font-[light\|normal\|medium\|semibold\|bold]`	Set font weights with utility classes.
`.opacity-*`	Opacity utility classes (opacity-25, opacity-50, opacity-75).
`.position-*`	Position utilities (relative, absolute, fixed, sticky), and placement classes (top-0, right-0, etc.).
`.glass`	Glassmorphism effect for backgrounds and cards.

How to Use

Mix utility classes on any HTML element to quickly customize layout, design, and style without writing new CSS. For example:
<div class="bg-primary text-light p-4 rounded-lg shadow-lg">Content</div>
You can combine multiple utilities as needed for spacing, color, typography, radius, shadow, and positioning.

Responsive Design

Many grid and spacing utilities use mobile-first breakpoints (.col-md-* / .col-lg-*) for advanced layouts.
Use .container and .container-fluid for responsive sections.

Dark & Light Theme Support

All utility classes support both dark and light themes. Classes automatically adapt to [data-theme="dark"] for optimal readability and style.

Dark & Light Mode Toggle

Overview

Instantly switch your entire UI between beautiful dark and light themes—with a single button.
The toggle is fully compatible with all your CSS utility, component, and color classes out-of-the-box.

Live Demo

Demo

How it Works

The theme toggle button updates the data-theme attribute on <html>, instantly switching all styles between dark and light modes. User preference is saved in localStorage for a persistent experience.

<button id="themeToggle" class="btn btn-outline me-3">
  🌙 Dark
</button>

Selector/Class/ID	Description
`#themeToggle`	Theme switcher button. ID required for JS targeting.
`data-theme="dark"`	Set on `<html>` to activate dark theme. All CSS adjusts based on this.
`.btn`	Inherits all your button style utilities, layout options, and variants.

Accessibility

Button text updates so screen readers announce "Dark" or "Light".
Add aria-label="Toggle dark mode" if you want even better accessibility.

Advanced Usage

Custom Positioning: Place the button in your navbar, hero, or floating on the page—theming will always work.
Listen for Theme Change:
window.addEventListener('themeChanged', e => { console.log(e.detail.theme); });
Integrate with User Profiles: Save the state or user preference in your app database for personalized theming.
Styling: Use any .btn-* or icon you wish for the toggle—colors, shapes, and even tooltips.

Ready for All Templates

Add the dark/light mode toggle to any theme—Blog, SaaS, Dashboard, Company, Docs, Portfolio… it just works.
All CSS, cards, forms, navbars, and backgrounds will seamlessly adapt to the mode you choose.

🚀 Axcora Modern CSS Axcora CSS

Installation

Quick Start

Accordion Components

Live Accordion Example

What is Modern Accordion?

Can I use it for FAQs?

Does it support dark mode?

How to Use

Import on Axcora SSG

Badge Component

Live Badge Example

How to Use

Breadcrumb Component

How to Use

Blockquote

Dark Theme Support

Buttons

Cards

Card Title

Glass Card

Simple Card

Carousel

Dropdown Component

Live Dropdown Example

How to Use

Forms

Glassmorphism Components

Live Glassmorphism Example

Frosted Glass Panel

How to Use

Hero

Modern Hero Section

Images

Modal Components

Live Modal Example

🚀 Framework Modal

How to Use

Navbar

Pagination

Table Components

Live Table Example

How to Use

Tabs Component

Live Tabs Example

Profile

Settings

Activity

How to Use

Toast

Usage

Video Embed / Responsive Iframe

Scrollspy Navigation

Scrollspy Component Demo

How to Use Scrollspy

Axcora SSG Integration

Tips & Notes

Spinner Components

Live Spinner Example

How to Use

Grid System

Container System

Live Container Example

Standard .container

Fluid .container-fluid

How to Use

Columns & Grid System

Live Column Example

How to Use

Colors

Typography System

Live Typography Example

How to Use

Spacing Utilities

Live Spacing Example

How to Use

Display Utilities

Live Display Example

How to Use

Border Radius Utilities

🚀 Axcora
Modern CSS Axcora CSS

Standard `.container`

Fluid `.container-fluid`