Description
The social share component for specific articles, components, or individual pieces of content. This is different from the share component for the overall site.
:star: Recommendation :star:
We have two types of share components: one for sharing pages and one for sharing specific components.
For Sharing Pages:
We model the component after the Janelia example, with the sidebar title and icons below. However, we revise the icons to fit with our recommended button style: we match the size of the icons to the size of our button type. We match the padding outside the icons to the padding in our recommended buttons. The buttons will be grey, to match the quiet button color of our recommended buttons.
Recommended Buttons Issue: #12
For Sharing Components:
We use the Share component from the Biointeractive Pages.
Pros:
Legible and clear. This component is very flexible and could be placed on any page.
Cons:
The icons could use a bit more padding around them. I'm not sure the colors are beneficial. The tight padding is not consistent with the recommended button style.
Description The social share component for specific articles, components, or individual pieces of content. This is different from the share component for the overall site.
:star: Recommendation :star: We have two types of share components: one for sharing pages and one for sharing specific components.
For Sharing Pages: We model the component after the Janelia example, with the sidebar title and icons below. However, we revise the icons to fit with our recommended button style: we match the size of the icons to the size of our button type. We match the padding outside the icons to the padding in our recommended buttons. The buttons will be grey, to match the quiet button color of our recommended buttons.
Recommended Buttons Issue: #12
For Sharing Components: We use the Share component from the Biointeractive Pages.
On HHMI.org
Link to Design: http://www.hhmi.org/scientists
Pros:
Cons: The "Share" text is difficult to read because of the size of the type and the background pattern.
The shapes of the icons are not consistent (some are circular and some are square).
On BioInteractive
Link to Design: http://www.hhmi.org/biointeractive/seeing-single-molecules
Pros: Very simple and clean treatment. Legible. Not distracting.
Cons: This treatment would not work outside of the component it's housed in, which is not present on all of the HHMI sites.
On Janelia
Link to Design: https://www.janelia.org/open-science/128-channel-head-stage-animals
Pros: Legible and clear. This component is very flexible and could be placed on any page.
Cons: The icons could use a bit more padding around them. I'm not sure the colors are beneficial. The tight padding is not consistent with the recommended button style.