energylink/public/app/features/styleguide/styleguide.html

<navbar icon="fa fa-fw fa-adjust" title="Style Guide">
</navbar>

<div class="page-container">
	<div class="page-header">
		<h1>Style Guide</h1>

		<a class="btn btn-success" ng-click="ctrl.switchTheme()">
			<i class="fa fa-random"></i>
			Switch theme
		</a>
		<a class="btn btn-inverse" ng-click="ctrl.switchTheme()">
			<i class="fa fa-refresh"></i>
			Reload
		</a>
	</div>

	<ul class="nav nav-tabs">
		<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab">
			<a href="styleguide/{{page}}">{{page}}</a>
		</li>
	</ul>

	<div class="tab-pane" ng-if="ctrl.page.colors">
		<ul>
			<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
				<strong>${{color.name}}</strong>
				<em>{{color.value}}</em>
			</li>
		</ul>
	</div>

	<div class="tab-pane" ng-if="ctrl.page.buttons">
		<div ng-repeat="variant in ctrl.buttonVariants" class="row">
			<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
				<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
					btn{{variant}}{{buttonName}}
				</button>
			</div>
		</div>
	</div>

	<div class="tab-pane" ng-if="ctrl.page.forms">
		forms
	</div>

</div>