<!--
https://jsbin.com/kiliyineca/2/edit?html,css,output
-->



<!--  /// 1 /// -->	

<!-- .btn -->
<div class="btn" style="--status: success">Success</div>
<div class="btn" style="--status: danger">Danger</div>
<div class="btn" style="--status: warning">Warning</div>	
<div class="btn">Else</div>	
	
<!-- .cover -->	
<div class="cover" style="--priority: medium;">Iam Cover</div>
	
	
<!-- .container -->	
<div class="container">Container</div>
	
	
	
<!--  /// 2 /// -->	


<div class="card" data-status="pending">Pending Task</div>
<div class="card" data-status="complete">Completed Task</div>
<div class="card" data-status="inactive">Inactive Task</div>