Widgets

Markup for creating a new widget

Block

<section class="block">
    Standard widget markup
</section>

Background Color

<section class="block white-bg">White background</section>
<section class="block gray-bg">Light background</section>
<section class="block dark-bg">Dark background</section>
<section class="block theme-bg">Theme background</section>
<section class="block theme-alt-bg">Theme alt background</section>

Text Color

<section class="block">Dark Text</section>
<section class="block light-color">Light Text</section>

Compact

<section class="block block--compact">Less padding</section>

Block header

<section class="block">
    
    <div class="block__header">
			<h6 class="pre-head">Sub header</h6>
			<h2>Heading</h2>
			<div class="block__header-text">
				<p>Text</p>
			</div>
		</div>
		
		<div class="block__body">
			Block body
		</div>
		
</section>