CTA: Ready for Your Nature Escape
Call-to-action section encouraging users to book a stay. Uses glassy typography and button variants on a background image.
1. CTA Section (Glassy)
Full-width CTA section with background image. Uses glassy typography and button variants for readability on dark overlays.
1.1 Standard Layout Preview
For use on normal page surfaces (content areas, cards, dialogs)
Ready for Your Nature Escape?
Book your stay today and create lasting memories with your loved ones.
1.2 Standard Layout HTML Snippet
<section class="cta-ready-escape">
<!-- Background -->
<div class="cta-ready-escape__bg">
<img
src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
alt="Forest path"
class="cta-ready-escape__bg-image"
/>
<div class="cta-ready-escape__bg-overlay"></div>
</div>
<!-- Content -->
<div class="cta-ready-escape__content">
<h2 class="cta-ready-escape__heading t-h1-glass">
Ready for Your Nature Escape?
</h2>
<p class="cta-ready-escape__text t-lead-glass">
Book your stay today and create lasting memories with your loved
ones.
</p>
<div class="cta-ready-escape__actions">
<a href="#offers" class="btn btn--primary btn--lg">
Check Availability
</a>
<a href="#contact" class="btn btn--secondary-glass btn--lg">
Get in Touch
</a>
</div>
</div>
</section>1.3 Glassy Layout Preview
For use on dark overlays and hero sections
Ready for Your Nature Escape?
Book your stay today and create lasting memories with your loved ones.
1.4 Glassy Layout HTML Snippet
<section class="cta-ready-escape">
<!-- Background -->
<div class="cta-ready-escape__bg">
<img
src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
alt="Forest path"
class="cta-ready-escape__bg-image"
/>
<div class="cta-ready-escape__bg-overlay"></div>
</div>
<!-- Content -->
<div class="cta-ready-escape__content">
<h2 class="cta-ready-escape__heading t-h1-glass">
Ready for Your Nature Escape?
</h2>
<p class="cta-ready-escape__text t-lead-glass">
Book your stay today and create lasting memories with your loved
ones.
</p>
<div class="cta-ready-escape__actions">
<a href="#offers" class="btn text-neutral-900 bg-neutral-50 btn--lg">
Check Availability
</a>
<a href="#contact" class="btn btn--secondary-glass btn--lg">
Get in Touch
</a>
</div>
</div>
</section>Usage Guidelines
Do
- Place CTA section near the end of the page for maximum impact
- Use high-quality, relevant background images (forest, nature, cabins)
- Keep heading concise and action-oriented (under 10 words)
- Ensure text remains readable over background (overlay provides contrast)
- Link primary button to offers/availability page
- Link secondary button to contact form or inquiry page
- Test text visibility in both light and dark modes
- In application templates, replace static copy with translation keys
Don't
- Use low-resolution or off-brand background images
- Make heading longer than 2 lines on mobile
- Override button styles - use Button Element classes
- Remove the overlay - it ensures text readability
- Link buttons to non-existent pages
- Use inline styles for visual changes
- Place multiple CTA sections on one page
- Make text color darker - white ensures visibility on dark overlay
CSS Location
CTA Ready Escape styles are defined in:
/assets/css/ui/views/cta-ready-escape.css
Includes: layout, background image layers, overlay, spacing, and responsive behavior.