o-card

CSS

Card view of any kind of content

View on GitHub

Quick start

Using the build service

Add the following token to your link tag (how do I do that?):

o-card@^3.0.0

For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-card"@"^3.0.0"

For more information see the Origami build process.

Standard


			

Standard card

Standout


			

Card with vertically aligned image

Opinion


			

Opinion card with no image

Card with horizontal image


			

Card with horizontally aligned image

Card with right aligned horizontal image


			

Card with horizontally aligned image

Horizontal


			

Horizontally aligned card

Large card full content


			

Large Card with all content examples

Component information

Latest stable version:
3.0.0 (3 months, 24 days old)
Status (Learn more):
Active (as of 3.0.0)
Bundle sizes:
543b JavaScript 4,120b CSS
This version
3.0.0 (3 months, 24 days old)
Support status (Learn more):
Active (as of 3.0.0)
Last indexed
22 Aug 2017 13:54:02 (Build now)
Installable?
OK
Dependencies
o-colors ^4.0.1 OK 4.1.1
o-fonts ^3.0.0 OK 3.0.1
o-hoverable ^3.1.0 OK 3.1.0
o-typography ^5.0.1 OK 5.2.0
Dependents
alphaville-uikmt-headern-cardn-concept

Contact

To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue

Origami