BU Blocks Style Guide

Sidebar

Component Story Card ComponentLink

In-Progress New Issue

This is a Story Card component. It is used in the Related Stories block.

Examples Source: blocks/storycard/style.scss, line 16 View Source
Default styling
.has-photo-background

Photo background variation

Markup blocks/storycard/bu-blocks-block-storycard.hbs
<article class="wp-block-component-editorial-storycard {{modifier_class}}">
			<figure class="wp-block-component-editorial-storycard-image">
				<img src="http://placekitten.com/300/300" srcset="http://placekitten.com/1024/1024 1024w, http://placekitten.com/1600/1600 1600w" alt="placeholder">
			</figure>
			<div class="wp-block-component-editorial-storycard-content">
				<p class="wp-block-component-editorial-storycard-category"><span>Category</span></p>
				<h4 class="wp-block-component-editorial-storycard-title"><a href="#" class="wp-block-storycard-link">Lorem ipsum dolor sit amet, consectetur</a></h4>
				<p class="wp-block-component-editorial-storycard-date">January 15, 2018</p>
			</div>
		</article>