Litura

A minimalist CSS library focused on content

Prose

The prose component automatically styles HTML elements within articles, blogs, and documentation. It provides readable typography while maintaining heading hierarchy.

Heading H1

Heading H2

Heading H3

This is a content-focused library. Bold text, italic, highlighted, deleted, inserted.

Keyboard shortcuts: Ctrl + C to copy.

Minimalism ≠ poverty. It's focusing on what matters.
npm i litura
  • First list item
  • Second list item
HTML 
<article class="prose">
  <h1>Header H1</h1>
  <h2>Header H2</h2>
  <h3>Header H3</h3>
  <p>This is a content-focused library. <strong>Bold text</strong>, <em>italic</em>, 
  <mark>highlighted</mark>, <del>deleted</del>, <ins>inserted</ins>.</p>
  <p>Keyboard shortcuts: <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
  <blockquote>Minimalism ≠ poverty. It's focusing on what matters.</blockquote>
  <pre><code>npm i litura</code></pre>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
  </ul>
</article>

CSS Classes

.prose
Main prose component class - applies typographic styles to all HTML elements inside

Cards

Versatile content containers with neutral backgrounds, supporting headers, body, and footers. Includes an accented variant for emphasis.

Basic

Default Card

Minimal neutral container with border and radius.

Soft

Soft background variant.

Elevated

Shadow and hover lift.

Accented

Accent top border.

HTML 
<div class="card card--stretch">
  <div class="card__header">
    <h4 class="card__title">Default Card</h4>
  </div>
  <div class="card__body">Minimal neutral container.</div>
  <div class="card__footer">
    <button class="btn btn--ghost">Cancel</button>
    <button class="btn">Action</button>
  </div>
</div>

<div class="card card--soft card--stretch">
  <h4 class="card__title">Soft</h4>
  <p class="card__body">Soft background variant.</p>
</div>

<div class="card card--elevated card--interactive card--stretch">
  <h4 class="card__title">Elevated</h4>
  <p class="card__body">Shadow and hover lift.</p>
</div>

<div class="card card--accented card--stretch">
  <h4 class="card__title">Accented</h4>
  <p class="card__body">Accent top border.</p>
</div>

Media & Horizontal

Placeholder

Card with Image

Media header with rounded top corners.

Placeholder

Horizontal Card

Media on the left, content on the right. Image uses object-fit: cover.

HTML 
<!-- Card with media header -->
<div class="card">
  <div class="card__media">
    <img alt="..." src="...">
  </div>
  <h4 class="card__title">Card with Image</h4>
  <p class="card__body">Media header with rounded top corners.</p>
</div>

<!-- Horizontal card -->
<div class="card card--horizontal">
  <div class="card__media">
    <img alt="..." src="...">
  </div>
  <div>
    <h4 class="card__title">Horizontal Card</h4>
    <p class="card__body">Media on the left, content on the right.</p>
    <div class="card__footer">
      <button class="btn btn--ghost">Cancel</button>
      <button class="btn">Open</button>
    </div>
  </div>
</div>

CSS Classes

.card
Card block container
.card__header
Header area with title or actions
.card__title
Card title
.card__subtitle
Optional subtitle text
.card__media
Media container for image/video header or side
.card__body
Main content area
.card__footer
Footer area for actions
.card--soft
Soft background variant
.card--elevated
Shadowed variant
.card--interactive
Hover lift and accent border
.card--horizontal
Horizontal layout with media on the side
.card--accented
Top accent border
.card--compact|spacious
Padding density options
.card--fluid|narrow|wide
Width modifiers (default max-width ~36rem; fluid removes limit)

Buttons

Button system with three main variants. Uses CSS custom properties for consistent styling across all color schemes.

HTML 
<button class="btn">Default</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--soft">Soft</button>
<button class="btn" disabled>Disabled</button>

CSS Classes

.btn
Basic button class - solid background in accent color
.btn--ghost
Ghost variant - transparent background with border
.btn--soft
Soft variant - semi-transparent background (15% opacity)

Dialogs

Modal dialogs with backdrop overlay. CSS-only implementation using details/summary with optional JavaScript enhancement for focus management and ESC key support.

Open dialog

Dialog Title

This is dialog content. You can put any HTML content here.

Dialog has a backdrop that can be clicked to close (with JavaScript enhancement).

