Documentation v1.0

Professional CSS Engine for Axcora Zeta Perl SSG.

Hero Section

A clean, high-impact header using pure CSS gradients (No external images required).

ONTA FRAMEWORK

The fastest Perl Static Site Generator for modern web developers. Built for efficiency, speed, and zero dependencies.

<!-- Professional Pure CSS Hero -->
<section class="axcora_perl_hero">
    <div class="axcora_perl_container">
        <h1>Your Professional Title</h1>
        <p>Your description without external image dependencies.</p>
        <div style="display: flex; gap: 15px; justify-content: center;">
            <a href="#" class="axcora_perl_btn axcora_perl_btn_primary">Primary Action</a>
        </div>
    </div>
</section>

Grid System

Desktop 1-4 grids, Auto-stack on mobile.

Grid 1
Grid 2
Grid 3
<div class="axcora_perl_grid axcora_perl_3grid">...</div>

Card & Badge

Perl SSG

Professional Static Site

Generate clean HTML with ONTA Engine.

Container & Container Fluid

Manage content width and alignment across different screen sizes.

.axcora_perl_container (Fixed Max Width)
.axcora_perl_container_fluid (100% Width)
<div class="axcora_perl_container">...</div> <div class="axcora_perl_container_fluid">...</div>

Breadcrumb

Breadcumb for your page and content.

<!-- Breadcrumb --> <ul class="axcora_perl_breadcumb"> ... </ul>

Responsive Pagination

Navigation for multi-page content with auto-wrap support for mobile screens.

<!-- Responsive Pagination -->
<ul class="axcora_perl_paginasi">
  <li><a href="#">Prev</a></li>
  <li><span class="active">1</span></li>
  <li><a href="#">2</a></li>
  <li><a href="#">Next</a></li>
</ul>

Label Badge

Contextual badges for status or categories.

Primary Dark Muted Success
<span class="axcora_perl_badge axcora_perl_bg_primary">New</span>

Responsive Media

Handle images, iframes, and videos to be fully responsive.

Demo
<!-- Image --> <img src="..." class="axcora_perl_img_responsive"> <!-- Video Wrapper --> <div class="axcora_perl_video_container"> <iframe src="..."></iframe> </div>

Color System

Our predefined color utility classes for background and text.

Primary
Dark
Light
White

Text colors: Primary Text Color, Main Text, Muted Text.

<div class="axcora_perl_bg_primary">...</div> <span class="axcora_perl_text_primary">...</span>

Typography

Default font styling and headings.

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

This is a standard paragraph (p). It uses the Inter/System font stack for maximum readability and clean professional look.

Bold text, Italic text, and Hyperlink.

<h1>Heading</h1> <p>Paragraph content</p>

Form Elements

Complete form controls including input, select, textarea, and radio buttons.

<!-- Full Form Implementation -->
<div class="axcora_perl_form_group">
    <label class="axcora_perl_label">Full Name</label>
    <input type="text" class="axcora_perl_input" placeholder="Enter name...">
</div>

<div class="axcora_perl_form_group">
    <label class="axcora_perl_label">Select Category</label>
    <select class="axcora_perl_select">
        <option>Option 1</option>
    </select>
</div>

<div class="axcora_perl_form_group">
    <label class="axcora_perl_label">Message</label>
    <textarea class="axcora_perl_textarea" rows="4"></textarea>
</div>

<div class="axcora_perl_form_group">
    <label><input type="radio" name="r"> Option A</label>
</div>

<button class="axcora_perl_btn axcora_perl_btn_primary">Submit</button>

Data Tables

Responsive tables with striped rows and hover effects. axcora_perl_table

Project Technology Status Version
Axcora Zetta Perl SSG Active v1.0.0
ONTA Engine CSS Framework Stable v1.2.5
Zetta Core AI Integration Completed v2.0.1 
<!-- Responsive Table Wrapper -->
<div class="axcora_perl_table_responsive">
    <table class="axcora_perl_table axcora_perl_table_striped">
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
    </table>
</div>