<h3 style="margin-left:16px; font-weight: 500; font-size: 1.6em;">
 Active-Framework is here to help you bring Niagara to a higher level. It brings a wide diversity of useful tools, it improves tagging, it allows you to create better user interfaces and transform a classic Niagara station into a modern, intuitive Web app. It's the ultimate tool to create an appliance out of the box.
</h3>

<style>
 	a:hover { text-decoration: none; }
 	.doc-card-div {width: 320px;height:140px; margin:16px; padding: 24px;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); font-family:Arial, sans-serif}
	.doc-card-div:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.25), 0 4px 4px rgba(0,0,0,0.22); }
	.doc-card-img { width: 48px;height:48px; }
	.doc-card-title { font-size: 1.4em; font-weight: 500; margin:8px 0; line-height: 1.4;color:#020814; }
	.doc-card-description { font-size: 1em; margin: 0; font-weight: 300; line-height: 1.3;color:#73849a }
</style>

<div style="display:flex; flex-direction:row; flex-wrap: wrap;max-width:1200px;">
   <a href="../GS/Get+Started+Home">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/getStarted.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		Get started
	   </p>
	   <p class="doc-card-description">
		Set-up your license and start improving your station
	   </p>
   </div>
   </a>
<a href="../DEN/btibCore">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/core.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		Core
	   </p>
	   <p class="doc-card-description">
		Everything about the core concepts such as sFormat, Logs...
	   </p>
   </div>
</a>
<a href="../DEN/btibToolkit">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/toolkit.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		Toolkit
	   </p>
	   <p class="doc-card-description">
		Use this collection of tools to enhance your Niagara experience and solve integration issues
	   </p>
   </div>
</a>
<a href="../DEN/btibStructure">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/structure.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		Structure
	   </p>
	   <p class="doc-card-description">
		Simplify and industrialize the tagging experience with data models and ontology creator
	   </p>
   </div>
</a>
<a href="../DEN/btibVision">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/vision.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		Vision
	   </p>
	   <p class="doc-card-description">
	 	Transform Niagara to a modern Web app with intuitive and dynamic dashboards
	   </p>
   </div>
</a>
<a href="../DEN/btibStrategy">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/strategy.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		Strategy
	   </p>
	   <p class="doc-card-description">
	 	Create workflows to automate every integration task to save you a lot of time
	   </p>
   </div>
</a>
<a href="../DEN/btibDataFlow+">
   <div class="doc-card-div">
   	   <img src="https://doc-vayandata.s3.eu-west-3.amazonaws.com/dataflow.png" class="doc-card-img"/>
	   <p class="doc-card-title">
		DataFlow
	   </p>
	   <p class="doc-card-description">
	 	Create workflows to aggregate and transform historical data
	   </p>
   </div>
</a>
</div>