Editorial Intro Paragraph BlockLink
In-Progress New IssueThis is a Intro Paragraph Block, you can use this as a base line for writing up the static markup and styles for a new block.
blocks/introparagraph/style.scss, line 16
View Source
Larger Opening Paragraph
Larger Opening Paragraph with Color
Larger Opening Paragraph with Secondary Color
Larger Opening Paragraph
2 Column Split Opening Paragraph
Initial Drop Cap Styling
Drop Cap Color Added
Drop Cap Secondary Color Added
Drop Cap Boxed Style
Drop Cap Boxed Style with Color
Drop Cap Boxed Style with Secondary Color
Drop Cap Outline Style
Drop Cap Outline Style with Color
Drop Cap Outline Style with Secondary Color
Drop Cap with Drop-Sadhow
Drop Cap with Drop-Sadhow and Color
Drop Cap with Drop-Sadhow and Secondary Color
Drop Cap with image knock out.
Markup blocks/introparagraph/bu-blocks-block-introparagraph.hbs
<div class="wrapper">
<main id="main" role="main" class="content">
<article class="content-area">
<div class="wp-block-editorial-introparagraph {{modifier_class}}">
<h4>In This Story</h4>
<ul class="wp-block-editorial-introparagraph-toc">
<li>Lorem ipsum dolor sit amet, <a href="#" class="js-anchor-link">consectetur adipisicing</a> elit. <a href="#" class="js-anchor-link">VIDEO <i class="icon-video"></i></a></li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Ut enim ad minim veniam, quis <a href="#" class="js-anchor-link">nostrud exercitation</a> ullamco laboris.</li>
<li>Duis aute esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>
<div class="wp-block-editorial-introparagraph-content">
<svg>
<pattern
id="dropcap-texture"
viewBox="0 0 1024 1024"
patternUnits="userSpaceOnUse"
width="100%" height="100%"
x="0%" y="0%">
<image xlink:href="https://www.bu.edu/webteam/projects/testpattern.png" width="1024" height="1024"/>
</pattern>
<text text-anchor="start"
x="0"
y="50%"
dy=".404em"
class="dropcap-filltext">
P
</text>
</svg>
<p>Paecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend. Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor</p>
</div>
</div>
</article>
</main>
</div>