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>