HTML 
<details class="dialog">
  <summary class="btn">Open dialog</summary>
  <div class="dialog__backdrop">
    <div class="dialog__content">
      <div class="dialog__header">
        <h3 class="dialog__title">Dialog Title</h3>
        <button class="dialog__close" aria-label="Close dialog">×</button>
      </div>
      <div class="dialog__body">
        <p>This is dialog content.</p>
      </div>
      <div class="dialog__footer">
        <button class="btn btn--ghost">Cancel</button>
        <button class="btn">Confirm</button>
      </div>
    </div>
  </div>
</details>
🔧

JavaScript Enhancement

Optional - dialogs work fully without JavaScript. File js/dialog-alert-enhancement.js adds:

  • Click backdrop to close - close on backdrop click
  • ESC key support - close with Escape key
  • Focus management - automatic focus and focus trap
  • Focus restore - return focus to element that opened dialog

To disable: remove line <script src="./js/dialog-alert-enhancement.js">

CSS Classes

.dialog
Main dialog container (details element)
.dialog__backdrop
Semi-transparent background behind dialog - fullscreen overlay
.dialog__content
Main dialog content container - centered on screen
.dialog__header
Dialog header with title and close button
.dialog__title
Dialog title
.dialog__close
Dialog close button (×)
.dialog__body
Main dialog content
.dialog__footer
Dialog footer with action buttons
.dialog--small
Smaller dialog (max-width: 20rem)
.dialog--large
Larger dialog (max-width: 48rem)
.dialog--fullscreen
Full screen dialog on mobile

Alerts

Notification system with 4 types (info, success, warning, error) and solid variants. Supports positioning in different parts of the screen and auto-dismiss with JavaScript.

Information
This is an example of informational alert.
Operation completed successfully!
Warning (standard)!
Error during operation execution!
Success in solid version!
Small informational alert.
Large error
This is a larger error alert with title.
HTML 
<!-- Informational alert -->
<div class="alert alert--info">
  <div class="alert__icon">
    <svg viewBox="0 0 20 20">...</svg>
  </div>
  <div class="alert__content">
    <div class="alert__title">Information</div>
    <div class="alert__message">This is an example of informational alert.</div>
  </div>
  <button class="alert__close" aria-label="Close">×</button>
</div>

<!-- Success alert -->
<div class="alert alert--success">
  <div class="alert__icon">...</div>
  <div class="alert__content">
    <div class="alert__message">Operation completed successfully!</div>
  </div>
</div>

<!-- Warning alert -->
<div class="alert alert--warning">
  <div class="alert__content">
    <div class="alert__message">Warning (standard)!</div>
  </div>
</div>

<!-- Error alert -->
<div class="alert alert--error">
  <div class="alert__content">
    <div class="alert__message">Error during operation execution!</div>
  </div>
</div>

<!-- Alert solid -->
<div class="alert alert--success-solid">
  <div class="alert__content">
    <div class="alert__message">Success in solid version!</div>
  </div>
</div>

<!-- Small alert -->
<div class="alert alert--small alert--info">
  <div class="alert__content">
    <div class="alert__message">Small informational alert.</div>
  </div>
</div>

<!-- Large alert -->
<div class="alert alert--large alert--error">
  <div class="alert__content">
    <div class="alert__title">Large error</div>
    <div class="alert__message">This is a larger error alert with title.</div>
  </div>
</div>
🔧

JavaScript Enhancement

Optional - alerts work fully without JavaScript. File js/dialog-alert-enhancement.js adds:

  • Auto-dismiss - automatic closing after time (data-auto-dismiss="5000")
  • Programmatic creation - creating alerts with JavaScript
  • Progress bar - visual countdown to auto-dismiss
  • Smooth animations - smooth show/hide animations

JavaScript API:

// Create alert programmatically
window.DialogAlertEnhancement.createAlert({
  type: 'success',
  title: 'Success!',
  message: 'Operation completed successfully',
  position: 'top-right',
  autoDismiss: 5000
});

To disable: remove line <script src="./js/dialog-alert-enhancement.js">

CSS Classes

.alert
Basic alert class - info type by default
.alert--info
Informational alert (blue)
.alert--success
Success alert (green)
.alert--warning
Warning alert (orange)
.alert--error
Error alert (red)
.alert--*-solid
Solid variants with full background in alert color
.alert__icon
Container for alert icon
.alert__content
Main alert content
.alert__title
Alert title (optional)
.alert__message
Alert message content
.alert__close
Alert close button
.alert--small
Smaller version of alert
.alert--large
Larger version of alert
.alert-container--*
Position containers: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center

