Origami Frontend Components & Services

Demos: o-card

o-card has a support status of "deprecated". This means that no new features will be added to this component, but security-related bugs will be fixed. We do not recommend using this component in new projects. If you still rely on this component or have concerns, please contact the Origami team.

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