Fantasy UI Kit

A collection of reusable UI components styled with a dark, fantasy theme, inspired by game interfaces. All styles are contained within this single HTML file.

Typography

Basic text styles using a serif font for the fantasy feel.

Heading 1

Heading 2

Heading 3

Heading 4

This is a paragraph of standard body text. It uses the default color and font settings. Links look like this link here. You might include strong text or emphasized text within paragraphs. Use inline code for specific terms or values.

Another paragraph to show spacing and flow. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

"This is a blockquote, often used for citations or highlighting important passages. It might have slightly different styling." - Source Name

Buttons

Various button styles for different actions and importance.

Standard Buttons

Link Button 
<button class="button">Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button" disabled>Disabled Button</button>

Primary & Secondary Actions

<button class="button button-primary">Primary Action</button>
<button class="button button-secondary">Secondary Action</button>

Other Styles

<button class="button button-danger">Danger / Delete</button>
<button class="button"><span class="icon">[i]</span> Icon Left</button>

Button Group

<div class="button-group">
  <button class="button button-secondary">Option 1</button>
  <button class="button button-secondary">Option 2</button>
  <button class="button button-primary">Confirm</button>
</div>

Forms

Styled form elements like inputs, selects, and textareas.

Note: The select dropdown arrow styling is basic and may vary slightly across browsers.

Panels / Cards

Container elements for grouping related information, styled like the panels in the source image.

This is a simple panel containing basic text content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Panel with Header

This panel includes a styled header section. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • List item 1
  • List item 2

Panel with Header & Footer

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Placeholder
Footer information or actions here... 
<div class="panel">
  <div class="panel-header">
    <h3>Panel Title</h3>
  </div>
  <p>Panel content...</p>
  <div class="panel-footer">
    Footer content...
  </div>
</div>

Navigation

Examples of navigation elements, mimicking styles from the source image.

Top Bar Style

<nav class="nav-bar-top">
  <a href="#" class="active">Overview</a>
  <a href="#">Character</a>
  ...
</nav>

Icon Bar Style

<nav class="nav-icon-bar">
  <div class="nav-icon-item active">
    <span class="icon-display">[W]</span>
    <label>World</label>
  </div>
  ...
</nav>

Alerts / Messages

Components for displaying contextual feedback messages.

Info: This is an informational message. Check your quest log.
Success: Your item was successfully crafted!
Warning: Your inventory is almost full.
Danger: A critical component is missing! Cannot proceed. 
<div class="alert alert-info">
  <button class="close-btn" aria-label="Close" onclick="this.parentElement.style.display='none'">×</button>
  <strong>Info:</strong> Message content...
</div>

Note: The close button uses simple inline JavaScript for demonstration purposes in this single file.