Badges

Small inline indicators for statuses and counts. Color tokens match Alerts and Info Panels.

Types

Info Done Beta Error
HTML 
<span class="badge badge--info badge--pill">Info</span>
<span class="badge badge--success badge--pill">Done</span>
<span class="badge badge--warning badge--pill">Beta</span>
<span class="badge badge--error badge--pill">Error</span>

Solid

9 ok ! x
HTML 
<span class="badge badge--info-solid badge--pill">9</span>
<span class="badge badge--success-solid badge--pill">ok</span>
<span class="badge badge--warning-solid badge--pill">!</span>
<span class="badge badge--error-solid badge--pill">x</span>

Sizes & Dots

new new new
HTML 
<span class="badge badge--info badge--pill badge--small">new</span>
<span class="badge badge--info badge--pill">new</span>
<span class="badge badge--info badge--pill badge--large">new</span>
<span class="badge badge--dot badge--success" title="online"></span>
<span class="badge badge--dot badge--warning" title="busy"></span>
<span class="badge badge--dot badge--error" title="error"></span>

CSS Classes

.badge
Badge block – compact inline indicator
.badge__icon
Optional icon inside badge
.badge--info|success|warning|error
Type variants using status tokens
.badge--*-solid
Solid badges with white text
.badge--pill
Fully rounded shape
.badge--small|large
Size modifiers
.badge--dot
Minimal dot indicator (uses currentColor)

Labels

Compact status labels for inline metadata. Colors follow Alerts and Info Panels for visual consistency, with theme-aware mixing.

Types

Info Success Warning Error
HTML 
<span class="label label--info label--pill">Info</span>
<span class="label label--success label--pill">Success</span>
<span class="label label--warning label--pill">Warning</span>
<span class="label label--error label--pill">Error</span>

With Icon

Info Success
HTML 
<span class="label label--info label--pill">
  <svg class="label__icon" viewBox="0 0 20 20" aria-hidden="true">...</svg>
  Info
</span>

<span class="label label--success label--pill">
  <svg class="label__icon" viewBox="0 0 20 20" aria-hidden="true">...</svg>
  Success
</span>

Solid

Info Success Warning Error
HTML 
<span class="label label--info-solid label--pill">Info</span>
<span class="label label--success-solid label--pill">Success</span>
<span class="label label--warning-solid label--pill">Warning</span>
<span class="label label--error-solid label--pill">Error</span>

Sizes

Small Default Large
HTML 
<span class="label label--info label--small label--pill">Small</span>
<span class="label label--info label--pill">Default</span>
<span class="label label--info label--large label--pill">Large</span>

CSS Classes

.label
Label block – inline badge for statuses
.label__icon
Optional icon inside label
.label--info|success|warning|error
Type variants with themed background and border
.label--*-solid
Solid variants with white text
.label--pill
Fully rounded shape
.label--small|large
Size adjustments

Forms

Comprehensive form system with smart validation, custom controls and full accessibility. Supports all input types, checkboxes, radio, switch, range and file upload.

Basic Fields

Input, textarea, select with smart validation and styling.

Enter your real name
HTML 
<form class="form">
  <div class="form__group">
    <label for="name" class="required">Name</label>
    <input type="text" id="name" required placeholder="Enter name">
    <div class="form__hint">Enter your real name</div>
  </div>
  
  <div class="form__row">
    <div class="form__group">
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="email@example.com">
    </div>
    <div class="form__group">
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="+48 123 456 789">
    </div>
  </div>
  
  <div class="form__group">
    <label for="message">Message</label>
    <textarea id="message" rows="4" placeholder="Your message..."></textarea>
  </div>
</form>

Checkboxes

Custom styled checkboxes with group support and validation.

HTML 
<!-- Single checkbox -->
<label class="form__checkbox">
  <input type="checkbox" checked>
  <span>Checked checkbox</span>
</label>

<!-- Checkbox group -->
<div class="form__group">
  <label>Preferences</label>
  <div class="form__checkbox-group">
    <label class="form__checkbox">
      <input type="checkbox" name="prefs" value="email">
      <span>Email notifications</span>
    </label>
    <label class="form__checkbox">
      <input type="checkbox" name="prefs" value="sms">
      <span>SMS notifications</span>
    </label>
  </div>
</div>

