This tutorial will guide you through creating a dynamic and visually appealing grid layout using various components available. The grid layout is ideal for showcasing features, products, or solutions, each with a dedicated 'Learn More' button.
Avonni Layout: This is the foundation of our grid layout. It allows us to structure our content into an organized, grid-based format, making it easier for users to navigate various items.
Avonni Container: Each item in the grid will be encapsulated within an Avonni Container. This helps segment different products or features, providing a clean and isolated space for each item.
Avonni Icon: Icons are a great way to represent the features or products visually. They add a graphical element to the content, making it more engaging and more accessible to interpret.
Text Block: This is where you'll add the descriptive text for each feature or product. The text block component allows for clear and concise information delivery.
Avonni Button: A 'Learn More' button under each item in the grid guides users to additional information. This call to action drives user engagement and provides more detailed content.