Web Examples

Use the tokens and lightweight component classes to compose screens.

Back to Overview

Import CSS & JS

<link rel="stylesheet" href="/web/tokens.css" />
<link rel="stylesheet" href="/web/components.css" />
<link rel="stylesheet" href="/web/behaviors.css" />
<script src="/web/behaviors.js"></script>
<body class="ig-theme-dark">...</body>

Hero + Surface

Live preview

Hello from Ignyos

Concise, elegant, and consistent by default.

Markup

<div class="ig-container">
  <section class="ig-surface">
    <h1 class="ig-hero-title"><span class="ig-accent">Hello</span> from Ignyos</h1>
    <p class="ig-lead">Concise, elegant, and consistent by default.</p>
  </section>
</div>

Section List

Live preview

Tokens

Color, spacing, radius, shadow, typography.
Components

Surface, hero, list, pill, muted text.
Responsive

Mobile-friendly typography and spacing.

Markup

<ul class="ig-list">
  <li class="ig-list-item">
    <div class="ig-item-title">Tokens</div>
    <div class="ig-item-body">Color, spacing, radius, shadow, typography.</div>
  </li>
  ...
</ul>

Modal

Live preview

Click to open a modal dialog with overlay and close behaviors.

Usage

// Simple modal
IgModal.show('Title', 'Content here');

// With buttons
IgModal.show('Confirm', 'Are you sure?', {
  buttons: [
    { text: 'Cancel', close: true },
    { text: 'Confirm', onClick: () => console.log('Confirmed!') }
  ]
});

// With HTML content
IgModal.show('Details', '<p>Rich <strong>HTML</strong> content</p>');

Alert / Toast

Live preview

Step 1: Select a message type below to change the style.

Step 2: Click a position to show the message.

Usage

// Basic message (default: top-right, auto-dismiss 3s)
IgMsg.success('Saved successfully!');

// With position
IgMsg.info('Processing...', { position: 'b' });
IgMsg.warning('Check this', { position: 'tl' });

// With custom duration (milliseconds)
IgMsg.success('Copied!', { duration: 2000 });

// Positions: 'tl', 't', 'tr', 'bl', 'b', 'br'
// Types: 'info', 'success', 'warning', 'error'