Simple Morph
Semantic Components Advanced Star

UI Components

Enhanced UI components that build upon semantic HTML with additional classes for richer functionality and styling.

Card Components

Basic Cards

Simple Card

A basic card with glassmorphism styling. Perfect for content organization and visual hierarchy.

Another Card

Cards automatically adapt to content and maintain consistent spacing and styling.

Show Code Example 
<div class="card">
    <h4>Card Title</h4>
    <p>Card content goes here...</p>
</div>

Image Cards

Card header image

Image Card

Cards with header images for rich content previews and visual appeal.

Show Code Example 
<div class="card card--image">
    <img src="image.jpg" alt="Description">
    <div class="card-body">
        <h4>Card Title</h4>
        <p>Card content...</p>
    </div>
</div>

Enhanced Form Components

Contact Form

Show Code Example 
<form class="contact-form">
    <label for="name">Full Name</label>
    <input type="text" id="name" placeholder="Enter your name">

    <label for="email">Email Address</label>
    <input type="email" id="email" placeholder="your@email.com">

    <label for="subject">Subject</label>
    <select id="subject">
        <option>Choose a subject</option>
        <option>General Inquiry</option>
    </select>

    <label for="message">Message</label>
    <textarea id="message" placeholder="Your message..."></textarea>

    <label class="checkbox-label">
        <input type="checkbox">
        I agree to the terms
    </label>

    <button type="submit" class="button-primary">Send Message</button>
</form>

Table Components

Basic Data Table

Feature Status Priority
Glassmorphism Effects Complete High
Mobile Responsive Complete High
Dark Theme Complete Medium
Animations In Progress Medium
Show Code Example 
<div class="table-container">
    <table>
        <thead>
        <tr>
            <th>Feature</th>
            <th>Status</th>
            <th>Priority</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Feature Name</td>
            <td><span class="badge badge-success">Complete</span></td>
            <td>High</td>
        </tr>
        </tbody>
    </table>
</div>

Utility Components

Badges

Default Primary Success Warning Error
Show Code Example 
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>

Basic Modals

Show Code Example 
<!-- Trigger Button -->
<button onclick="openModal('modal-demo')" class="button-primary">Open Modal</button>

<!-- Modal Structure -->
<div class="modal" id="modal-demo" role="dialog">
    <div class="modal-content">
        <header class="modal-header">
            <h2>Modal Title</h2>
            <button class="modal-close">×</button>
        </header>
        <div class="modal-body">
            <p>Modal content goes here...</p>
        </div>
        <footer class="modal-footer">
            <button class="modal-close button-secondary">Cancel</button>
            <button class="button-primary">Confirm</button>
        </footer>
    </div>
</div>