Origami Frontend Components & Services

SassDoc: o-share

oShare(opts)

Output all o-share styles.

parameter type default description
opts (optional) ('icons': ('twitter', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'), 'sizes': ('small'), 'vertical': true, 'inverse': true) The o-share variants to include styles for (see the README for more details).

Examples

Example #1

all styles.

@include oShare();

Example #2

styles for select variants.

@include oShare($opts: (
     'icons': ('twitter', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'),
     'sizes': ('small'),
     'vertical': true,
     'inverse': true
 ));

Links

oOverlayContentClose

Overlay close button styles.

The output does not include a class definition, and should be wrapped in a selector.

Example

Output button styles

.my-close-button {
    @include oOverlayContentClose();
}

Links

o-share-is-silent

Silent mode

Links

o-share-icon-size

Default icon size

Links

o-share-icon-small-size

Small variant icon size

Links

o-share-border-size

Border size

Links

o-share-border-style

Border style

Links

o-share-image-service-base-url

Option to change the base of the image service url

Links

o-share-image-service-version

Option to change the version of the image service url

Links

oFormsAddCustom(...)

parameter type default description
input Type of input to customise, one of 'anchor' or 'radio'
icons A list of icons to render
theme Custom theme map

Links

oShare(opts)

Output all o-share styles.

parameter type default description
opts (optional) ('icons': ('twitter', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'), 'sizes': ('small'), 'vertical': true, 'inverse': true) The o-share variants to include styles for (see the README for more details).

Examples

Example #1

all styles.

@include oShare();

Example #2

styles for select variants.

@include oShare($opts: (
     'icons': ('twitter', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'),
     'sizes': ('small'),
     'vertical': true,
     'inverse': true
 ));

Links

Status
active
Switch component view

GitHub: o-share@9.0.1

Install o-share

If using the Build Service, add o-share@^9.0.1 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-share@^9.0.1".

Help & Support

o-share is maintained directly by the Origami team. If you have any questions about o-share or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com