STYLE GUIDE
A comprehensive overview of typography, components, utilities, animations, and theme options available in our SCSS.
Typography
Heading 1 - Main Title _
Heading 2 - Section Title _
Heading 3 - Subsection _
Heading 4 - Component Title _
Heading 5 - Small Title _
Heading 6 - Micro Title _
This is a paragraph with bold text and italic text. It demonstrates the body text styling and readability.
This is small text for captions and secondary information.
Console Style Heading _
Use an inline SVG with the
.inline-cursor class to add a retro
console-style blinking cursor with
|>_ characters. This approach is simpler
and more flexible than CSS pseudo-elements.
Heading Variations
Showcase of different heading styles: default, with cursor, and with border. Use utility classes to enhance your headings.
Default Heading
Standard heading without any effects
Heading with Cursor _
Add .inline-cursor for terminal style
Heading with Border
Add .heading-border for underline effect
Default:
<h2>Your Heading</h2>
With Cursor:
<h2>Your Heading<svg
class="inline-cursor">...</svg></h2>
With Border:
<h2 class="heading-border">Your
Heading</h2>
Buttons & Interactive Elements
Tooltip Component
Interactive tooltips with retro-futuristic styling and smooth animations.
Form Elements
Form Preloader
Form Success Confirmation
Cards & Layout Components
Sample Card
This is a sample card component with icon and description.
Another Card
Demonstrating the card layout system with different content.
Variant: add .section-card--square to remove
rounded corners and apply a persistent box-shadow.
Square Card
Sharp corners, consistent shadow on hover.
Square Card Alt
Use when a sharper aesthetic is desired.
Square Card Variations
Icon, Heading & Text
Default structure with icon, title, and description.
Heading & Text
Title with supporting copy, no icon displayed.
Text-only variant for concise descriptions or notes.
Status Indicators & LEDs
Theme Colors
Image Effects
Demonstration of the original image, a theme-aware filter, a scanline overlay, and both combined.
Original (no effect)
Theme Filter (.filter)
Scanline Effect (.scanline-effect)
Filter + Scanlines
ANIMATION EFFECTS
Retro Terminal Effects
Glow & Pulse Effects
Scanline Effects
Glitch Effects
Color & Fade Effects
Rotation Effects
UTILITY CLASSES
Scanline Classes
Visual Effect Classes
USAGE EXAMPLES
CSS Animation:
animation: tech-flicker 3s ease-in-out
infinite;
SCSS Extend:
@extend .scanline-effect;
SCSS Mixin:
@include crt-glow-animation;