Origami Frontend Components & Services

Readme: o-card deprecated

o-card is deprecated. This component should not be used for new projects. Only security-related bugs will be fixed for this component, though existing implementations will continue to work.

This component has now been deprecated. Please use o-teaser.


Usage

SCSS:

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.

Themes

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.


Licence

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

Switch component view

GitHub Repository

Install o-card

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

If running a Manual Build, run bower install --save "o-card@^3.0.3".

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