Sponsor block

View in Github

Sponsor block is a promotional element featuring a paid post. When loaded lazily, wrap this component in c-ad-fluid. {{isWide}}

.c-sponsor-block

<aside class="c-sponsor-block ">
	<div class="c-sponsor-block__text">
		<span class="c-sponsor-block__label t-uppercase t-lsp-b has-text-gray-dark t-size-xs has-xxs-btm-marg"><strong>Paid
				Post</strong></span>
		<div class="c-sponsor-block__main">
			<p class="c-sponsor-block__sponsor has-text-sponsor t-uppercase t-lsp-m t-size-xs has-xxs-btm-marg"><strong>Texas Company ABC 123</strong></p>
			<h3 class="c-sponsor-block__headline c-sponsor-block__static-text t-lh-s has-xxxs-btm-marg"><a href="#"
					class="has-text-black-off has-text-hover-black">This is a headline for a sponsor block. The headline is truncated if it exceeds three lines.</a></h3>
			<p class="c-sponsor-block__desc c-sponsor-block__static-text t-lh-m"><a href="#" class="has-text-black-off has-text-hover-black">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, impedit amet? Eligendi harum beatae in numquam labore ipsa quasi enim aut ipsum, quibusdam, iste voluptates, quisquam exercitationem assumenda blanditiis esse.</a></p>
		</div>
	</div>
	<a href="#" class="c-sponsor-block__image-wrap l-display-block"><img src="/queso-ui/img/sponsor-block/c-sponsor-block-thumb.jpg" class="l-width-full c-sponsor-block__image" alt="Texas bluebonnets" /></a>
</aside>

.c-sponsor-block--filled

This version includes a border/bg color. It can be dropped after lazy ads rolls out and c-sponsor-block becomes coupled with c-ad-fluid.

<aside class="c-sponsor-block c-sponsor-block--filled">
	<div class="c-sponsor-block__text">
		<span class="c-sponsor-block__label t-uppercase t-lsp-b has-text-gray-dark t-size-xs has-xxs-btm-marg"><strong>Paid
				Post</strong></span>
		<div class="c-sponsor-block__main">
			<p class="c-sponsor-block__sponsor has-text-sponsor t-uppercase t-lsp-m t-size-xs has-xxs-btm-marg"><strong>Texas Company ABC 123</strong></p>
			<h3 class="c-sponsor-block__headline c-sponsor-block__static-text t-lh-s has-xxxs-btm-marg"><a href="#"
					class="has-text-black-off has-text-hover-black">This is a headline for a sponsor block. The headline is truncated if it exceeds three lines.</a></h3>
			<p class="c-sponsor-block__desc c-sponsor-block__static-text t-lh-m"><a href="#" class="has-text-black-off has-text-hover-black">Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, impedit amet? Eligendi harum beatae in numquam labore ipsa quasi enim aut ipsum, quibusdam, iste voluptates, quisquam exercitationem assumenda blanditiis esse.</a></p>
		</div>
	</div>
	<a href="#" class="c-sponsor-block__image-wrap l-display-block"><img src="/queso-ui/img/sponsor-block/c-sponsor-block-thumb.jpg" class="l-width-full c-sponsor-block__image" alt="Texas bluebonnets" /></a>
</aside>