This page demonstrates how to create a simple social bar using a Swiffle Grid custom connector.

The example below shows the core part of the social.phps file. Each entry in the array defines a social icon with its URL and image. Swiffle Grid generates one card per entry, which allows the icons to be arranged horizontally or vertically depending on the card settings.

$icons = [
    [
        'url'  => 'https://facebook.com',
        'title'=> 'Facebook',
        'icon' => Swiffe_Source_Loader::get('ico_social_facebook.png','url')
    ],
    [
        'url'  => 'https://twitter.com',
        'title'=> 'X',
        'icon' => Swiffe_Source_Loader::get('ico_social_x.png','url')
    ],
    [
        'url'  => 'https://linkedin.com',
        'title'=> 'LinkedIn',
        'icon' => Swiffe_Source_Loader::get('ico_social_linkedin.png','url')
    ],
];

Resulting layout after adjusting card settings:

• Cards properties/Width: 30 [Laptop and phone]
• Cards properties/Height: 30 [Laptop and phone]
• Cards properties/Card radius: 100 [Laptop and phone]