Radio Buttons

Custom radio buttons with group support and orientation.

HTML 
<!-- Vertical radio group -->
<div class="form__group">
  <label>Gender</label>
  <div class="form__radio-group">
    <label class="form__radio">
      <input type="radio" name="gender" value="male" checked>
      <span>Male</span>
    </label>
    <label class="form__radio">
      <input type="radio" name="gender" value="female">
      <span>Female</span>
    </label>
  </div>
</div>

<!-- Inline radio group -->
<div class="form__group">
  <label>Subscription plans</label>
  <div class="form__radio-group--inline">
    <label class="form__radio">
      <input type="radio" name="plan" value="basic">
      <span>Basic</span>
    </label>
    <label class="form__radio">
      <input type="radio" name="plan" value="pro">
      <span>Pro</span>
    </label>
  </div>
</div>

Switch Toggle

iOS/Android style toggles - perfect for on/off settings.

HTML 
<label class="form__switch">
  <input type="checkbox" checked>
  <span>Notifications enabled</span>
</label>

<label class="form__switch">
  <input type="checkbox">
  <span>Dark mode</span>
</label>

Range Slider

Sliders for selecting values from range with optional labels.

0 100
100 2,500 10,000
HTML 
<div class="form__group">
  <label>Volume</label>
  <div class="form__range">
    <input type="range" min="0" max="100" value="75">
    <div class="form__range-labels">
      <span>0</span>
      <span>100</span>
    </div>
  </div>
</div>

<div class="form__group">
  <label>Price (EUR)</label>
  <div class="form__range">
    <input type="range" min="100" max="10000" value="2500" step="100">
    <div class="form__range-labels">
      <span>100</span>
      <span>2,500</span>
      <span>10,000</span>
    </div>
  </div>
</div>

File Upload

Drag & drop file upload z progress indicator i compact variant.

📁
Click to select or drag files here
PNG, JPG, PDF do 10MB
📎
Choose files
HTML 
<!-- Standard file upload -->
<div class="form__file">
  <input type="file" accept=".jpg,.png,.pdf">
  <div class="form__file-label">
    <div class="form__file-icon">📁</div>
    <div class="form__file-text">
      <strong>Click to select</strong> or drag files here
      <br><small>PNG, JPG, PDF do 10MB</small>
    </div>
  </div>
</div>

<!-- Compact file upload -->
<div class="form__file form__file--compact">
  <input type="file" multiple>
  <div class="form__file-label">
    <div class="form__file-icon">📎</div>
    <div class="form__file-text">
      <strong>Choose files</strong>
    </div>
  </div>
</div>

Klasy CSS - Podstawowe

.form
Main form container - sets grid layout with proper spacing
.form__group
Form field group (label + input + hint) with vertical layout
.form__row
Row container - responsive flexbox
.form__hint
Helper text below form field
.required
Label modifier - adds red asterisk (*)

Klasy CSS - Custom Controls

.form__checkbox
Custom checkbox - label with flexbox layout, input uses appearance: none
.form__checkbox-group
Vertical checkbox group
.form__checkbox-group--inline
Horizontal checkbox group
.form__radio
Custom radio button - label with flexbox layout, input uses appearance: none
.form__radio-group
Vertical radio button group
.form__radio-group--inline
Horizontal grupa radio buttons
.form__switch
iOS-style switch toggle
.form__range
Range slider container
.form__range-labels
Labels for min/max values
.form__file
File upload kontener
.form__file-label
Visual file upload element (drag & drop area)
.form__file--compact
Compact file upload variant (button-style)
.form__file-progress
Progress bar for file upload

Tables

Responsive tables with multiple styling variants. Support hover, striped rows and mobile-first approach.

Example table with data
Name Status Price
Product A Available $99.99
Product B Unavailable $149.99
Product C Available $79.99
HTML 
<table class="table table--striped">
  <caption class="table__caption">Example table with data</caption>
  <thead class="table__head">
    <tr class="table__row">
      <th class="table__header-cell">Name</th>
      <th class="table__header-cell">Status</th>
      <th class="table__header-cell">Price</th>
    </tr>
  </thead>
  <tbody class="table__body">
    <tr class="table__row">
      <td class="table__cell" data-label="Name">Product A</td>
      <td class="table__cell" data-label="Status">Available</td>
      <td class="table__cell" data-label="Price">$99.99</td>
    </tr>
    <tr class="table__row">
      <td class="table__cell" data-label="Name">Product B</td>
      <td class="table__cell" data-label="Status">Unavailable</td>
      <td class="table__cell" data-label="Price">$149.99</td>
    </tr>
  </tbody>
