This module has been deprecated
Styling for promoboxes
Add the o-promobox class to the element you wish to apply the styling. Typically a promobox will contain an image o-promobox__image, some paragraph, <p>, tags and a title o-promobox__title.
<div class="o-promobox">
<h3 class="o-promobox__title">My Promobox</h3>
<img class="o-promobox__image" src="//my-image.png" alt="" />
<p>My paragraph</p>
</div>Note: it is up to the product developer to decide how to 'flow' other content around the promobox. They might choose to float: left; the promobox or display: inline it - or the product developer may decide to display it full width.
<div class="o-promobox o-promobox--standard">
<h3 class="o-promobox__title">My Promobox</h3>
<img class="o-promobox__image" src="//my-image.png" alt="" />
<p>My paragraph</p>
</div>You can create your own modifiers, for example: .o-promobox--my-theme.
<div class="o-promobox o-promobox--my-theme">
<h3 class="o-promobox__title">My Promobox</h3>
<img class="o-promobox__image" src="//my-image.png" alt="" />
<p>My paragraph</p>
</div>.o-promobox--my-theme {
font-family: oFontsGetFontFamilyWithFallbacks(MillerDisplay);
color: #ffffff;
background-color: oColorsGetPaletteColor(claret);
.o-promobox__title {
font-size: 14px;
line-height: 18px;
border-bottom: 1px solid currentColor;
}
p {
font-size: 12px;
line-height: 16px;
}
}The module comes in two layouts. The default, full-width layout, recommended for smaller screens, and a thinner 'skinny' layout currently fixed to 167 pixels (for legacy reasons).
To enable responsivity, follow the example below:-
<div class="o-promobox o-promobox--custom-responsivity">
<h3 class="o-promobox__title">My Promobox</h3>
<img class="o-promobox__image" src="//my-image.png" alt="" />
<p>My paragraph</p>
</div>@o-promobox-is-silent: false;
@import 'o-promobox/main';
@media (min-width: 300px) {
.o-promobox--custom-responsivity {
@include oPromobox($skinny: true);
.o-promobox__image {
@include oPromoboxImage($fullwidth: true);
}
}
}<div class="my-sidebar">
<div class="o-promobox">
<h3 class="o-promobox__title">My Promobox</h3>
<img class="o-promobox__image" src="//my-image.png" alt="" />
<p>My paragraph</p>
</div>
</div>@o-promobox-is-silent: false;
@import 'o-promobox/main';
@media (min-width: 300px) {
.my-sidebar {
.o-promobox {
@include oPromobox($skinny: true);
}
.o-promobox__image {
@include oPromoboxImage($fullwidth: true);
}
}
}Copyright (c) 2016 Financial Times Ltd. All rights reserved.
This software is published under the MIT licence.