IxDF Design System

“Sharing Panel” Component

Design: zeplin.

The sharing panel is a set of social media sharing buttons used to encourage users to share a piece of content. It is used in UX Daily article pages, for instance.

Design

There are 2 versions of the sharing panel:

  1. The full version contains the total share count and is used in places without space constraints, e.g. in the UX Daily article page.
  2. The condensed version doesn’t display a share count and has smaller share buttons. It’s typically placed on the sidebar of pages.

Viewports

On small viewports, due to horizontal space constraint, the full version contains compact share buttons.

On medium+ viewports, the full version contains full-sized share buttons.

Services

By default, the panel displays buttons to share a message via facebook, twitter and linkenIn.

Optionally, we can add a button to share a message via email:

Usage

$shares = \App\Utility\SharingPanelData::create('See, this site is amazing!')
    ->setShareCountFacebook(42)
    ->setShareCountLinkedin(41)
    ->setShareCountTwitter(40);
@include('components.sharingPanel', ['panelData' => $shares])
@include('components.sharingPanel', ['panelData' => $shares, 'condensed' => true])
@include('components.sharingPanel', ['panelData' => $shares, 'withEmail' => true, 'condensed' => true])

Props

  • panelData (required)
    App\Utility\SharingPanelData

    Object that contains all required and some optional data for the component (doesn’t contain visual options).

  • condensed
    bool

    The condensed version doesn’t display a share count and has smaller share buttons. It’s typically placed on the sidebar of pages.

    Default Value: false

  • withEmail
    bool

    Whether to display an optional "Share via email" button.

    Default Value: false