Heading

This element is exclusively to use as page title. It can be combined with floating elements like: tag, button, toggle button, and more. You can float those elements at the left or right of the page title.

Base Markup This is the main markup for heading element. It is the same markup we are using in this page title. 
<div class="sui-header">
	<h1 class="sui-header-title">Example Heading</h1>
</div>
Left Element When you need to float an element next to the title you can use this variation. 
<div class="sui-header">

	<h1 class="sui-header-title">Example Heading</h1>

	<!-- Float element to left -->
	<div class="sui-actions-left">

		<span class="sui-tag sui-tag-purple">
			Sample Tag
		</span>

	</div>

</div>
Right Element When you need to float an element at the right edge of the page, try this markup. 
<div class="sui-header">

	<h1 class="sui-header-title">Example Heading</h1>

	<!-- Float element to Right -->
	<div class="sui-actions-right">

		<button class="sui-button sui-button-blue">
			Sample Button
		</button>

	</div>

</div>