Examples
Source:
blocks/listicle/style.scss, line 16
View Source
Default styling
.has-number
Number version
.has-video
Video version
Markup blocks/listicle/bu-blocks-block-listicle.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 }}
<section class="wp-block-editorial-listicle {{modifier_class}}">
<article class="wp-block-editorial-listicle-article">
<figure class="wp-block-editorial-listicle-figure">
<img src="https://placekitten.com/1024" srcset="http://placekitten.com/300 300w, http://placekitten.com/1024 1024w, http://placekitten.com/1600 1600w" alt="cute kittens" />
<figcaption class="wp-caption-text">Photo or video credit</figcaption>
</figure>
<header class="wp-block-editorial-listicle-header">
<div class="wp-block-editorial-listicle-header-content">
<h3 class="wp-block-editorial-listicle-header-content-hed"><strong>Lorem ipsum dolor sit amet</strong> magna aliqua</h3>
<h4 class="wp-block-editorial-listicle-header-content-dek"><strong>Consectetur adipiscing</strong> elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h4>
</div>
</header>
<section class="wp-block-editorial-listicle-section">
<div class="wp-block-editorial-listicle-section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a href="#">eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-editorial-listicle-section-meta">
<a href="#" class="icon-action">Share this</a>
</div>
</section>
<footer class="wp-block-editorial-listicle-footer">
<h3 class="wp-block-editorial-listicle-footer-title">Related Stories</h3>
<ul class="wp-block-editorial-listicle-footer-list">
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Lorem ipsum dolor sit amet consectetur adipiscing elit</a></li>
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Sed do eiusmod tempor incididunt</a></li>
</ul>
</footer>
</article>
</section>
{{/unless}}
{{#ifContains modifier_class 'has-number' }}
<section class="wp-block-editorial-listicle {{modifier_class}}">
<article class="wp-block-editorial-listicle-article">
<figure class="wp-block-editorial-listicle-figure">
<img src="https://placekitten.com/1024" srcset="http://placekitten.com/300 300w, http://placekitten.com/1024 1024w, http://placekitten.com/1600 1600w" alt="cute kittens" />
<figcaption class="wp-caption-text">Photo or video credit</figcaption>
</figure>
<header class="wp-block-editorial-listicle-header">
<!-- number starts -->
<h2 class="wp-block-editorial-listicle-header-number">1</h2>
<!-- number ends -->
<div class="wp-block-editorial-listicle-header-content">
<h3 class="wp-block-editorial-listicle-header-content-hed"><strong>Lorem ipsum dolor sit amet</strong> magna aliqua</h3>
<h4 class="wp-block-editorial-listicle-header-content-dek"><strong>Consectetur adipiscing</strong> elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h4>
</div>
</header>
<section class="wp-block-editorial-listicle-section">
<div class="wp-block-editorial-listicle-section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a href="#">eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-editorial-listicle-section-meta">
<a href="#" class="icon-action">Share this</a>
</div>
</section>
<footer class="wp-block-editorial-listicle-footer">
<h3 class="wp-block-editorial-listicle-footer-title">Related Stories</h3>
<ul class="wp-block-editorial-listicle-footer-list">
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Lorem ipsum dolor sit amet consectetur adipiscing elit</a></li>
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Sed do eiusmod tempor incididunt</a></li>
</ul>
</footer>
</article>
</section>
{{/ifContains}}
{{#ifContains modifier_class 'has-sidebar' }}
<section class="wp-block-editorial-listicle {{modifier_class}}">
<article class="wp-block-editorial-listicle-article">
<figure class="wp-block-editorial-listicle-figure">
<img src="https://placekitten.com/1024" srcset="http://placekitten.com/300 300w, http://placekitten.com/1024 1024w, http://placekitten.com/1600 1600w" alt="cute kittens" />
<figcaption class="wp-caption-text">Photo or video credit</figcaption>
</figure>
<header class="wp-block-editorial-listicle-header">
<div class="wp-block-editorial-listicle-header-content">
<h3 class="wp-block-editorial-listicle-header-content-hed"><strong>Lorem ipsum dolor sit amet</strong> magna aliqua</h3>
<h4 class="wp-block-editorial-listicle-header-content-dek"><strong>Consectetur adipiscing</strong> elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h4>
</div>
</header>
<section class="wp-block-editorial-listicle-section">
<div class="wp-block-editorial-listicle-section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a href="#">eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-editorial-listicle-section-meta">
<!-- sidebar starts -->
<aside class="wp-block-editorial-listicle-section-aside">
<p><strong>Where:</strong><br/>
<a href="#">1234 Main Street<br/>Boston, MA 02908</a></p>
<p><strong>Website:</strong><br/>
<a href="#" target="_blank">cutekittens.com</a></p>
{{!-- <p><a href="#" class="icon-action">Share this</a></p>
--}} </aside>
<!-- sidebar ends -->
<a href="#" class="icon-action">Share this</a>
</div>
</section>
<footer class="wp-block-editorial-listicle-footer">
<h3 class="wp-block-editorial-listicle-footer-title">Related Stories</h3>
<ul class="wp-block-editorial-listicle-footer-list">
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Lorem ipsum dolor sit amet consectetur adipiscing elit</a></li>
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Sed do eiusmod tempor incididunt</a></li>
</ul>
</footer>
</article>
</section>
{{/ifContains}}
{{#ifContains modifier_class 'has-video' }}
<section class="wp-block-editorial-listicle {{modifier_class}}">
<article class="wp-block-editorial-listicle-article">
<figure class="wp-block-editorial-listicle-figure">
<!-- video starts -->
<div class="responsive-video">
<iframe src="//www.bu.edu/buniverse/interface/embed/embed.html?v=1FG7mC26P" width="550" height="310" frameborder="0"></iframe>
</div>
<!-- video ends-->
<figcaption class="wp-caption-text">Photo or video credit</figcaption>
</figure>
<header class="wp-block-editorial-listicle-header">
<div class="wp-block-editorial-listicle-header-content">
<h3 class="wp-block-editorial-listicle-header-content-hed"><strong>Lorem ipsum dolor sit amet</strong> magna aliqua</h3>
<h4 class="wp-block-editorial-listicle-header-content-dek"><strong>Consectetur adipiscing</strong> elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h4>
</div>
</header>
<section class="wp-block-editorial-listicle-section">
<div class="wp-block-editorial-listicle-section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a href="#">eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="wp-block-editorial-listicle-section-meta">
<a href="#" class="icon-action">Share this</a>
</div>
</section>
<footer class="wp-block-editorial-listicle-footer">
<h3 class="wp-block-editorial-listicle-footer-title">Related Stories</h3>
<ul class="wp-block-editorial-listicle-footer-list">
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Lorem ipsum dolor sit amet consectetur adipiscing elit</a></li>
<li class="wp-block-editorial-listicle-footer-list-item"><a class="wp-block-editorial-listicle-footer-list-item-link">Sed do eiusmod tempor incididunt</a></li>
</ul>
</footer>
</article>
</section>
{{/ifContains}}
<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>
</article>
</main>
</div>