Fikir CSS — Variant Showcase
Comprehensive showcase of missing component variants for demo coverage.
Alert Variants
alert-neutral
Neutral Alert
This is a neutral alert message.
alert-warning
Warning Alert
This is a warning alert message.
Badge Variants
badge-info
Info Badge
badge-outline
Outline Badge
badge-plain
Plain Badge
badge-soft
Soft Badge
badge-solid
Solid Badge
Button Size & Style Variants
btn-lg
Large Button
btn-ghost
Ghost Button
btn-plain
Plain Button
btn-soft
Soft Button
btn-solid
Solid Button
Card / Surface Variants
card-flat
Flat Card
card-subtle
Subtle Card
card-interactive
Interactive Card
card-p-lg
Large Padding Card
surface-flat
Flat Surface
surface-interactive
Interactive Surface
Skeleton Variants
skeleton-content
skeleton-circle
Menu Bar Advanced Patterns
File
Edit
Tools
Option 1
Option 2
Option 3
Help
Layout & Typography Utilities
flex, gap-2, items-center
Flex Item 1
Flex Item 2
inline-flex, gap-4, justify-between
Start
Middle
End
text-xs, text-md, text-lg, font-medium, font-semibold
Extra Small Text (12px)
Medium Text - Font Medium
Large Text - Font Semibold
shadow-sm, shadow-md, px-4, py-2, p-0, p-2
Small Shadow
Medium Shadow
Button (px-4, py-2)
Color Utilities
bg-primary-500
bg-primary-600
bg-surface
text-white, text-fg-default
White Text
border-subtle
rounded-md
Spacing & Margin Utilities
mt-0 (no top margin)
No top margin applied
Remaining Utility Classes
p-0, p-2, px-4, py-2
p-0
p-2
px-4
py-2
border-subtle, text-fg-default
border-subtle
text-fg-default
Force Colors (Testing)
force-mt-0