يحتوي كل تطبيق جوال تقريبًا على بعض العناصر الأساسية. تتضمن هذه العناصر عادةً رأسًا وتذييلًا يغطي الجزء العلوي والسفلي من الشاشة. سيتم وضع جميع العناصر الأخرى بين هذين الاثنين. يوفر Ionic عنصر ion-content يعمل كحاوية، والتي ستغلف جميع العناصر الأخرى التي نريد إنشاءها.
دعونا نتأمل المثال التالي
<div class = "bar bar-header">
<h1 class = "title">Header</h1>
</div>
<div class = "list">
<label class = "item item-input">
<input type = "text" placeholder = "Placeholder 1" />
</label>
<label class = "item item-input">
<input type = "text" placeholder = "Placeholder 2" />
</label>
</div>
<div class = "bar bar-footer">
<h1 class = "title">Footer</h1>
</div>