BU Blocks Style Guide

Editorial Headline BlockLink

Ready New Issue

This is a Headline Block, It has the headline text itself in additon to optional spans containing preemptive text, and post-text for follow up. Also a unique ID is added tot he h tag.

Examples Source: blocks/headline/style.scss, line 16 View Source

Default styling

.is-style-emphasis-weight

Example of font weight emphasis headline variation

.is-style-emphasis-color

Example of font color emphasis headline variation

Markup blocks/headline/bu-blocks-block-headline.hbs

<div class="wrapper">
			<main id="main" role="main" class="content">
				<article class="content-area">
					<h2 id="headline-venenatis" class="wp-block-editorial-headline {{modifier_class}}">
						Venenatis Ornare Tortor
					</h2>
					<p>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. Excepteur sint occaecat […]</p>
					<h2 id="headline-chapter-1" class="wp-block-editorial-headline {{modifier_class}}">
						<span class="wp-block-editorial-headline-pretext">Chapter 1:</span>
						A <strong>Typical</strong> Headline.
						<span class="wp-block-editorial-headline-posttext">Additional text.</span>
					</h2>
					<p>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. Excepteur sint occaecat […]</p>
					<h3 id="headline-chapter-2" class="wp-block-editorial-headline {{modifier_class}}">
						<span class="wp-block-editorial-headline-pretext">Chapter 2:</span>
						A <strong>Typical</strong> Headline.
						<span class="wp-block-editorial-headline-posttext">Additional text.</span>
					</h3>
					<p>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. Excepteur sint occaecat […]</p>
					<h4 id="headline-chapter-3" class="wp-block-editorial-headline {{modifier_class}}">
						<span class="wp-block-editorial-headline-pretext">Chapter 3:</span>
						A <strong>Typical</strong> Headline.
						<span class="wp-block-editorial-headline-posttext">Additional text.</span>
					</h4>
					<p>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. Excepteur sint occaecat […]</p>
				</article>
			</main><!-- .content -->
		</div>