KSS Style Guide

Blocks

Button Filled

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

4 types of default buttons atoms

<insert-markup>blocks.buttons.filled-</insert-markup>
Click me
.has-black-color
default button
<insert-markup>blocks.buttons.filled-0</insert-markup>
Click me
.has-text-base-color
secondary button
<insert-markup>blocks.buttons.filled-1</insert-markup>
Click me
.has-gray-base-color
Success button
<insert-markup>blocks.buttons.filled-2</insert-markup>
Click me
.has-gray-darken-color
Warning button
<insert-markup>blocks.buttons.filled-3</insert-markup>
Click me
.has-success-base-color
Ghost version button
<insert-markup>blocks.buttons.filled-4</insert-markup>
Click me
.has-black-background-color
next
<insert-markup>blocks.buttons.filled-5</insert-markup>
Click me
.has-gray-base-background-color
next
<insert-markup>blocks.buttons.filled-6</insert-markup>
Click me
.has-primary-base-background-color
next
<insert-markup>blocks.buttons.filled-7</insert-markup>
Click me
Markup: ..\..\styleguide\templates\blocks\buttons-filled.html 
<div class="wp-block-buttons">
	<div class="wp-block-button is-style-fill">
		<a href="#" class="wp-block-button__link [modifier class]">
			Click me
		</a>
	</div>
</div>
Source: ../source/sass/05-blocks/button/_style.scss, line 1

Button outlined

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

4 types of default buttons atoms

<insert-markup>blocks.buttons.outlined-</insert-markup>
Click me
.-primary
default button
<insert-markup>blocks.buttons.outlined-0</insert-markup>
Click me
.-secondary
secondary button
<insert-markup>blocks.buttons.outlined-1</insert-markup>
Click me
.-success
Success button
<insert-markup>blocks.buttons.outlined-2</insert-markup>
Click me
.-warning
Warning button
<insert-markup>blocks.buttons.outlined-3</insert-markup>
Click me
.-ghost
Ghost version button
<insert-markup>blocks.buttons.outlined-4</insert-markup>
Click me
Markup: ..\..\styleguide\templates\blocks\buttons-outlined.html 
<div class="wp-block-buttons">
   <div class="wp-block-button is-style-outline">
<a href="#" class="wp-block-button__link [modifier class]">
	Click me
</a>
   </div>
</div>
Source: ../source/sass/05-blocks/button/_style.scss, line 21