</table>

CSS Classes

.table
Basic table class with border-collapse and tabular-nums
.table__caption
Table caption element
.table__head
Table header section (thead)
.table__body
Table body section (tbody)
.table__row
Row element (tr)
.table__header-cell
Header cell (th)
.table__cell
Regular cell (td)
.table--striped
Striped background every other row
.table--compact
Smaller paddings in cells
.table--borderless
Removes all borders
.table--fixed
Fixed column width (table-layout: fixed)
.table--responsive
Horizontal scroll on small screens
.table--stack
Transforms table into cards on mobile

Definition Lists

Styled definition lists with four variants: default, inline, cards and bordered. Perfect for presenting key-value pairs, statistics and metadata.

Default

Basic vertical layout with margins between elements.

Product name
Litura
Version
0.1.0
Author
Your organisation
Licence
MIT
HTML 
<dl class="dl">
  <dt class="dl__term">Product name</dt>
  <dd class="dl__definition">Litura</dd>
  
  <dt class="dl__term">Version</dt>
  <dd class="dl__definition">0.1.0</dd>
  
  <dt class="dl__term">Author</dt>
  <dd class="dl__definition">Your organisation</dd>
</dl>

Inline

Layout inline

Status:
Active
Last update:
2024-01-15
File size:
12.3 KB
Typ:
CSS Library
HTML 
<dl class="dl dl--inline">
  <dt class="dl__term">Status:</dt>
  <dd class="dl__definition">Active</dd>
  
  <dt class="dl__term">Last update:</dt>
  <dd class="dl__definition">2024-01-15</dd>
  
  <dt class="dl__term">File size:</dt>
  <dd class="dl__definition">12.3 KB</dd>
</dl>

Cards

Each dt/dd pair as separate card - perfect for statistics and metrics.

Users
1,234
Sessions
5,678
Conversion
89
Revenue
$12,345
Bounce Rate
23%
Avg. Session
4:32
HTML 
<dl class="dl dl--cards">
  <div class="dl__card">
    <dt class="dl__term">Users</dt>
    <dd class="dl__definition">1,234</dd>
  </div>
  <div class="dl__card">
    <dt class="dl__term">Sessions</dt>
    <dd class="dl__definition">5,678</dd>
  </div>
  <div class="dl__card">
    <dt class="dl__term">Conversions</dt>
    <dd class="dl__definition">89</dd>
  </div>
</dl>

Bordered

Bordered sections with separated pairs - like settings list.

Configuration
Main system settings and user preferences
Security
Access settings, passwords and two-factor authentication
Notifications
Managing email, SMS and push notification alerts
Integrations
Connections with external services and API
HTML 
<dl class="dl dl--bordered">
  <dt class="dl__term">Configuration</dt>
  <dd class="dl__definition">Main system settings and user preferences</dd>
  
  <dt class="dl__term">Security</dt>
  <dd class="dl__definition">Access settings, passwords and two-factor authentication</dd>
  
  <dt class="dl__term">Notifications</dt>
  <dd class="dl__definition">Managing email, SMS and push notification alerts</dd>
</dl>

CSS Classes

.dl
Definition list block
.dl__term
Term element (dt)
.dl__definition
Definition element (dd)
.dl__card
Card wrapper for cards variant
.dl--inline
Inline variant - term and definition in one row
.dl--cards
Cards variant - each pair as separate card
.dl--bordered
Bordered variant - separated pairs with borders

Info Panels

Information panels for displaying structural data, API documentation and notifications. Support various color variants, icons and sizes.

Basic Panel

Default panel with title and structural data - perfect for API documentation.

Info Panel Classes

.info-panel
Main container for info panel
.info-panel__title
Title heading for the panel
.info-panel__item
Individual item within panel
.info-panel__label
Label text within an item
.info-panel__description
Description text within an item
.info-panel__icon
Icon container for with-icon variant
HTML 
<div class="info-panel">
  <h3 class="info-panel__title">Info Panel Classes</h3>
  <div class="info-panel__item">
    <div class="info-panel__label">.info-panel</div>
    <div class="info-panel__description">Main container for info panel</div>
  </div>
  <div class="info-panel__item">
    <div class="info-panel__label">.info-panel__title</div>
    <div class="info-panel__description">Title heading for the panel</div>
  </div>
  <div class="info-panel__item">
    <div class="info-panel__label">.info-panel__item</div>
    <div class="info-panel__description">Individual item within panel</div>
  </div>
