Patterns Library

Reusable UI patterns and components for consistent, professional design

Gradient Accent Bars

4px gradient bars that appear on hover - Used in Cards, Team, Testimonial modules

Top Accent

Gradient bar appears on top edge

Bottom Accent

Gradient bar appears on bottom edge

Side Accent

Gradient bar appears on left edge

Circular Icon Badges

Interactive badges with color transitions and rotations - Used in FAQ and Accordion

+

Default

Light background

+

Hover

Accent background + scale

+

Active

Primary color + rotate

With Icon

Custom icons/emoji

Glass Morphism Effects

Frosted glass effect with backdrop blur - Used in Pricing and other modules

Light Glass

10% opacity, 20px blur

Medium Glass

15% opacity, 20px blur

Strong Glass

20% opacity, 20px blur

Social Link Patterns

Interactive social media links with playful animations - Used in Team module

Default

Hover/Active

Decorative Elements

Small touches that add character and personality

"

Decorative Quote

Large quote mark in accent color

Popular

Status Badge

Pill-shaped indicator labels

Star Rating

Glowing stars with drop shadow

Use These Patterns

All these patterns are ready to use in your custom pages and modules

View Components Design System