Creating a Tab component helps organize content into clickable sections, enhancing navigation.
How to edit in the back office?
First, add tab item titles for each section, and pick a title background color to make the headers stand out.
Inside each tab, use a Grid layout to present content neatly, and choose a distinct content background for visual contrast.
You can easily reorder tabs using drag-and-drop and add new ones as needed, but keeping the number of tabs limited ensures a cleaner, user-friendly layout.
This setup offers a seamless way to present detailed information in an accessible format.
Example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis elementum felis, ac facilisis nisl. Vestibulum id est nulla. Ut dignissim luctus nunc, eget elementum lorem commodo non. In hac habitasse platea dictumst. Nunc a est a odio pharetra malesuada. Phasellus nec diam eu ex ultricies tincidunt. Nam et erat pharetra, interdum felis vel, porta massa. Proin cursus, dolor id ultrices tincidunt, tellus orci vulputate ipsum, vitae rhoncus enim nibh eget augue. Proin nec leo non dolor tincidunt ultrices. Aenean bibendum urna ac euismod pretium. Quisque ut nunc vitae nunc tincidunt convallis a sed dolor. Proin ut erat scelerisque, fermentum purus vitae, congue lacus. Mauris ac ipsum vitae mauris mollis rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis elementum felis, ac facilisis nisl. Vestibulum id est nulla. Ut dignissim luctus nunc, eget elementum lorem commodo non. In hac habitasse platea dictumst. Nunc a est a odio pharetra malesuada. Phasellus nec diam eu ex ultricies tincidunt. Nam et erat pharetra, interdum felis vel, porta massa. Proin cursus, dolor id ultrices tincidunt, tellus orci vulputate ipsum, vitae rhoncus enim nibh eget augue. Proin nec leo non dolor tincidunt ultrices. Aenean bibendum urna ac euismod pretium. Quisque ut nunc vitae nunc tincidunt convallis a sed dolor. Proin ut erat scelerisque, fermentum purus vitae, congue lacus. Mauris ac ipsum vitae mauris mollis rhoncus.
Key figure
n°1