</div>

Color Variants

Info, success, warning, error - various semantic variants with colors.

Information

Information panel in blue color.

Success

Success panel in green color.

Warning

Warning panel in orange color.

Error

Error panel in red color.

HTML 
<div class="info-panel info-panel--info">
  <h4 class="info-panel__title">Information</h4>
  <p>Information panel in blue color.</p>
</div>

<div class="info-panel info-panel--success">
  <h4 class="info-panel__title">Success</h4>
  <p>Success panel in green color.</p>
</div>

<div class="info-panel info-panel--warning">
  <h4 class="info-panel__title">Warning</h4>
  <p>Warning panel in orange color.</p>
</div>

<div class="info-panel info-panel--error">
  <h4 class="info-panel__title">Error</h4>
  <p>Error panel in red color.</p>
</div>

With icons

Panel with icon on the left side - uses flex layout.

ℹī¸

Information with icon

Information panel with emoji as icon.

✅

Success with icon

Success panel with emoji as icon.

⚠ī¸

Warning with icon

Warning panel with emoji as icon.

HTML 
<div class="info-panel info-panel--info info-panel--with-icon">
  <div class="info-panel__icon">ℹī¸</div>
  <div>
    <h4 class="info-panel__title">Information with icon</h4>
    <p>Information panel with emoji as icon.</p>
  </div>
</div>

<div class="info-panel info-panel--success info-panel--with-icon">
  <div class="info-panel__icon">✅</div>
  <div>
    <h4 class="info-panel__title">Success with icon</h4>
    <p>Success panel with emoji as icon.</p>
  </div>
</div>

Sizes and variants

Dense, large, borderless and bordered - various sizes and styles.

Dense Panel

Smaller paddings - --dense variant.

Large Panel

Larger paddings and fonts - variant --large.

No border

Panel without left border - --borderless variant.

With Full Border

Panel with full border around - variant --bordered.

HTML 
<div class="info-panel info-panel--dense">
  <h4 class="info-panel__title">Dense Panel</h4>
  <p>Smaller paddings - --dense variant.</p>
</div>

<div class="info-panel info-panel--large">
  <h4 class="info-panel__title">Large Panel</h4>
  <p>Larger paddings and fonts - variant --large.</p>
</div>

<div class="info-panel info-panel--borderless">
  <h4 class="info-panel__title">Borderless Panel</h4>
  <p>Panel without left border - --borderless variant.</p>
</div>

<div class="info-panel info-panel--bordered">
  <h4 class="info-panel__title">With Full Border</h4>
  <p>Panel with full border around - variant --bordered.</p>
</div>

CSS Classes

.info-panel
Basic information panel class
.info-panel__title
Panel title
.info-panel__item
Individual item within panel
.info-panel__label
Element label (highlighted with monospace)
.info-panel__description
Element description (muted text)
.info-panel__icon
Panel icon (used with --with-icon)
.info-panel--info
Informational variant (blue)
.info-panel--success
Success variant (green)
.info-panel--warning
Warning variant (orange)
.info-panel--error
Error variant (red)
.info-panel--with-icon
Variant with icon (flex layout)
.info-panel--dense
Compact version with smaller paddings
.info-panel--large
Larger version with bigger paddings
.info-panel--borderless
Version without left border
.info-panel--bordered
Full border instead of just left

Utility Classes

Comprehensive utility classes for spacing, typography, layout, colors and more. All utilities use !important to ensure they override component styles.

Layout

Container Demo:

Container content (max-width 72rem, centered)

Stack Demo:

Item 1
Item 2
HTML 
<div class="container">
  <!-- Responsive container -->
</div>

<div class="stack">
  <!-- Vertical spacing between children -->
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Spacing

Margins:

All margins
Centered horizontally

Padding:

All padding
Horizontal and vertical

Gap:

Flexbox
with gap
HTML 
<!-- Margins: m-0 to m-6, mx-*, my-*, mt-*, mb-*, ml-*, mr-* -->
<div class="m-4">All margins</div>
<div class="mx-auto">Centered horizontally</div>

