Origami Frontend Components & Services

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

Standard

Standard card

<div class="demo-container demo-container--">
	<div class="o-card o-card-- o-card--image-" data-o-component="o-card">

		<div class="o-card__content">
			<div class="o-card__meta">
				<a href="#" class="o-card__tag">Demo card tag</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>


				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

	</div>
</div>

Standout

Card with vertically aligned image

<div class="demo-container demo-container--standout">
	<div class="o-card o-card--standout o-card--image-" data-o-component="o-card">
			<div class="o-card__image o-card__image--">
				<img src="https://image.webservices.ft.com/v1/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=o-card-demo" alt="demo image">
			</div>

		<div class="o-card__content">
			<div class="o-card__meta">
				<a href="#" class="o-card__tag">Demo card tag</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>


				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

	</div>
</div>

Opinion

Opinion card with no image

<div class="demo-container demo-container--opinion">
	<div class="o-card o-card--opinion o-card--image-" data-o-component="o-card">
		<div class="o-card__content o-card__content-">
			<div class="o-card__meta">
					<div class="o-card__meta-image o-card__meta-image--rounded">
						<img src="http://image.webservices.ft.com/v1/images/raw/fthead:mrs-moneypenny?source=origami&amp;width=60" alt="demo image">
					</div>
				<a href="#" class="o-card__tag">Mrs Moneypenny</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>

				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

	</div>
</div>

Card with horizontal image

Card with horizontally aligned image

<div class="demo-container demo-container--landscape">
	<div class="o-card o-card--landscape o-card--image-left" data-o-component="o-card">
			<div class="o-card__image o-card__image--left">
				<img src="https://image.webservices.ft.com/v1/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=o-card-demo" alt="demo image">
			</div>

		<div class="o-card__content">
			<div class="o-card__meta">
				<a href="#" class="o-card__tag">Demo card tag</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>


				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

	</div>
</div>

Card with right aligned horizontal image

Card with horizontally aligned image

<div class="demo-container demo-container--landscape">
	<div class="o-card o-card--landscape o-card--image-right" data-o-component="o-card">
			<div class="o-card__image o-card__image--right">
				<img src="https://image.webservices.ft.com/v1/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=o-card-demo" alt="demo image">
			</div>

		<div class="o-card__content">
			<div class="o-card__meta">
				<a href="#" class="o-card__tag">Demo card tag</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds more text more text more text</a></h2>


				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

			<ul class="o-card__related-content">
					<li class="o-card__related-content-item"><a href="#">Example related story</a></li>
					<li class="o-card__related-content-item"><a href="#">Another related story</a></li>
					<li class="o-card__related-content-item"><a href="#">Last related story</a></li>
			</ul>
	</div>
</div>

Horizontal

Horizontally aligned card

<div class="demo-container demo-container--landscape">
	<div class="o-card o-card--landscape o-card--image-" data-o-component="o-card">

		<div class="o-card__content">
			<div class="o-card__meta">
				<a href="#" class="o-card__tag">Demo card tag</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>

				<p class="o-card__standfirst">Bondholders pay government for the privilege of lending it money</p>

				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

	</div>
</div>

Large card full content

Large Card with all content examples

<div class="demo-container demo-container--portrait">
	<div class="o-card o-card--portrait o-card--image-top" data-o-component="o-card">
			<div class="o-card__image o-card__image--top">
				<img src="https://image.webservices.ft.com/v1/images/raw/http%3A%2F%2Fim.ft-static.com%2Fcontent%2Fimages%2Fa60ae24b-b87f-439c-bf1b-6e54946b4cf2.img?source=o-card-demo" alt="demo image">
			</div>

		<div class="o-card__content">
			<div class="o-card__meta">
				<a href="#" class="o-card__tag">Demo card tag</a>
			</div>

			<h2 class="o-card__heading"><a href="#">Japan sells negative yield 10-year bonds</a></h2>

				<p class="o-card__standfirst">Bondholders pay government for the privilege of lending it money</p>

				<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="2016-02-29T12:35:48Z">2016-02-29T12:35:48Z</time>
		</div>

			<ul class="o-card__related-content">
					<li class="o-card__related-content-item"><a href="#">Example related story</a></li>
					<li class="o-card__related-content-item"><a href="#">Another related story</a></li>
					<li class="o-card__related-content-item"><a href="#">Last related story</a></li>
			</ul>
	</div>
</div>
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