BU Blocks Style Guide

Sidebar

Editorial Related StoriesLink

Ready New Issue

This is a Related Stories block that automatically pulls in related stories, using the YARPP plugin. We'd also like the option to manually curate (select) stories instead of using the default YARPP suggestions when needed. There are two layout options, a list style and a card style. The list style can pull in a minimum of 2 and a max of 5 stories, and be positioned on the left or right side of the article. The card style can pull in a minimum of 2 and a max of 3 stories, and takes up the full width of the article.

Examples Source: blocks/relatedstories/style.scss, line 16 View Source
Default styling
.is-style-list.alignright

List style stories, align right

.is-style-list.alignleft

List style stories, align left

.is-style-card.has-two

Card style stories, with two stories

.is-style-card.has-three

Card style stories, with three stories

Markup blocks/relatedstories/bu-blocks-block-relatedstories.hbs 
<div class="wrapper">
			<main id="main" role="main" class="content">
				<article class="content-area">
		
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas massa augue, sodales nec convallis in, viverra in tortor. Cras lacus orci, scelerisque non dictum ac, molestie a urna. Nunc ultricies in tortor interdum dictum. Fusce ut mi aliquam, efficitur libero ac, ultricies est. Etiam pellentesque sapien ex, at porttitor urna pulvinar ac. Donec aliquam, dui eget porta rutrum, libero sapien faucibus nibh, ut blandit massa massa eget eros. Curabitur erat nunc, dapibus eget convallis non, tristique ac enim.</p>
		
					{{#unless modifier_class }}
		
						<aside class="wp-block-editorial-relatedstories is-style-list alignright">
							<h3 class="wp-block-editorial-relatedstories-title">Related</h3>
							<ul class="wp-block-editorial-relatedstories-list">
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
										<h4 class="wp-block-editorial-relatedstories-article-title">
											<a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur</a>
										</h4>
										<p class="wp-block-editorial-relatedstories-article-date">January 15, 2018</p>
									</article>
								</li>
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
										<h4 class="wp-block-editorial-relatedstories-article-title">
											<a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</a>
										</h4>
										<p class="wp-block-editorial-relatedstories-article-date">June 23, 2017</p>
									</article>
								</li>
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
										<h4 class="wp-block-editorial-relatedstories-article-title">
											<a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet</a>
										</h4>
										<p class="wp-block-editorial-relatedstories-article-date">May 1, 2017</p>
									</article>
								</li>
							</ul>
						</aside>
		
					{{/unless}}
		
					{{#ifContains modifier_class 'is-style-list' }}
		
						<aside class="wp-block-editorial-relatedstories {{modifier_class}}">
							<h3 class="wp-block-editorial-relatedstories-title">Related</h3>
							<ul class="wp-block-editorial-relatedstories-list">
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
										<h4 class="wp-block-editorial-relatedstories-article-title">
											<a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur</a>
										</h4>
										<p class="wp-block-editorial-relatedstories-article-date">January 15, 2018</p>
									</article>
								</li>
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
										<h4 class="wp-block-editorial-relatedstories-article-title">
											<a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</a>
										</h4>
										<p class="wp-block-editorial-relatedstories-article-date">June 23, 2017</p>
									</article>
								</li>
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
										<h4 class="wp-block-editorial-relatedstories-article-title">
											<a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet</a>
										</h4>
										<p class="wp-block-editorial-relatedstories-article-date">May 1, 2017</p>
									</article>
								</li>
							</ul>
						</aside>
		
					{{/ifContains}}
		
					{{#ifContains modifier_class 'is-style-card' }}
		
						{{#ifContains modifier_class 'has-two' }}
		
						<aside class="wp-block-editorial-relatedstories {{modifier_class}}">
							<h3 class="wp-block-editorial-relatedstories-title">Related</h3>
							<ul class="wp-block-editorial-relatedstories-list">
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<figure class="wp-block-editorial-relatedstories-article-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-editorial-relatedstories-article-content">
											<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
											<h4 class="wp-block-editorial-relatedstories-article-title"><a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur</a></h4>
											<p class="wp-block-editorial-relatedstories-article-date">January 15, 2018</p>
										</div>
									</article>
								</li>
								<li class="wp-block-editorial-relatedstories-list-item">
									<article class="wp-block-editorial-relatedstories-article">
										<figure class="wp-block-editorial-relatedstories-article-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-editorial-relatedstories-article-content">
											<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
											<h4 class="wp-block-editorial-relatedstories-article-title"><a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</a></h4>
											<p class="wp-block-editorial-relatedstories-article-date">June 23, 2017</p>
										</div>
									</article>
								</li>
							</ul>
						</aside>
		
						{{/ifContains}}
		
						{{#ifContains modifier_class 'has-three' }}
		
							<aside class="wp-block-editorial-relatedstories {{modifier_class}}">
								<h3 class="wp-block-editorial-relatedstories-title">Related</h3>
								<ul class="wp-block-editorial-relatedstories-list">
									<li class="wp-block-editorial-relatedstories-list-item">
										<article class="wp-block-editorial-relatedstories-article">
											<figure class="wp-block-editorial-relatedstories-article-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-editorial-relatedstories-article-content">
												<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
												<h4 class="wp-block-editorial-relatedstories-article-title"><a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur</a></h4>
												<p class="wp-block-editorial-relatedstories-article-date">January 15, 2018</p>
											</div>
										</article>
									</li>
									<li class="wp-block-editorial-relatedstories-list-item">
										<article class="wp-block-editorial-relatedstories-article">
											<figure class="wp-block-editorial-relatedstories-article-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-editorial-relatedstories-article-content">
												<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
												<h4 class="wp-block-editorial-relatedstories-article-title"><a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</a></h4>
												<p class="wp-block-editorial-relatedstories-article-date">June 23, 2017</p>
											</div>
										</article>
									</li>
									<li class="wp-block-editorial-relatedstories-list-item">
										<article class="wp-block-editorial-relatedstories-article">
											<figure class="wp-block-editorial-relatedstories-article-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-editorial-relatedstories-article-content">
												<p class="wp-block-editorial-relatedstories-article-category"><span>Category</span></p>
												<h4 class="wp-block-editorial-relatedstories-article-title"><a href="#" class="wp-block-editorial-relatedstories-article-title-link">Lorem ipsum dolor sit amet</a></h4>
												<p class="wp-block-editorial-relatedstories-article-date">May 1, 2017</p>
											</div>
										</article>
									</li>
								</ul>
							</aside>
		
						{{/ifContains}}
		
					{{/ifContains}}
		
					<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel.</p>
		
				</article>
			</main>
		</div>