BU Blocks Style Guide

Button Button BlockLink

Ready New Issue

This is an button Block, you can use this as a base line for writing up the static markup and styles for a new block.

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

Default styling

.is-style-default

Default style

.is-style-outline

Outline style

.is-style-squared.is-style-default

Squared style

.is-style-squared.is-style-outline

Squared style

.has-dark-theme.is-style-default

Dark theme variation

.has-dark-theme.is-style-outline

Dark theme variation

.has-light-theme.is-style-default

Light theme variation

.has-light-theme.is-style-outline

Light theme variation

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

<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>
		
		<p><a href="#" class="wp-block-button {{modifier_class}}">Hello I am an Example Button</a></p>
		
		<p><a href="#" class="wp-block-button icon-navigateright align-icon-right {{modifier_class}}">A Button with a right aligned icon</a></p>
		
		<p><a href="#" class="wp-block-button icon-navigateright align-icon-left {{modifier_class}}">A Button with a left aligned icon</a></p>
		
		<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel.</p>
		</article>