Social Share
- Variants
- Default
- Vertical
Social share is a common design pattern that allows users to quickly share content on various social media channels through familiar social icons.
Social-Share-Default
The social share pattern opens horizontally above content as the default.
Usage
Social Share is used when there is a need to share content via approved social channels: Twitter, Facebook, and LinkedIn. An icon for email is also included. The share pattern consists of the Schwab ‘Share’ icon, a trigger and links with title attributes and a label. All icons are hidden and when the Share button is selected, all the social icons are revealed allowing the user to select an icon. Providing a consistent social share pattern for Schwab gives clarity, trust and familiarity across all our content on the various social media channels.
Best practices
Do
- Use social share for public-facing content that educates the user (such as blogs, whitepapers, and Insight™ articles).
- Use consistent placement near the top right-hand side of the page, preferably below the marquee.
- Use the new brand Share icon icon (ICN-SM_Share) in Bynder.
- Use only branded icons found in Bynder for each channel. Use only the allowed icons for Facebook, Twitter, LinkedIn, Google+, and email.
- Be mindful of accordion variations on mobile and follow accordion best practices.
- Follow touch affordance best practices when grouping icons in close proximity (allow extra consideration for mobile).
- Keep up to date on any brand changes.
Don’t
- Use for content behind a login.
- Alter social icons in any way that doesn’t follow each company’s brand guidelines. See details on Bynder.
- Customize or embellish the design since it is a global pattern.
- Use the old Share icon.
- Alter the order of the icons.
- Use the “Follow” or “Connect” social pattern for the top of the page (these are specifically for the bottom of the page near the footer).
Accessibility
Ensure any icons or images are accessible. The icons, whether treated as buttons or links, must be focusable and follow along the logical tab order of the page structure. Icons and buttons should be labeled and described for understanding. the Share button should read accordion states, and all icons should meet color and text accessibility guidelines. Ensure links meet color/contrast requirements in the color guidelines and follow Schwab accessibility guidelines.