Components

Pre-built UI components for common interface patterns.

Buttons

Use .z-btn for standard buttons. Add .z-btn-primary or .z-btn-danger for variant styles.

<button class="z-btn">Default</button> <button class="z-btn z-btn-primary">Primary</button> <button class="z-btn z-btn-danger">Danger</button>

Button Usage

Class Purpose
.z-btn Base button style. Neutral action (Cancel, Back, Close).
.z-btn-primary Primary action (Save, Submit, Confirm). Use once per view.
.z-btn-danger Destructive action (Delete, Remove, Reject). Use sparingly.

Cards

Container for grouped content. Use .z-card with .z-card-body, .z-card-header, and .z-card-footer.

Card Title Status

Card content goes here. Cards group related information and actions.

<div class="z-card"> <div class="z-card-header"> <strong>Card Title</strong> </div> <div class="z-card-body"> Card content goes here. </div> <div class="z-card-footer"> <button class="z-btn z-btn-primary">Action</button> </div> </div>

Carded Accents

Cards with colored left border for emphasis. Use .z-card-accent with color modifier.

!
Standard Accent

Default primary accent (yellow)

i
Info Accent

Informational message (blue)

✓
Success Accent

Success or completed (green)

!
Danger Accent

Error or warning (red)

<!-- Standard Accent (Yellow) --> <div class="z-card z-card-accent"> <div class="z-card-body">Content</div> </div> <!-- Info Accent (Blue) --> <div class="z-card z-card-accent-info"> <div class="z-card-body">Content</div> </div> <!-- Success Accent (Green) --> <div class="z-card z-card-accent-success"> <div class="z-card-body">Content</div> </div> <!-- Danger Accent (Red) --> <div class="z-card z-card-accent-danger"> <div class="z-card-body">Content</div> </div> <!-- Warning Accent (Orange) --> <div class="z-card z-card-accent-warning"> <div class="z-card-body">Content</div> </div>

Carded Accent Variants

Class Color Usage
.z-card-accent Yellow Default emphasis
.z-card-accent-info Blue Informational messages
.z-card-accent-success Green Success states
.z-card-accent-danger Red Errors, warnings
.z-card-accent-warning Orange Cautions, notices

Badges

Small labels for status, counts, or categorization. Use .z-badge with color modifier.

Primary Danger
<span class="z-badge z-badge-primary">Primary</span> <span class="z-badge z-badge-danger">Danger</span>

Progress Bars

Display completion or status. Use .z-progress with .z-progress-bar. Set width inline for progress value.

65%
Loading...
<!-- Standard Progress --> <div class="z-progress"> <div class="z-progress-bar" style="width: 65%;">65%</div> </div> <!-- Small Success Progress --> <div class="z-progress z-progress-sm"> <div class="z-progress-bar z-progress-bar-success" style="width: 80%;"></div> </div> <!-- Large Animated Striped Progress --> <div class="z-progress z-progress-lg"> <div class="z-progress-bar z-progress-bar-striped z-progress-bar-animated" style="width: 45%;">Loading...</div> </div>

Progress Variants

Class Purpose
.z-progress-bar-primary Default (yellow). Standard operations.
.z-progress-bar-success Green. Completed or successful states.
.z-progress-bar-danger Red. Errors or critical thresholds.
.z-progress-bar-info Blue. Informational progress.
.z-progress-bar-striped Diagonal stripe pattern.
.z-progress-bar-animated Animates stripes. Use for indeterminate loading.

Alerts

Use cards with color modifiers for alert messages. Pair with badges for severity indicators.

Error

Operation failed. Check logs for details.

Striped Headers

Section headers with subtle striped background pattern. Use .z-header-striped with optional color modifier.

Default Header

Standard striped header with yellow accent

Info Header

Informational header with blue accent

Success Header

Success header with green accent

Danger Header

Danger header with red accent

<!-- Default (Yellow) --> <div class="z-header-striped"> <h3>Header Title</h3> <p>Optional description</p> </div> <!-- Info (Blue) --> <div class="z-header-striped z-header-striped-info"> <h3>Header Title</h3> </div> <!-- Success (Green) --> <div class="z-header-striped z-header-striped-success"> <h3>Header Title</h3> </div> <!-- Danger (Red) --> <div class="z-header-striped z-header-striped-danger"> <h3>Header Title</h3> </div>

Striped Header Variants

Class Border Color Usage
.z-header-striped Default Standard section headers
.z-header-striped-info Blue Informational sections
.z-header-striped-success Green Success or completed sections
.z-header-striped-danger Red Warning or critical sections

Inputs

Text input fields. Use .z-input with .z-form-group wrapper.

<div class="z-form-group"> <label class="z-label">Username</label> <input type="text" class="z-input" placeholder="Enter username"> </div>

Selects

Dropdown selection. Use .z-select element.

<div class="z-form-group"> <label class="z-label">Status</label> <select class="z-select"> <option>Active</option> <option>Pending</option> <option>Inactive</option> </select> </div>

Range Sliders

Numeric input via slider. Use .z-range input type.

<input type="range" class="z-range" min="0" max="100" value="50">

Checkboxes & Radios

Form selection inputs. Use .z-checkbox for checkboxes and .z-radio for radio buttons.

Checkboxes
Radio Buttons
<!-- Checkbox --> <label class="z-checkbox"> <input type="checkbox" checked> <span class="z-checkmark"></span> Label text </label> <!-- Radio Button --> <label class="z-radio"> <input type="radio" name="group" checked> <span class="z-indicator"></span> Label text </label>

Usage

Element Purpose
.z-checkbox Multiple selection. Wrap label with checkbox input.
.z-radio Single selection. Use same name attribute for mutually exclusive options.
.z-checkmark Visual checkbox indicator with chamfered corner.
.z-indicator Visual radio indicator (circular).

Tables

Data tables. Wrap .z-table in .z-table-responsive for horizontal scrolling.

ID Name Status Actions
001 System Alpha Active
002 System Beta Pending
<div class="z-table-responsive"> <table class="z-table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>System Alpha</td> <td><span class="z-badge z-badge-success">Active</span></td> <td><button class="z-btn">Edit</button></td> </tr> </tbody> </table> </div>

Lists

Unordered lists use square bullets. Ordered lists use zero-padded numbers.

Unordered List
  • First item
  • Second item
  • Third item
Ordered List
  1. Step one
  2. Step two
  3. Step three