Team
Within the team block, individual team members are presented with a clean and minimalistic design. Each team member is represented by their image, accompanied by their name and designation. This straightforward format allows visitors to easily identify and connect with your team members.
Displaying a team on the website is optional, however recommended to add key personnel on a leadership page. Transparency in government is encouraged and hence adding information of key team members is always a good idea.
Key elements to note
- All images displayed on the website must follow a consistent background pattern.
- All key team members must have a front face image. Avoid images where the team member is not looking straight into the camera while posing for the image.
- The image must be followed by the full name of the team member.
- Adding the designation of the team member is mandatory.
- The pattern of all images must be consistent.
Adding a profile to a team member is optional and you may choose to this based on your reasearch for user experience and your target audience. Should you need to add a profile per team member, it is recommended to always add layout that can be directly accessed via a URL.
Team - 4 columns cards
<div class="grid grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6 lg:gap-8 xl:gap-10">
<div>
<img src="img/team1.jpg" alt="" class="rounded md:rounded-lg xl:rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">H.E. Mohammed Al Mansouri</div>
<div class="text-sm xl:text-base">Chief Executive Officer</div>
</div>
</div>
<div>
<img src="img/team2.jpg" alt="" class="rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">Rashid Al-Hakim</div>
<div class="text-sm xl:text-base">Entity Chairman</div>
</div>
</div>
<div>
<img src="img/team3.jpg" alt="" class="rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">Youssef Ibrahim</div>
<div class="text-sm xl:text-base">Technical and human fields</div>
</div>
</div>
<div>
<img src="img/team4.jpg" alt="" class="rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">Kareem Al-Farsi</div>
<div class="text-sm xl:text-base">Executive Director</div>
</div>
</div>
</div>
Team - 3 Columns cards
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-8 xl:gap-10">
<div>
<img src="img/team1.jpg" alt="" class="rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">Mohammed Al Mansouri</div>
<div class="text-base">Chief Executive Officer</div>
</div>
</div>
<div>
<img src="img/team2.jpg" alt="" class="rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">Rashid Al-Hakim</div>
<div class="text-base">Entity Chairman</div>
</div>
</div>
<div>
<img src="img/team3.jpg" alt="" class="rounded-xl w-full aspect-square object-cover">
<div class="space-y-3 p-4 lg:p-5 xl:p-6 text-center">
<div class="text-lg text-aeblack-800 font-medium">Youssef Ibrahim</div>
<div class="text-base">Technical and human fields</div>
</div>
</div>
</div>
