This component is deprecated.

This component should not be used for new projects. Only the most severe security-related bugs will be fixed for this component, though existing implementations will continue to work. This page is here for existing users to refer to documentation.

o-promobox

Styling for boxes that promote the contents of themselves

deprecated

Base

<div class="o-promobox">
	<h3 class="o-promobox__title">Repeating work&#x2026; again, again, again</h3>
	<img class="o-promobox__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http:%2F%2Forigami.ft.com%2Fimg%2Fdevices.png?width=167&amp;source=docs" alt="Duplication, duplication, duplication ">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat justo, placerat sed sem a, mattis semper lectus. Vestibulum molestie sem eget pulvinar volutpat. Donec nulla enim, scelerisque at dictum placerat, elementum at sem. Duis ut nisi at risus eleifend euismod. Curabitur eget velit nulla. In ac ullamcorper nisl, ut iaculis libero. Integer pharetra faucibus elit, at molestie tortor eleifend at.</p>
</div>

Skinny

<div class="o-promobox o-promobox--skinny">
	<h3 class="o-promobox__title">Repeating work&#x2026; again, again, again</h3>
	<img class="o-promobox__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http:%2F%2Forigami.ft.com%2Fimg%2Fdevices.png?width=167&amp;source=docs" alt="Duplication, duplication, duplication ">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat justo, placerat sed sem a, mattis semper lectus. Vestibulum molestie sem eget pulvinar volutpat. Donec nulla enim, scelerisque at dictum placerat, elementum at sem. Duis ut nisi at risus eleifend euismod. Curabitur eget velit nulla. In ac ullamcorper nisl, ut iaculis libero. Integer pharetra faucibus elit, at molestie tortor eleifend at.</p>
</div>

Standard

<div class="o-promobox o-promobox--standard">
	<h3 class="o-promobox__title">Repeating work&#x2026; again, again, again</h3>
	<img class="o-promobox__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http:%2F%2Forigami.ft.com%2Fimg%2Fdevices.png?width=167&amp;source=docs" alt="Duplication, duplication, duplication ">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat justo, placerat sed sem a, mattis semper lectus. Vestibulum molestie sem eget pulvinar volutpat. Donec nulla enim, scelerisque at dictum placerat, elementum at sem. Duis ut nisi at risus eleifend euismod. Curabitur eget velit nulla. In ac ullamcorper nisl, ut iaculis libero. Integer pharetra faucibus elit, at molestie tortor eleifend at.</p>
</div>

Standard-skinny

<div class="o-promobox o-promobox--skinny o-promobox--standard">
	<h3 class="o-promobox__title">Repeating work&#x2026; again, again, again</h3>
	<img class="o-promobox__image" src="https://www.ft.com/__origami/service/image/v2/images/raw/http:%2F%2Forigami.ft.com%2Fimg%2Fdevices.png?width=167&amp;source=docs" alt="Duplication, duplication, duplication ">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat justo, placerat sed sem a, mattis semper lectus. Vestibulum molestie sem eget pulvinar volutpat. Donec nulla enim, scelerisque at dictum placerat, elementum at sem. Duis ut nisi at risus eleifend euismod. Curabitur eget velit nulla. In ac ullamcorper nisl, ut iaculis libero. Integer pharetra faucibus elit, at molestie tortor eleifend at.</p>
</div>
Bower Dependencies
o-colors >=2.5.0 <4
GitHub Repository

Quickstart

Build Service

Add the following to your <link> tag

o-promobox@^1.3.8

How do I do that?

For more information see the Origami build service.

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-promobox"@"^1.3.8"

For more information see the Origami build process.