{% extends "templates/publishing.njk" %}

{% block main %}
	<header>
		<h1>Nebulosa CSS</h1>
		<h2>A showcase of buttons</h2>
	</header>
	<h1>Buttons</h1>

	<h2>Raised</h2>
	<div>
		<button class="btn raised primary">Primary</button>
		<button class="btn raised secondary">Secondary</button>
		<button class="btn raised" disabled>Disabled</button>
	</div>

	<h2>Filled</h2>
	<div>
		<button class="btn filled primary">Primary</button>
		<button class="btn filled secondary">Secondary</button>
		<button class="btn filled" disabled>Disabled</button>
	</div>

	<h2>Outline</h2>
	<div>
		<button class="btn outline primary">Primary</button>
		<button class="btn outline secondary">Secondary</button>
		<button class="btn outline" disabled>Disabled</button>
	</div>

	<h2>Text only</h2>
	<div>
		<button class="btn textonly primary">Primary</button>
		<button class="btn textonly secondary">Secondary</button>
		<button class="btn textonly" disabled>Disabled</button>
	</div>

{% endblock %}