<!-- Padding: p-0 to p-6, px-*, py-*, pt-*, pb-*, pl-*, pr-* -->
<div class="p-4">All padding</div>
<div class="px-6 py-2">Horizontal and vertical</div>

<!-- Gap: gap-0 to gap-6 -->
<div class="flex gap-4">Flexbox with gap</div>

Typography

Font Size:

Large text

Font Weight:

Bold text

Text Alignment:

Centered text

Text Transform:

Uppercase text
HTML 
<!-- Font sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl -->
<div class="text-lg">Large text</div>

<!-- Font weights: font-thin, font-light, font-normal, font-medium, font-semibold, font-bold, font-black -->
<div class="font-bold">Bold text</div>

<!-- Text alignment: text-left, text-center, text-right, text-justify -->
<div class="text-center">Centered text</div>

<!-- Text transform: uppercase, lowercase, capitalize -->
<div class="uppercase">Uppercase text</div>

Flexbox

Flex Display:

Flexbox container

Flex Direction:

Column direction

Justify Content:

Space
between

Align Items:

Centered items

Flex Properties:

Grows to fill space
HTML 
<!-- Display: flex, inline-flex -->
<div class="flex">Flexbox container</div>

<!-- Direction: flex-row, flex-col, flex-row-reverse, flex-col-reverse -->
<div class="flex flex-col">Column direction</div>

<!-- Justify: justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly -->
<div class="flex justify-between">Space between</div>

<!-- Align items: items-start, items-center, items-end, items-stretch, items-baseline -->
<div class="flex items-center">Centered items</div>

<!-- Flex properties: flex-1, flex-auto, flex-initial, flex-none -->
<div class="flex-1">Grows to fill space</div>

Grid

Grid Display:

Grid container

Grid Columns:

1
2
3 column grid

Column Span:

Spans 2 columns
1

Row Span:

Spans 2 rows

Grid Placement:

Centered items
HTML 
<!-- Grid display: grid, inline-grid -->
<div class="grid">Grid container</div>

<!-- Grid columns: grid-cols-1 to grid-cols-12 -->
<div class="grid grid-cols-3">3 column grid</div>

<!-- Column span: col-span-1 to col-span-12, col-span-full -->
<div class="col-span-2">Spans 2 columns</div>

<!-- Row span: row-span-1 to row-span-6 -->
<div class="row-span-2">Spans 2 rows</div>

<!-- Placement: place-items-center, place-content-center, justify-items-center -->
<div class="grid place-items-center">Centered items</div>

Colors

Text Colors:

Accent text

Background Colors:

Accent background

Border Colors:

Accent border

Opacity:

75% opacity
HTML 
<!-- Text colors: text-fg, text-bg, text-muted, text-accent -->
<div class="text-accent">Accent text</div>

<!-- Background colors: bg-fg, bg-bg, bg-soft, bg-accent -->
<div class="bg-accent">Accent background</div>

<!-- Border colors: border-fg, border-line, border-accent -->
<div class="border border-accent">Accent border</div>

<!-- Opacity: opacity-0 to opacity-100 (in increments of 10, plus 25, 75) -->
<div class="opacity-75">75% opacity</div>

Sizing

Width:

Full width

Fractions:

Half width

Max Width:

Readable content width

Height:

Full height of parent
HTML 
<!-- Width: w-0, w-auto, w-full, w-screen, w-min, w-max, w-fit -->
<div class="w-full">Full width</div>

<!-- Fractions: w-1/2, w-1/3, w-2/3, w-1/4, w-3/4, etc. -->
<div class="w-1/2">Half width</div>

<!-- Max width: max-w-xs to max-w-7xl, max-w-prose -->
<div class="max-w-prose">Readable content width</div>

<!-- Height: h-full, h-screen, h-min, h-max, h-fit -->
<div class="h-full">Full height of parent</div>

Effects

Shadows:

Large shadow

Cursors:

Pointer cursor

Transitions:

Smooth transitions

Duration:

300ms transition
HTML 
<!-- Shadows: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl -->
<div class="shadow-lg">Large shadow</div>

<!-- Cursors: cursor-pointer, cursor-wait, cursor-text, cursor-not-allowed -->
<div class="cursor-pointer">Pointer cursor</div>

<!-- Transitions: transition, transition-all, transition-colors, transition-opacity -->
<div class="transition-all">Smooth transitions</div>

<!-- Duration: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500 -->
<div class="transition duration-300">300ms transition</div>

