Origami Frontend Components & Services

Readme: o-card

o-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 component has now been deprecated. Please use o-teaser.



Add @import 'o-card/main'; to your main SCSS file.

Default elements

The following elements are supported by default:

.o-card__meta {}                    // Area for meta data like tags and author quotes/images
.o-card__tag {}                     // Small coloured tag at the top of the card
.o-card__meta-image {}              // Area for an author image or tag image to appear (60px square)
.o-card__heading {}                 // Main heading of the card
.o-card__standfirst {}              // A short piece of content
.o-card__image {}                   // An image for the card (with available [alignments](#image-alignment))
.o-card__timestamp {}               // A styled timestamp for the card
.o-card__related-content {}         // A list of related content links
.o-card__related-content-item {}    // A single item of a related content list

Silent mode (docs)

If using o-card in silent mode, you can customise the block class by doing:

.my-card {
    @include oCard;

Each element class has a @mixin as well (e.g. oCardTag), however when using the landscape theme, the default elements persist.


There are three themes that can modify a card:

Image alignment

The image can be aligned in four ways, depending on the layout of the card. The alignment is managed by flexbox so no change in the source order is required.

### Portrait card

### Landscape card

In a landscape card the image can be aligned left (at 40% width of the card) or right (at 50% width of the card). In a landscape card, the heading will appear in the same row as the image and if used, a standfirst will appear below.

Meta area and meta image

The meta area of the card by itself has no style. It's used to contain the card__tag and card__meta-image elements. The meta image element is a container for an img tag or icon and also has a theme of --rounded to make the container circular.

Migration Guide

Updating from v2 to v3

V2 -> V3 introduces the new majors of o-colors and o-typography. Updating to this new version will mean updating any other components that you have which are using o-colors or o-typography. There are no other breaking changes in this release.


This software is published by the Financial Times under the MIT licence.

dead Origami v1 (Bower)
Switch component view

GitHub: o-card

Install o-card

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

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

Help & Support

o-card is maintained directly by the Origami team. If you have any questions about o-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