Tabs Pro - Documentation

Tabs Pro is a powerful modular template that extends the Grav Editorial theme with advanced tab functionality. Create beautiful, responsive tab sections that automatically transform into accordions on mobile devices.

Overview

Key Features

• 🎯 Responsive Tabs - Tabs on desktop, accordion on mobile automatically
• 🖼️ Image Support - Add images to any tab with flexible layout
• 🎨 Complete Color Control - Customize every aspect of the appearance
• ⚡ Markdown Support - Rich content formatting with full markdown capabilities
• 🔧 Font Awesome Icons - Enhance titles with professional icons
• 📱 Fully Responsive - Perfect display on all devices
• 🎭 Smooth Animations - CSS3 transitions with CSS Grid for opening/closing

Requirements

• Grav 1.7+
• Editorial Theme
• PHP 7.4+

Quick Start

Basic Configuration

1. Create a new modular page in your Grav admin
2. Select "Tabs" from the modular templates
3. Configure the basic settings in the Content tab
4. Add your tabs in the Tabs Content tab
5. Customize colors in the Tabs Styles tab

Minimal Example

title: 'Product Features'
intro: 'Explore our main features'
tabs:
  -
    title: 'Core Features'
    content: 'Discover our powerful feature set...'
  -
    title: 'Advanced Options'
    content: 'Explore advanced configuration...'

Configuration Options

Content Tab

Intro Text

Optional content that appears above the tabs. Supports markdown formatting.

intro: |
  # Welcome to our product

  Discover everything we can offer you

Tabs Content

Each tab can be fully customized with the following options:

Title [required]

The clickable header text for the tab.

title: 'Frequently Asked Questions'

Icon

Add Font Awesome icons to enhance visual appeal.

icon: 'fas fa-rocket'
icon: 'fas fa-shield-alt'
icon: 'fas fa-chart-line'

Tip: Use icons that represent the content category for better visual hierarchy.

Image & Image Alt

Add images with alternative text for accessibility.

image: 'feature-preview.jpg'
image_alt: 'Dashboard feature overview'

Image Behavior:

• On desktop: Image appears on the left side with content on the right in a 2-column grid
• On mobile: Image appears above content in stacked layout
• If no image, content takes full width

Content Title

Optional title that appears inside the tab content.

content_title: 'Key Benefits'

Content (Markdown)

The main content area with full markdown support.

content: |
  ## Key Benefits

  - **Faster processing** - 2x performance improvement
  - *Easy integration* - Simple API endpoints
  - `Code support` - Syntax highlighting available

  [Learn more](/features)

Call-to-Action Links

Add actionable links with custom styling.

link_url: '/documentation'
link_text: 'Read Documentation'
link_class: 'button primary'

Tabs Styles (Style Tab)

Color Customization

Complete control over the tabs appearance:

Tab Alignment

Control the horizontal alignment of tabs on desktop.

tab_align: 'left'   # Left alignment
tab_align: 'center' # Center alignment

Advanced Usage

Integration with Other Modules

Tabs Pro works seamlessly with other Editorial modular templates:

title: 'Product Overview'
sections:
  - header:
      title: 'Features'
      template: tabs
      tabs: [...]
  - spotlights:
      title: 'Use Cases'
      template: spotlights
      # Spotlights configuration...

Custom CSS Classes

Extend functionality with custom CSS on links:

link_class: 'button large primary'

Available utility classes:

• button primary|secondary
• large|small
• fit (full width)
• icon fa-* (icon buttons)

Responsive Behavior

The component automatically changes its behavior based on device:

Desktop (>736px):

• Horizontal tab navigation
• Click to switch between tabs
• Hover effect on tabs
• Only active content visible

Mobile (≤736px):

• Vertical accordion mode
• Clickable headers with expansion icons
• Smooth animation with CSS Grid
• Only one panel open at a time

Examples & Use Cases

FAQ Section

title: 'Frequently Asked Questions'
intro: 'Find answers to the most common questions'
tabs:
  -
    title: 'General'
    icon: 'fas fa-question-circle'
    content: |
      ## What does the service include?

      Our service includes **24/7 support**, automatic updates...
    link_url: '/faq'
    link_text: 'View all questions'
  -
    title: 'Technical'
    icon: 'fas fa-code'
    content: |
      ## System Requirements

      - PHP 7.4+
      - MySQL 5.7+
      - 2GB RAM minimum

Product Features

title: 'Product Features'
intro: 'Discover everything our product can do for you'
tab_align: 'center'
tabs:
  -
    title: 'Advanced Analytics'
    icon: 'fas fa-chart-bar'
    image: 'analytics-dashboard.jpg'
    image_alt: 'Real-time analytics dashboard'
    content_title: 'Make data-driven decisions'
    content: |
      Our **real-time analytics dashboard** provides instant insights 
      into your business performance.

      - Metrics updated every second
      - Interactive visualizations
      - Data export in multiple formats
    link_url: '/features/analytics'
    link_text: 'Explore Analytics'
    link_class: 'button primary'
  -
    title: 'Security'
    icon: 'fas fa-shield-alt'
    image: 'security-features.jpg'
    image_alt: 'Security features'
    content_title: 'Enterprise-grade protection'
    content: |
      Security designed from the ground up with end-to-end encryption.

Documentation Guide

title: 'Getting Started Guide'
intro: 'Get started in minutes with our step-by-step guide'
tabs:
  -
    title: '1. Installation'
    icon: 'fas fa-download'
    content: |
      ## Quick Installation

      ```bash
      composer require vendor/package

  Follow these steps to complete the installation...

- title: '2. Configuration' icon: 'fas fa-cogs' content: |

Initial Setup

  Configure the basic settings in the `config.yaml` file

- title: '3. First Steps' icon: 'fas fa-rocket' content: |

Your first deployment

  Create your first project by following this tutorial...
link_url: '/docs/tutorial'
link_text: 'View Complete Tutorial'

===

## Troubleshooting

### Common Issues

**Tabs not switching on click**
- Ensure JavaScript is enabled
- Check for console errors in browser
- Verify there are no conflicts with other scripts

**Images not loading**
- Confirm image path is correct
- Check file permissions (644 recommended)
- Verify image exists in page folder

**Markdown not rendering**
- Ensure proper markdown syntax
- Check special character encoding
- Verify markdown processor is active

**Color changes not visible**
- Clear Grav cache (`bin/grav clear-cache`)
- Hard refresh browser (Ctrl+F5)
- Check color format (hex codes required)

**Mobile accordion not animating correctly**
- The component uses modern CSS Grid for fluid animations
- Ensure browser supports `grid-template-rows: 0fr/1fr`
- Verify there's no custom CSS interfering

### Performance Tips

- Optimize images before upload
- Use appropriate image sizes (max. 1200px width)
- Limit tabs to 6-8 per page for better UX
- Combine with Grav's caching mechanisms

### Advanced Customization

**Modify animations:**
```css
#tabs-your-slug .accordion-body {
  transition: grid-template-rows 0.6s ease-out; /* Slower */
}

Change responsive breakpoint:

/* Change from 736px to 800px */
@media (max-width: 800px) {
  /* Accordion styles */
}

Key Differences with Accordion Pro

Support

Documentation

• Editorial Theme Docs
• Grav Official Documentation

Premium Support

For dedicated support, please contact us through:

• Email: support@example.com
• Help Desk: https://example.com/support

Additional Resources

• Markdown Guide
• Font Awesome Icons
• Color Palettes