Skip to main content

Search

Search documentation

Start typing to search documentation...

Searching...

No results found

Settings

Introduction

Overview
Showcase
Getting Started

Foundations

Design System
Theming
Accessibility
Manual testing checklist
Colors
Tokens reference
Best Practices
- Component Composition Patterns
- Performance Optimization Tips

Components

Blocks

Blocks overview
Landing hero
Pricing cards
Dashboard
Docs layout
Login
Sign up

Examples

Examples overview
Form & layout examples

View as

Astro Vanilla Svelte Vue React

Hover Card — Svelte

Hover Card component — Svelte.

Rizzo CSS · © 2026

Getting Started
Blocks
Components
Theming
Accessibility

Settings

Theme

Preference

Preference: System

Dark

Dark theme: GitHub Dark Classic

Dark theme: Shades of Purple

Dark theme: Sandstorm Classic

Dark theme: Rocky Blood Orange

Dark theme: Minimal Dark Neon Yellow

Dark theme: Hack The Box

Dark theme: Pink Cat Boo

Light

Light theme: GitHub Light

Light theme: Red Velvet Cupcake

Light theme: Orangy One Light

Light theme: Sunflower

Light theme: Green Breeze Light

Light theme: Cute Pink

Light theme: Semi Light Purple

Preview

Font Size

Adjust text size 100%

Small Default Large

Font

Geist (Sans + Mono)

Inter + JetBrains Mono

IBM Plex Sans + Mono

Source Sans 3 + Source Code Pro

DM Sans + DM Mono

Outfit + JetBrains Mono

Preview

Aa Bb Cc 012

code

Body text and code blocks use the selected pair.

Sound

Play sound on click

Short click sound when you interact with buttons and links. Off by default.

Accessibility

Reduce motion

Minimize animations and transitions

High contrast

Increase contrast for better visibility

Scrollbar style

Thin Thick Hidden

Choose your preferred scrollbar appearance