Origami Frontend Components & Services

Readme: o-business-card

o-business-card has a support status of "dead". This means that there are no plans to fix any issues with this component, and it may stop working at any point. More information on the status of this component is available in the README. If you still rely on this component or have concerns, please contact the Origami team.

This module has been deprecated

Render contact information about a FT employee (e.g. name, email, Twitter handle…).

To render a business card, you just need to pass a JSON to the template with that person's details. Here's a list of all possible values (it can be extended):

At least values for "name", "image" and "url" need to be passed, and the last two should be absolute URLs. The other values are optional.

The image can either be floated left or right depending on the modifier of the class selector: "--left" or "--right".

Structured data

Every business card will be using structured data using schema.org, a collaboration by Google, Microsoft and Yahoo. This will help search engines understand each person's details better. We're using microdata to structure the data.

Each o-business-card component will be an itemscope that gets its itemtype from http://schema.org/Person. And then each element has its corresponding itemprop, except for "age":

Silent Mode

By default the Sass is in silent mode, meaning there will be no CSS output.

If you're @importing the Sass into your product or component, and you want to turn off silent mode, then set the following SASS variable:

$o-business-card-is-silent: false;

If requesting the CSS from the build service, silent mode will automatically be switched off.

In silent mode, instead of the CSS classes listed below, there will be Sass mixins using a camel-cased version of the class name, i.e. @include oBusinessCard instead of a .o-business-card selector.

Colour use cases

Personalise border and background colours using these use cases:

@include oColorsSetUseCase(o-business-card, border, 'a color name');
@include oColorsSetUseCase(o-business-card, background, 'a color name');


Please see main.mustache.

dead Origami v1 (Bower)
Switch component view

GitHub: o-business-card

Install o-business-card

If using the Build Service, add o-business-card@^1.0.5 to your link tag.

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

Help & Support

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

Slack: #ft-origami
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: #ft-origami
Email: origami.support@ft.com