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

Standard

Standard card

Demo
HTML

Open demo in a new tab

Standout

Card with vertically aligned image

Demo
HTML

Open demo in a new tab

Opinion

Opinion card with no image

Demo
HTML

Open demo in a new tab

Card with horizontal image

Card with horizontally aligned image

Demo
HTML

Open demo in a new tab

Card with right aligned horizontal image

Card with horizontally aligned image

Demo
HTML

Open demo in a new tab

Horizontal

Horizontally aligned card

Demo
HTML

Open demo in a new tab

Large card full content

Large Card with all content examples

Demo
HTML

Open demo in a new tab

Status

Switch component view Version

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