Origami Frontend Components & Services

SassDoc: 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.

oCard

Base card styles

Links

oCardMetaImage

Base styles for meta image element floated to the right and fixed size

Links

oCardTag

Base tag styles

Links

oCardContent

Base styles for content element giving correct order and box-sizing

Links

oCardTimestamp

Base timestamp styles

Links

oCardHeading

Base heading styles (includes link styles within the element)

Links

oCardStandfirst

Base standfirst text styles

Links

oCardImage

Card image styles, also applies top and bottom modifiers

Links

oCardRelatedContent

Base related content list styles

Links

oCardRelatedContentItem

Base related content item styles, including link styles

Links

oCardImageLeft

Styles for a left aligned image

Links

oCardImageRight

Styles for a right aligned image

Links

oCardImageTop

Styles to force an image to the top of the card

Links

oCardImageBottom

Styles to force an image to the bottom of the card

Links

o-card-is-silent

Silent mode

Links

o-card-output-fonts

Active mode

Links

o-card-spacing-unit

Size of spacing used throughout the component

Links

o-card-image-left-width

Size of image when left aligned

Links

o-card-image-right-width

Size of image when right aligned

Links

o-card-meta-image-size

Size of the meta image element

Links

oCardThemeStandout

Stand out card theme styles

Links

oCardThemeOpinionTag

Styles for the o-card__tag element. Sets the colour and typography of an opinion card tag.

Links

oCardThemeMetaImageRounded

Styles for rounded meta images. Adds border radius and background colour

Links

oCardThemePortrait

Portrait card theme styles. Modifies the card to a flex column. Resets o-cardimage and o-cardcontent to remove floats and fill the full width of the card

Links

oCardThemeLandscape

Landscape card theme styles. Modifies the o-card element to switch to display block and modifies the card__content element if the card has a left aligned image

Links

oCard

Base card styles

Links

Status
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