evwiki/docs/SubSectionTile.md

SubSectionTile

The SubSectionTile allows you to group similar tiles together within a section, providing better organization and visual hierarchy.

Usage

use App\Domain\Search\Tiles\SubSectionTile;

// Create a sub-section with grouped tiles
$performanceSubSection = new SubSectionTile(
    'Performance',                                    // Title
    [                                                // Array of tiles
        new PowerTile(new Power(210)),
        new AccelerationTile(new Acceleration(6.6)),
        new TopSpeedTile(new TopSpeed(180)),
        new DrivetrainTile(new Drivetrain('rear')),
    ],
    'Motor and driving performance specifications'    // Optional description
);

Parameters

• title (string): The title of the sub-section
• tiles (array): Array of tile objects to group together
• description (string, optional): Optional description text displayed below the title

Example

new SectionTile('Skoda Elroq 85', [
    new BrandTile('Skoda'),
    new PriceTile(new Price(43900, Currency::euro())),
    
    new SubSectionTile('Performance', [
        new PowerTile(new Power(210)),
        new AccelerationTile(new Acceleration(6.6)),
        new TopSpeedTile(new TopSpeed(180)),
        new DrivetrainTile(new Drivetrain('rear')),
    ], 'Motor and driving performance specifications'),
    
    new SubSectionTile('Range & Efficiency', [
        new RangeTile(new Range(450)),
        new BatteryTile(new Battery(77.0, 82.0)),
        new ConsumptionTile(new Consumption(171)),
        new ChargingTile(new ChargingSpeed(175, 11)),
    ], 'Battery capacity, range, and charging capabilities'),
]);

Visual Hierarchy

• Section: Large heading (h1) with prominent styling
• Sub-section: Medium heading (h2) with subtle styling
• Tiles: Individual data tiles within each sub-section

The sub-section provides a clear visual separation between different categories of information while maintaining the overall design consistency.