Display & Position

Display:

Block element

Position:

Positioned
Relative container

Z-Index:

Higher z-index

Overflow:

Container boundary
Hidden overflow - this content extends beyond the container but is clipped
HTML 
<!-- Display: block, inline-block, inline, grid, flex, hidden -->
<div class="block">Block element</div>

<!-- Position: static, relative, absolute, fixed, sticky -->
<div class="relative">
  <div class="absolute top-0 right-0">Positioned</div>
</div>

<!-- Z-index: z-0, z-10, z-20, z-30, z-40, z-50, z-auto -->
<div class="z-10">Higher z-index</div>

<!-- Overflow: overflow-hidden, overflow-auto, overflow-scroll -->
<div class="overflow-hidden">Hidden overflow</div>

Responsive Usage

Using Utilities Responsively

All utilities work with CSS custom properties and can be combined with responsive design patterns. Use CSS Grid's auto-fit and auto-fill for responsive layouts, or create your own responsive variants using CSS custom properties.
Example: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 can be achieved by combining utilities with CSS media queries or custom properties.

Complete Utility Classes

Layout
.container, .stack, .cluster, .sidebar, .visually-hidden, .sr-only, .flow
Spacing
.m-{0-6}, .mx-{0-6}, .my-{0-6}, .mt-{0-6}, .mb-{0-6}, .ml-{0-6}, .mr-{0-6}, .p-{0-6}, .px-{0-6}, .py-{0-6}, .pt-{0-6}, .pb-{0-6}, .pl-{0-6}, .pr-{0-6}, .gap-{0-6}
Typography
.text-{xs,sm,base,lg,xl,2xl,3xl,4xl,5xl}, .font-{thin,light,normal,medium,semibold,bold,black}, .text-{left,center,right,justify}, .{uppercase,lowercase,capitalize}, .{underline,line-through,no-underline}
Flexbox
.flex, .inline-flex, .flex-{row,col,wrap,nowrap}, .justify-{start,center,end,between,around,evenly}, .items-{start,center,end,stretch,baseline}, .flex-{1,auto,initial,none}
Grid
.grid, .grid-cols-{1-12}, .grid-rows-{1-6}, .col-span-{1-12,full}, .row-span-{1-6,full}, .place-{items,content,self}-{start,center,end,stretch}
Colors
.text-{fg,bg,muted,accent}, .bg-{fg,bg,soft,accent}, .border-{fg,bg,line,muted,accent}, .opacity-{0,10,20,25,30,40,50,60,70,75,80,90,100}
Sizing
.w-{0,auto,full,screen,min,max,fit,1/2,1/3,2/3,1/4,3/4}, .h-{0,auto,full,screen}, .max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,prose}
Effects
.shadow-{sm,md,lg,xl,2xl,inner,none}, .cursor-{pointer,wait,text,not-allowed}, .transition-{all,colors,opacity,shadow}, .duration-{75,100,150,200,300,500}

Complete Website Examples

Explore complete website templates built with Litura CSS. These examples demonstrate real-world usage patterns and showcase all components working together in production-ready layouts.

đŸĸ Business Website

View Example

A complete business landing page featuring hero section, pricing tiers, customer testimonials, and contact forms. Perfect for SaaS companies and service providers.

Hero Section Pricing Cards Testimonials Contact Forms Statistics

📝 Blog Template

View Example

A content-focused blog layout with sidebar navigation, author profiles, and reading optimization. Ideal for technical blogs, documentation sites, and content platforms.

Article Cards Author Profiles Sidebar Navigation Code Highlighting Reading Progress

📰 Press & News

View Example

A comprehensive news and press release website with breaking news ticker, live updates, and market data widgets. Perfect for news organizations and corporate press centers.

Breaking News Ticker Live Updates Market Data Press Releases Trending Topics

đŸ’Ŧ Forum Community

View Example

A complete forum community website with threaded discussions, user roles, and activity tracking. Ideal for developer communities, support forums, and discussion platforms.

Thread Management User Badges Activity Feeds Forum Categories Online Users

💡 Usage Notes

  • â€ĸ All examples include theme switching functionality across 8 color schemes
  • â€ĸ Templates are responsive and optimized for mobile devices
  • â€ĸ Each example demonstrates different component combinations and layout patterns
  • â€ĸ View source code to see implementation details and CSS class usage
  • â€ĸ Examples are production-ready and can be used as starting points for real projects