Logo St Barth Executive Logo Air Inter Iles Logo Carib Medevac
EN / FR
Request a Charter Quote Book a Scheduled Flight
St. Barth Executive

Pattern reference

Pattern reference

Pattern Reference Page - All CMS Layout Patterns

Purpose: Visual QA reference showcasing all 7 markdown layout patterns Created: 2025-01-14 For: Content administrators and developers Status: Test page - Not for public display

Pattern A: Simple Text Section (Presentation)

This pattern is used for introductory content, centered text with optional CTA button.

Welcome to our Pattern Library

This reference page demonstrates all available layout patterns in the CMS. Each pattern below shows the markdown syntax and rendered output. Use this page to verify styling consistency and as a quick reference when migrating content.

Explore all patterns

Pattern B: Image + Text Block (Bloctextephoto)

This pattern creates side-by-side layouts with images and text. Images automatically alternate left/right.

Business Class Cabin Example

Image Left, Text Right

This is the first bloctextephoto section. The image appears on the left, and the text content appears on the right. This layout is perfect for feature descriptions, service highlights, and detailed explanations with supporting visuals.

The content can include multiple paragraphs, lists, and even links. The layout automatically adjusts to mobile devices by stacking vertically.

Learn more about this feature

Text Left, Image Right

This is the second bloctextephoto section. Due to CSS nth-child selectors, this section automatically alternates - the text appears on the left, and the image appears on the right. You don't need to manually change the HTML structure; just repeat the same pattern.

This automatic alternation creates a visually appealing rhythm as users scroll down the page. It's particularly effective for pages with multiple features or benefits to showcase.

Bright Cabin Example
Catering Service Example

Third Section - Auto-Alternates Back

The third section automatically returns to image-left layout. This continues indefinitely - each consecutive bloctextephoto section will alternate its layout direction without any manual intervention.

This pattern is the workhorse of content pages. Use it for any content that benefits from visual support: product features, service descriptions, team bios, case studies, and more.

Pattern C: Grid of Cards (Places/Pilots)

This pattern creates responsive grids that adapt from 4 columns on desktop to 1 column on mobile.

Destination 1

Saint Martin

Experience the vibrant culture and stunning beaches of this beautiful Caribbean island.

Destination 2

Anguilla

Discover pristine white sand beaches and crystal-clear turquoise waters.

Destination 3

Puerto Rico

Explore historic old San Juan and enjoy world-class dining and entertainment.

Destination 4

Virgin Islands

Sail through paradise with countless islands to explore and adventures to discover.

Destination 5

Bahamas

Experience luxury resorts, world-famous beaches, and exceptional diving opportunities.

Destination 6

Turks & Caicos

Enjoy some of the world's best beaches and exceptional water sports opportunities.

Pattern D: Accordion (Expandable Sections)

This pattern creates expandable/collapsible sections using Alpine.js for interactivity.

Frequently Asked Questions

What makes our service unique?

Our service combines luxury, expertise, and reliability in ways that set us apart from competitors. We focus on personalized experiences, maintain the highest safety standards, and operate with unmatched flexibility to meet your exact needs.

Every detail is carefully curated to ensure your journey is not just transportation, but an experience you'll remember and want to repeat.

How do I book a flight?

Booking with us is simple and straightforward. You can book online through our website, call our dedicated reservations team, or send us an email with your travel requirements.

Our team is available 24/7 to assist with your booking and answer any questions. We'll work with you to customize your flight experience and ensure everything is perfectly arranged before your departure.

What amenities are included?

All our flights include complimentary premium services: business class seating with full recline, fine snacking and beverages including champagne on longer flights, VIP lounge access where available, and personalized in-flight service.

Additional amenities can be arranged upon request, including special meals, ground transportation, and concierge services at your destination.

Pattern F: Experience (Side-by-Side Feature)

This pattern creates a fixed 50/50 split layout, perfect for highlighting specific features or testimonials.

Passenger Experience

An Exclusive Experience

Flying with us is more than transportation - it's an unforgettable journey you'll want to share. From our first-class staff to personalized touches throughout your trip, we ensure every moment exceeds your expectations.

Experience the difference that attention to detail makes. From booking to arrival, we handle every aspect with care and precision.

Discover the experience

Button Styles Reference

The CMS supports three main button styles via markdown attribute extension:

Outline Button (.o_b)

Primary style for call-to-action links. Transparent background with brand-colored border.

Outline Button Example

Solid Button (.btn-first)

Secondary style with solid background fill. Use for primary actions.

Solid Button Example

Block CTA Button (.btp__cta--btn)

Full-width button within bloctextephoto content blocks. Use for contextual calls-to-action.

Block CTA Button Example

Inline Text Formatting

This section demonstrates inline markdown formatting options:

List Examples

Unordered List

Ordered List

  1. Primary benefit or feature
  2. Secondary benefit or feature
  3. Tertiary benefit or feature
  4. Additional advantages

Usage Notes

Pattern Selection Guide

Use Pattern A (Presentation) for:

Use Pattern B (Bloctextephoto) for:

Use Pattern C (Places/Pilots Grid) for:

Use Pattern D (Accordion) for:

Use Pattern E (CTA Grid) for:

Use Pattern F (Experience) for:

Use Pattern G (Destinations Carousel) for:

Responsive Behavior

All patterns are fully responsive:

Accessibility Features

All patterns include:

Performance Optimizations

All images automatically include:

End of Pattern Reference

This page demonstrates all available CMS patterns. Use the markdown-conventions.md documentation for detailed implementation instructions and copy-paste ready code snippets.

For questions or support, refer to:

Version: 1.0 Last Updated: 2025-01-14 Status: Test Page - Ready for QA