Brand Decorative Elements

LocalCN Trip - Showcasing reusable decorative components that blend tech aesthetics with Chinese cultural elements

Chinese Red #E53935 Gold #FF8F00 Trust Blue #1E88E5

1. Decorative Dividers

.divider-gradient

Content above

Content below

<hr class="divider-gradient">
.divider-brand
<div class="divider-brand"></div>
.divider-dots
<div class="divider-dots"><span class="divider-dots-icon"></span></div>

2. Heading Decorations

.heading-accent

Discover China's Hidden Gems

<h3 class="heading-accent">Discover China's Hidden Gems</h3>
.heading-underline

Popular Destinations

<h3 class="heading-underline">Popular Destinations</h3>
.heading-glow

LocalCN Trip

<h3 class="heading-glow">LocalCN Trip</h3>

3. Badges & Tags

Badge Variants
Featured Authentic China AI_PICKED New Local Guide 4K_QUALITY
<span class="badge-brand">Featured</span>
<span class="badge-china">Authentic China</span>
<span class="badge-tech">AI_PICKED</span>

4. Background Patterns

.bg-grid (currently applied to this section)
.bg-dots

Section with Dot Pattern Background

This section uses the dot pattern background.

.bg-diagonal

Section with Diagonal Stripe Background

This section uses the diagonal stripe pattern.

Glow Background Effects

.bg-glow-red

.bg-glow-blue

.bg-glow-gold

5. Statistics Display

.stat-number
50+

Destinations

<div class="stat-number">50+</div>
.stat-card
100+

Cities

500+

Experiences

10K+

Travelers

6. Chinese Cultural Decorations

.deco-mountains (mountain silhouette at bottom of this section)

This section features a subtle mountain decoration at the bottom, inspired by traditional Chinese landscape painting.

6b. Wave Decoration

.deco-wave-top (wave SVG at top of this section)

This section features a wave transition effect at the top.

7. Corner Badges

.corner-badge
NEW

Card content with corner badge

<div class="corner-badge">
<span class="corner-badge--new">NEW</span>
</div>

8. Rating & Progress

.rating-stars
★★★★★
5.0 (128 reviews)
.rating-bar
Service 92%
Value 88%

9. Glow Border Animation

.glow-border-anim (hover to see effect)

Hover Effect Card

Hover over this card to see the animated glow border effect.

Another Card

Each card has its own independent glow animation.

10. Floating Animation

.float-element (continuous floating animation)
1
2
3

Elements float with staggered timing for organic feel

<div class="float-element">...</div>
<div class="float-element">...</div>
<div class="float-element">...</div>

LocalCN Trip - Brand Decorative Elements Showcase

Blending tech aesthetics with Chinese cultural elements

China Red Trust Blue Golden Accent